logo

Slider animation responsive

AccueilBulmaIntégration BulmaSlider animation responsive


JavaScript (jQuery)

$(function(){
        $('.slider-item').eq(0).addClass('active');
        var total = $('.slider-item').length;
        var current = 0;
        $('#moveRight').on('click', function(){
            var next=current;
            current= current+1;
            setSlide(next, current);
        });
        $('#moveLeft').on('click', function(){
            var prev=current;
            current = current- 1;
            setSlide(prev, current);
        });
        function setSlide(prev, next){
            var slide= current;
            if(next>total-1){
                slide=0;
                current=0;
            }
            if(next<0){
                slide=total - 1;
                current=total - 1;
            }
            $('.slider-item').eq(prev).removeClass('active');
            $('.slider-item').eq(slide).addClass('active');
            setTimeout(function(){

            },800);
        }
    });

Html

<div class="slider-section">
    <div class="slider main">
        <div class="slider__nav">
        <span id="moveLeft" class="slider__arrow">
            <svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
                <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
            </svg>
        </span>
            <span id="moveRight" class="slider__arrow">
            <svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
                <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
            </svg>
        </span>
        </div> <?php
        $args = array('posts_per_page' => 3,);
        $recent = new WP_Query($args);
        while( $recent -> have_posts()) : $recent -> the_post();
            ?> <div class="slider-item slider-item--1">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <div class="slider-item__image"><?php the_post_thumbnail( 'post_thumbnail' ); ?></div>
                    <div class="slider-item__info">
                        <div class="slider-item__container">
                            <h2 class="slider-item__subtitle"><?php the_category() ?> </h2>
                            <h1 class="slider-item__title"><?php the_title() ?></h1>
                            <p class="slider-item__description"><?php the_excerpt() ?></p>
                        </div>
                    </div>
                </a>
            </div> <?php endwhile; ?>
    </div>
</div>

CSS

.slider-section {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 550px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.slider.main {
  overflow: visible;
}

.slider {
  width: 100%;
  height: 100%;
  display: flex;
  max-width: 890px;
  max-height: 540px;
  overflow: visible;
  position: absolute;
  background: #fff;
}

.slider-item {
  visibility: visible;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  -webkit-align-items: center;
  -webkit-justify-content: flex-end;
  position: relative;
  /* background-color: #fff; */
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
  position: absolute;
  z-index: 0;
  /* transition: 1s all ease-out; */
}

.slider-item__info {
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  right: -50px;
  margin: auto;
  padding: 10px 40px;
  width: 40%;
  position: absolute;
  background: #fff;
  z-index: 1;
  box-shadow: 0 0 10px 0 #dbdbdb;
  visibility: hidden;
}

.slider-item__image {
  width: 100%;
  height: 100%;
  align-self: flex-end;
  flex-basis: 100%;
  -webkit-align-self: flex-end;
  -webkit-flex-basis: 100%;
  position: relative;
  /* transform: translateX(100%); */
  /* transition: 1s all ease-in-out; */
}

.slider-item__subtitle {
  letter-spacing: 3px;
  font-size: 10px;
  text-transform: uppercase;
  margin: 0;
  color: #7E7E7E;
  font-weight: 700;
  /* transform: translateY(25%); */
  opacity: 0;
  visibility: hidden;
  /* transition: 1s all ease-in-out; */
}

.slider-item__title {
  margin: 15px 0 0 0;
  font-size: 44px;
  line-height: 45px;
  letter-spacing: 3px;
  font-weight: 700;
  color: #2C2C2C;
  transform: translateY(25%);
  opacity: 0;
  visibility: hidden;
  transition: 1s all ease-in-out;
}

.slider-item__description {
  /* transform: translateY(25%); */
  opacity: 0;
  visibility: hidden;
  transition: 1s all ease-out;
  margin-top: 35px;
  font-size: 13px;
  color: #7e7e7e;
  line-height: 22px;
  margin-bottom: 35px;
}

.slider__nav {
  position: absolute;
  right: 10px;
  z-index: 2;
  background-color: #fff;
  bottom: 10px;
}

.slider__icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  fill: #5d5d5d;
}

.slider__arrow {
  cursor: pointer;
  display: inline-block;
  padding: 11px 15px;
  position: relative;
}

.slider__arrow:nth-child(1):after {
  content: '';
  right: -3px;
  position: absolute;
  width: 1px;
  background-color: #b0b0b0;
  height: 14px;
  top: 50%;
  margin-top: -7px;
}

.active {
  z-index: 1;
  display: flex;
  visibility: visible;
}

.active .slider-item__subtitle,
.active .slider-item__title,
.active .slider-item__description,
.active .slider-item__btn {
  transform: translateY(0);
  opacity: 1;
  transition: 1s all ease-in-out;
  visibility: visible;
}

.active .slider-item__image {
  transition: 1s all ease-in-out;
  transform: translateX(0);
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  visibility: hidden;
  z-index: 1;
}

.active .slider-item__info {
  transition: 1s all ease-in-out;
  transform: translateX(0);
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: forwards;
  visibility: hidden;
  z-index: 1;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    visibility: hidden;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    visibility: hidden;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@media (max-width: 425px) {
.slider.main {
padding: 0;
margin: 0;
}

.slider-item {
flex-direction: column;
}

.slider-item__info {
position: initial;
padding: 1rem;
width: 100%;
height: 100%;
border: 1px solid #bbb;
box-shadow: 1px 1px 1px 1px #bbb;
}

.slider-item__image img {
width: 100vw;
height: 225px;
}
}

@media (min-width: 768px) {
.slider.main {
width: 85%;
}

.slider-item__image img {
width: 100vw;
max-height: 550px;
}
}

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *