1

Когда выбираю следующий слайд, он сначала уходит немного влево, а потом становится нормально, по центру. Как можно избавиться от такого "дёрганья"?

Если убрать variableWidth, то этот эффект исчезает, но тогда не устраивает то, как отображается слайдер.

Пример кода

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
  })
  $('#adventage_tabs_nav').slick({
    slidesToScroll: 1,
    arrows: false,
    centerMode: true,
    variableWidth: true,
    focusOnSelect: true,
    infinite: false,
    draggable: false,
  });
})
.adventage_tabs_nav{
  display: block;
}

.adventage_tabs_nav_item_wrap{
  margin: 0;
  padding: 0 40px;
}

.adventage_tabs_nav_item{
  margin: auto;
  width: 97px;
  height: 96px;
  margin-top: 42px;
  padding: 8px;
  transition: .3s;
  padding: 13px;
  background-color: rgba(207,232,252,.6);
  border-radius: 10px;
  position: relative;
}

.adventage_tabs_item{
  padding: 0 20px;
}

.adventage_tabs_nav_title{
  display: none;
}

.adventage_tabs_nav_item.active{
  background-color: rgba(207,232,252,.6);
}

.adventage_tabs_nav_item.active a{
  background-color: rgba(207,232,252,1);
}

.slick-current .adventage_tabs_nav_item{
  width: 138px;
  height: 138px;
  margin-top: 0;
}

.slick-current .adventage_tabs_nav_title{
  display: block;
}

.slick-current .adventage_tabs_nav_item{
  background-color: rgba(26,80,142,.6);
}

.slick-current .adventage_tabs_nav_item a{
  background-color: rgba(26,80,142,1);
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="adventage_tabs">
  <div class="adventage_tabs_nav" id="adventage_tabs_nav">
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_1" class="advantage_a_1">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">гарантия <br>качества</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_2" class="advantage_a_2">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">выгодные <br>цены</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_3" class="advantage_a_3">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">опытный <br>персонал</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_4" class="advantage_a_4">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">несем <br>ответственность</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_5" class="advantage_a_5">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">проекты <br>от эконом до VIP</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_6" class="advantage_a_6">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">расчет <br>по ГОСТ и СанПин</div>
    </div>
  </div>
</div>

1 ответ 1

3

Вы меняете ширину центрального слайда после анимации, после получения класса центральный слайд. А смещение сначала происходит исходя из его изначальной ширины, а потом дергается, обновляясь до новой ширины. Можно убрать дергание за счет изменения паддинга центрального слайда, тогда по мнению слайдера ширина не меняется, дергания не происходит:

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
  })
  $('#adventage_tabs_nav').slick({
    slidesToScroll: 1,
    arrows: false,
    centerMode: true,
    variableWidth: true,
    focusOnSelect: true,
    infinite: false,
    draggable: false,
  });
})
.adventage_tabs_nav{
  display: block;
}

.adventage_tabs_nav_item_wrap{
  margin: 0;
  padding: 0 40px;
}

.adventage_tabs_nav_item{
  margin: auto;
  width: 97px;
  height: 96px;
  margin-top: 42px;
  padding: 8px;
  transition: .3s;
  padding: 13px;
  background-color: rgba(207,232,252,.6);
  border-radius: 10px;
  position: relative;
}

.adventage_tabs_item{
  padding: 0 20px;
}

.adventage_tabs_nav_title{
  display: none;
}

.adventage_tabs_nav_item.active{
  background-color: rgba(207,232,252,.6);
}

.adventage_tabs_nav_item.active a{
  background-color: rgba(207,232,252,1);
}

.slick-current .adventage_tabs_nav_item{
  width: 138px;
  height: 138px;
  margin-top: 0;
}

.slick-current .adventage_tabs_nav_title{
  display: block;
}

.slick-current .adventage_tabs_nav_item{
  background-color: rgba(26,80,142,.6);
}

.slick-current .adventage_tabs_nav_item a{
  background-color: rgba(26,80,142,1);
}

.adventage_tabs_nav_item_wrap.slick-slide.slick-current.slick-center{
  padding: 0 19.5px;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="adventage_tabs">
  <div class="adventage_tabs_nav" id="adventage_tabs_nav">
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_1" class="advantage_a_1">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">гарантия <br>качества</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_2" class="advantage_a_2">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">выгодные <br>цены</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_3" class="advantage_a_3">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">опытный <br>персонал</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_4" class="advantage_a_4">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">несем <br>ответственность</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_5" class="advantage_a_5">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">проекты <br>от эконом до VIP</div>
    </div>
    <div class="adventage_tabs_nav_item_wrap">
      <div class="adventage_tabs_nav_item">
        <a href="#adventage_tab_6" class="advantage_a_6">
        </a>
      </div>
      <div class="adventage_tabs_nav_title">расчет <br>по ГОСТ и СанПин</div>
    </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.