БЛОГ НА HUSL


Плавная анимация для пагинации slick js

Автор вопроса: Вадим

Как можно сделать более плавную анимация для переключения пагинации. На данный момент сделал так. Сама пагинация немного дергается и переходы слишком резкие.

$(document).ready(function(){
    //инициализируем слайдер
    $('.my-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false
        
  });
    var dots = $('.my-slider li');
    //вешаем обработчик на наши точки
    dots.click(function(){
        var $this = $(this);
        dots.removeClass('before after');
        //отображаем 2 предыдущие точки
        $this
            .prev().addClass('before')
            .prev().addClass('before');
        //отображаем 2 следующие точки
        $this
            .next().addClass('after')
            .next().addClass('after');

    
      //если мы в самом начале - добавляем пару последующих точек
        if(!$this.prev().length) {
        $this.next().next().next()
            .addClass('after').next()
              .addClass('after');
    }
        //на 2й позиции - добавляем одну точку
      if(!$this.prev().prev().length) {
        $this.next().next().next()
          .addClass('after');
    }
        //в самом конце - добавляем пару доп. предыдущих точек
        if(!$this.next().length) {
            $this.prev().prev().prev()
                .addClass('before').prev()
                .addClass('before');
        }
        //предпоследний элемента - добавляем одну пред. точку
        if(!$this.next().next().length) {
            $this.prev().prev().prev()
                .addClass('before');
        }   
    });
    dots.eq(0).click();//кликаем на первую точку
});
.my-slider {
    width: 300px;
    margin: 50px auto;
    position: relative;
}

.slide {
  box-shadow: 0 0 3px 0 blue inset;
    border-radius: 12px;
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    outline: none;
    line-height: 100px;
    text-align: center;
    font-size: 24px;
    font-family: Sans-serif;
    text-transform: uppercase;
}

.slick-dots {
    margin: 20px 0 0 0;
    padding: 0;
    text-align: center;
}

.slick-dots li {
    display: none;
    height: 30px;
    width: 30px;
    margin: 5px;
    box-shadow: 0 0 0 1px orange;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}

.slick-dots li button {
  height: inherit;
    width: inherit;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.slick-dots li.slick-active {
  display: inline-block;
    box-shadow: 0 0 10px 1px orange;
}

.slick-dots li.before,
.slick-dots li.after {
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>  
  <meta charset="utf-8">
  <title>JS Bin</title>
    <link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
</head>
<body>
  <div class="my-slider">
    <div class="slide">slide1</div>
    <div class="slide">slide2</div>
    <div class="slide">slide3</div>
    <div class="slide">slide4</div>
    <div class="slide">slide5</div>
    <div class="slide">slide6</div>
    <div class="slide">slide7</div>
    <div class="slide">slide8</div>
    <div class="slide">slide9</div>
    <div class="slide">slide10</div>
  </div>
    <script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

</body>
</html>


Источник

Ответы (1 шт):

Автор решения: Aziz Umarov

Столько пойдет? если нужно меньше можно поэкспериментировать со speed: 10000

$(document).ready(function(){
    //инициализируем слайдер
    $('.my-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    speed: 10000,
    arrows: false
        
  });
    var dots = $('.my-slider li');
    //вешаем обработчик на наши точки
    dots.click(function(){
        var $this = $(this);
        dots.removeClass('before after');
        //отображаем 2 предыдущие точки
        $this
            .prev().addClass('before')
            .prev().addClass('before');
        //отображаем 2 следующие точки
        $this
            .next().addClass('after')
            .next().addClass('after');

    
      //если мы в самом начале - добавляем пару последующих точек
        if(!$this.prev().length) {
        $this.next().next().next()
            .addClass('after').next()
              .addClass('after');
    }
        //на 2й позиции - добавляем одну точку
      if(!$this.prev().prev().length) {
        $this.next().next().next()
          .addClass('after');
    }
        //в самом конце - добавляем пару доп. предыдущих точек
        if(!$this.next().length) {
            $this.prev().prev().prev()
                .addClass('before').prev()
                .addClass('before');
        }
        //предпоследний элемента - добавляем одну пред. точку
        if(!$this.next().next().length) {
            $this.prev().prev().prev()
                .addClass('before');
        }   
    });
    dots.eq(0).click();//кликаем на первую точку
});
.my-slider {
    width: 300px;
    margin: 50px auto;
    position: relative;
}

.slide {
  box-shadow: 0 0 3px 0 blue inset;
    border-radius: 12px;
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    outline: none;
    line-height: 100px;
    text-align: center;
    font-size: 24px;
    font-family: Sans-serif;
    text-transform: uppercase;
}

.slick-dots {
    margin: 20px 0 0 0;
    padding: 0;
    text-align: center;
}

.slick-dots li {
    display: none;
    height: 30px;
    width: 30px;
    margin: 5px;
    box-shadow: 0 0 0 1px orange;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}

.slick-dots li button {
  height: inherit;
    width: inherit;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.slick-dots li.slick-active {
  display: inline-block;
    box-shadow: 0 0 10px 1px orange;
}

.slick-dots li.before,
.slick-dots li.after {
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>  
  <meta charset="utf-8">
  <title>JS Bin</title>
    <link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
</head>
<body>
  <div class="my-slider">
    <div class="slide">slide1</div>
    <div class="slide">slide2</div>
    <div class="slide">slide3</div>
    <div class="slide">slide4</div>
    <div class="slide">slide5</div>
    <div class="slide">slide6</div>
    <div class="slide">slide7</div>
    <div class="slide">slide8</div>
    <div class="slide">slide9</div>
    <div class="slide">slide10</div>
  </div>
    <script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.