slick с постоянным слайдом

124

18 апреля 2021, 18:30

Есть вот такой слайдер:

Сделан на slick slider, переключаются они затуханием. Суть в том что нужно менять только первые 3 колонки, а 4 должна быть статичной. Объясните мне логику как это сделать. И ещё 4 блок должен затухать со всеми колонками.

PS Код писать не обязательно, просто объясните логику.

Answer 1

А просто рядом расположить можно ?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 
    <style> 
      .slider{ 
      	width:600px; 
      	height:400px; 
      	overflow: hidden; 
      } 
      .slider .item{ 
      	min-width:200px; 
      	max-width: 200px; 
      	height: 400px; 
      	background: lightblue; 
      	outline: 1px solid; 
      	margin-right: 4px; 
      } 
 
      .main{ 
      	display: flex; 
      	width: 1000px; 
      	margin: 30px auto; 
      } 
 
      .main > .price{ 
      	width:200px; 
      	height: 400px; 
      	background: lightblue; 
      	margin-left: 4px; 
      } 
    </style> 
</head> 
<body> 
 
<div class="main"> 
	<div class="slider"> 
		<div class="item">1</div> 
		<div class="item">2</div> 
		<div class="item">3</div> 
		<div class="item">4</div> 
		<div class="item">5</div> 
	</div> 
	<div class="price"> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste optio at, quisquam dolore esse consequuntur tempora placeat, voluptas. Asperiores, tempora. 
	</div> 
</div> 
 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<script> 
$('.slider').slick({ 
  autoplay: true, 
  slidesToShow: 3, 
  slidesToScroll: 2, 
  arrows: false, 
  pauseOnHover: true, 
  infinite: true, 
  autoplaySpeed: 1000 
});	 
</script> 
</body> 
</html>