2

Товарищи, кто знает легальные способы центрирования слайдов в slick?
Имеем слайдер навигации с превьюшками изображений. Ширина слайдов произвольная. Хочу, чтобы они располагались по центру, а по факту они с центра начинается.

$("#main").slick({});

$("#slider").slick({    
  centerMode: true,
  variableWidth: true,
  focusOnSelect: true,
  infinite: false,
  asNavFor: "#main",
});
#main {
  font-size: 32px;    
}

#slider {
  border: 2px solid red;
  padding: 10px 0;
}

.slide {     
   border:1px solid #c0c0c0;
   margin: 0 4px;
   text-align: center;
}

.middle {
   width: 50%;
   background: red;
   height: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div id="main">
  <div class="slide">1</div>
  <div class="slide">2wide</div>
  <div class="slide">3</div>
</div>

<div id="slider">
  <div class="slide">1</div>
  <div class="slide">2wide</div>
  <div class="slide">3</div>
</div>

<div>
  <div class="middle"></div>
</div>

Пример

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

14
  • С какой целью вы используете centerMode? Чтобы стилизовать отдельно центральный слайд?
    – Get-Web
    18 дек 2019 в 12:39
  • @Get-Web ни с какой. нашел в документации хоть что-то похожее, но не то. включен centerModeили не не важно. важно получить нормальный вид слайдера.
    – teran
    18 дек 2019 в 12:41
  • Так нормальный слайдер будет без centerMode, centerMode полезен когда нужно выделить именно центральный слайд или реализовать что бы крайние слайдеры прятались к примеру на половину
    – Get-Web
    18 дек 2019 в 12:47
  • @Get-Web не будет нормальный, будут все слайды слева,а не по центру. счас дополню пример, не совсем корректно сейчас, ибо нет asNavFor
    – teran
    18 дек 2019 в 12:48
  • вот готовый пример. codepen.io/get-web/pen/ZNrxvx при любом количестве слайдов они центрируются
    – Get-Web
    18 дек 2019 в 12:53

1 ответ 1

1

Оно (не оч понял ворос :)?

$("#slider").slick({    
  centerMode: true,
  variableWidth: true,
  infinite: false,
  
});
#slider {
  border: 2px solid red;
  padding: 10px 0;
}
.slide {     
   margin: 0 4px;
   text-align: center;
}
.middle {
   width: 50%;
   background: red;
   height: 5px;
}

.slide-slide{
  border:1px solid #c0c0c0;
  float:left;
  margin: 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div id="slider">
  <div class="slide">
    <div class="slide-slide">1</div>
    <div class="slide-slide">2wide</div>
    <div class="slide-slide">3</div>
  </div> 
  <div class="slide">
    <div class="slide-slide">1</div>
    <div class="slide-slide">2wide</div>
    <div class="slide-slide">3</div>
  </div> 
  <div class="slide">
    <div class="slide-slide">1</div>
    <div class="slide-slide">2wide</div>
    <div class="slide-slide">3</div>
  </div> 
</div>

<div>
  <div class="middle"></div>
</div>

1
  • нет. у меня уже есть три слайда, не надо их было дублировать и оборачивать еще в слайды. под слайдером отмечена середина. сейчас все слайды располагаются справа от нее.
    – teran
    18 дек 2019 в 11:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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