Slick 旋转木马幻灯片效果

Slick 是一个用于创建轮播滑块的 JavaScript 库。灵活的 jQuery 插件有助于在 HTML 中构建图像轮播滑块。Slick 轮播滑块的主要优点是在网页上使用用户友好的界面在同一位置显示多个图像。

通常，图像在轮播滑块中以固定分辨率显示。如果想让用户以大尺寸查看图像，灯箱功能就非常有用。借助灯箱功能，单击滑动滑块中的图像时，会出现带有图像滑块的弹出窗口。

在示例代码片段中，我们将使用 jQuery 将 slick lightbox 插件集成到 slick carousel 滑块中。

最初，图像将通过 slick 插件显示在轮播滑块中。
单击图像时，将出现一个灯箱弹出窗口，并以大视图显示所选图像。
在弹出窗口中，下一个/上一个导航链接将可用，以便从灯箱访问滑块。

HTML 代码：

<div class="product-slider">
<div class="slide">
<img src="images/car-img-1.jpg" data-src="images/car-img-1.jpg" alt="" />
<h6>Product 1</h6>
</div>
<div class="slide">
<img src="images/car-img-2.jpg" data-src="images/car-img-2.jpg" alt="" />
<h6>Product 2</h6>
</div>
<div class="slide">
<img src="images/car-img-3.jpg" data-src="images/car-img-3.jpg" alt="" />
<h6>Product 3</h6>
</div>
<div class="slide">
<img src="images/car-img-4.jpg" data-src="images/car-img-4.jpg" alt="" />
<h6>Product 4</h6>
</div>
<div class="slide">
<img src="images/car-img-5.jpg" data-src="images/car-img-5.jpg" alt="" />
<h6>Product 5</h6>
</div>
</div>

jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Slick 滑块库:

<!-- Slick slider CSS library files -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<!-- Slick slider JS library file -->
<script type="text/javascript" src="slick/slick.min.js"></script>

Slick灯箱库：

<!-- Slick Lightbox CSS library files -->
<link rel="stylesheet" type="text/css" href="slick-lightbox/slick-lightbox.css"/>

<!-- Slick Lightbox JS library file -->
<script type="text/javascript" src="slick-lightbox/slick-lightbox.min.js"></script>

JavaScript 代码：

$(document).ready(function(){
$('.product-slider').each(function() {
var slider = $(this);
slider.slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: true,
});

var sLightbox = $(this);
sLightbox.slickLightbox({
src: 'data-src',
itemSelector: '.slick-slide > img',
imageMaxHeight: 1
});
});
});

CSS代码：

.product-slider{
width: 350px;
margin: auto;
background-color: #edeeef;
color: #000;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.slide h6{
font-size: 20px;
margin: 0;
padding-top: 10px;
text-align: center;
}

/* Slick slider custom styles */
.product-slider .slick-slide {
height:290px !important;
}
.product-slider .slick-slide img {
height: 250px !important;
object-fit: cover;
}
.slick-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0;
height: 40px;
width: 40px;
background-color: rgba(0,0,0,0.6);
border-radius: 10px;
cursor: pointer;
background-size: 20px;
z-index: 1;
background-repeat: no-repeat;
background-position: center;
}
.slick-arrow.slick-prev {
left: 10px;
}
.slick-arrow.slick-next {
right: 10px;
}
.slick-prev:hover, .slick-next:hover {
background-color: rgba(0,0,0,0.3);
}
.slick-prev:focus, .slick-next:focus {
background-color: rgba(0,0,0,0.6);
}