Slick слайдер / Движение от края к краю

124

02 января 2020, 01:30

возникла такая задачка, имеется слайдер 100% ширины,имеется slick.js,задачка в том, что слайдер изначально показывает 2 слайда с левой стороны экрана, снизу будут соответственно стрелки,нужно чтобы при переключении слайда, он ехал вправо и слайды не пропадали, т.е чтобы доходил от края до края и тд.

Пробовал задать контейнеру со слайдами ширину 50% а у обертки слайдера убрать overflow, результата не дало((

Answer 1

Если Вам надо, чтобы два слайда просто "гуляли" туда-сюда от края до края, то сделать это можно так: добавляете несколько дополнительных слайдов-заглушек, которые не будут видны (visibility: hidden), ставите rtl: true и infinite: false

$('.slider').slick({ 
  infinite: false, 
  rtl: true, 
  speed: 300, 
  slidesToShow: 5, 
  slidesToScroll: 1 
});

body { 
  background-color: silver; 
} 
.slider { 
  border: 1px solid black; 
  width: 90%; 
  margin: 25px auto; 
} 
.slider h3 { 
  border: 1px solid red; 
  text-align: center; 
  margin: 15px; 
} 
.hidden { 
  visibility: hidden; 
}

<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/slick-carousel@1.8.1/slick/slick.css" /> 
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"> 
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
 
<div class="slider"> 
  <div> 
    <h3>1</h3> 
  </div> 
  <div> 
    <h3>2</h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
</div>

Если же Вам надо, чтобы после двух видимых слайдов из-за края экрана выезжали ещё несколько, то без дополнительных "костылей" это можно сделать только справа налево: т.е. изначально два слайда будут показываться справа и потянут за собой к левому краю ещё несколько штук

$('.slider').slick({ 
  infinite: false, 
  rtl: false, 
  speed: 300, 
  slidesToShow: 5, 
  slidesToScroll: 1 
});

body { 
  background-color: silver; 
} 
.slider { 
  border: 1px solid black; 
  width: 90%; 
  margin: 25px auto; 
} 
.slider h3 { 
  border: 1px solid red; 
  text-align: center; 
  margin: 15px; 
} 
.hidden { 
  visibility: hidden; 
}

<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/slick-carousel@1.8.1/slick/slick.css" /> 
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"> 
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
 
<div class="slider"> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div class="hidden"> 
    <h3></h3> 
  </div> 
  <div> 
    <h3>1</h3> 
  </div> 
  <div> 
    <h3>2</h3> 
  </div> 
  <div> 
    <h3>3</h3> 
  </div> 
  <div> 
    <h3>4</h3> 
  </div> 
  <div> 
    <h3>5</h3> 
  </div> 
</div>