slick 同步+圖片大小不一
========================
###### tags: `JS套件`
```
<head>
<!-- slick -->
<link rel="stylesheet" type="text/css" href="libs/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="libs/slick/slick-theme.css" />
</head>
<body>
<style>
.slider_syncing {
margin-bottom: 60px;
}
.slider_syncing .slider_for {
margin-bottom: 30px;
}
.slider_syncing .slider_for .slider_img_box {
width: 100%;
overflow: hidden;
}
.slider_syncing .slider_for img {
height: 600px;
max-width: 100%;
margin: 0 auto;
}
.slider_syncing .slider_for .slick-prev, .slider_syncing .slider_for .slick-next {
width: 30px;
height: 45px;
opacity: 1;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
}
.slider_syncing .slider_for .slick-prev::before, .slider_syncing .slider_for .slick-next::before {
content: "";
color: rgba(0, 0, 0, 0);
width: 30px;
height: 45px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1;
}
.slider_syncing .slider_for .slick-prev:hover, .slider_syncing .slider_for .slick-next:hover {
background-color: rgba(85, 85, 85, 0.3);
}
.slider_syncing .slider_for .slick-prev {
left: 0px;
z-index: 10;
}
.slider_syncing .slider_for .slick-prev::before {
background: center/contain no-repeat url(../img/icon/ar_white_l.png);
}
.slider_syncing .slider_for .slick-next {
right: 0px;
}
.slider_syncing .slider_for .slick-next::before {
background: center/contain no-repeat url(../img/icon/ar_white_r.png);
}
.slider_syncing .slider_nav {
padding: 0 20px;
}
.slider_syncing .slider_nav .slider_img_box {
padding: 0 10px;
}
.slider_syncing .slider_nav img {
height: 100px;
}
.slider_syncing .slider_nav .slick-prev, .slider_syncing .slider_nav .slick-next {
width: 30px;
height: 45px;
border-radius: 4px;
}
.slider_syncing .slider_nav .slick-prev::before, .slider_syncing .slider_nav .slick-next::before {
content: "";
color: rgba(0, 0, 0, 0);
width: 30px;
height: 45px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.slider_syncing .slider_nav .slick-prev:hover, .slider_syncing .slider_nav .slick-next:hover {
background-color: rgba(85, 85, 85, 0.1);
}
.slider_syncing .slider_nav .slick-prev {
left: -10px;
}
.slider_syncing .slider_nav .slick-prev::before {
background: center/contain no-repeat url(../img/icon/ar_left.png);
}
.slider_syncing .slider_nav .slick-next {
right: -10px;
}
.slider_syncing .slider_nav .slick-next::before {
background: center/contain no-repeat url(../img/icon/ar_right.png);
}
@media (max-width: 991.98px) {
.slider_syncing .slider_for {
margin-bottom: 20px;
}
.slider_syncing .slider_for img {
height: 250px;
max-width: 100%;
margin: 0 auto;
-o-object-fit: contain;
object-fit: contain;
}
.slider_syncing .slider_nav img {
height: 50px;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.slider_syncing .slider_nav .slider_img_box {
padding: 0 5px;
}
.slider_syncing .slider_nav img {
height: 70px;
}
}
</style>
<div class="slider_syncing">
<div class="slider_for">
<div class="slider_img_box">
<img src="https://fakeimg.pl/300/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/900/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/400x800/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
</div>
<div class="slider_nav">
<div class="slider_img_box" style="height: 100%;">
<img src="https://fakeimg.pl/300/">
</div>
<div class="slider_img_box" style="height: 100%;">
<img src="https://fakeimg.pl/900/">
</div>
<div class="slider_img_box" style="height: 100%;">
<img src="https://fakeimg.pl/400x800/">
</div>
<div class="slider_img_box" style="height: 100%;">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
<div class="slider_img_box">
<img src="https://fakeimg.pl/950x633/">
</div>
</div>
</div>
<!-- slider -->
<script src="libs/slick/slick.js"></script>
<script>
$('.slider_for').slick({
// infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider_nav',
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
responsive: [{
breakpoint: 768,
settings: {
arrows: true,
}
}]
});
$('.slider_nav').slick({
// infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider_for',
arrows: true,
dots: false,
centerMode: true,
focusOnSelect: true,
variableWidth: true,
responsive: [{
breakpoint: 576,
settings: {
variableWidth: false,
}
}]
});
</script>
</body>
Sign in with Wallet
Connect another wallet