因此,我正在为客户端构建一个滑块,其功能比我想象的要多。基本上,图像滑块是3个可以一起使用的滑块。我需要启动下一张幻灯片最右边的滑块,而不是加载的幻灯片。因此基本上在眼镜上显示的女孩显示,下一张幻灯片是卷发的女孩。最右边的滑块需要显示下一张幻灯片,而不是当前幻灯片。我要构建的内容在屏幕截图中。
在照片上滑动也应该在左侧滑动内容(这是在做的),我只需要弄清楚幻灯片的偏移量,我假设就需要onchange功能。我只需要帮助进行设置。任何建议深表感谢。以下是我的代码,或者您可以在注释中检查代码笔
$(document).ready(function(){
$('.slider-content').slick({
slidesToShow:1,
fade: true,
asNavFor:'.slider-images,.slider-images-two'
});
$('.slider-images').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-content,.slider-images-two',
centerMode: true,
focusOnSelect: true,
arrows: false,
useCss: true,
useTransform: true,
centerPadding: '0%',
infinite: true,
// cssEase: 'linear',
});
$('.slider-images-two').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-content, .slider-images',
centerMode: true,
focusOnSelect: true,
arrows: false,
useCss: false,
useTransform: false,
centerPadding: '0%',
infinite: true,
// cssEase: 'linear',
});
var currentSlideTop = $('.slider-images').slick('slickCurrentSlide');
var currentSlideBottom = $('.slider-images-two').slick('slickCurrentSlide');
console.log('top-' + currentSlideTop);
console.log('bottom-' + currentSlideBottom);
});
body { background-color: #aacccc;overflow-x: hidden; }
.slider-images .slick-active .content img{
width: 352px;
height: 440px;
}
.slider-images-two .slick-slide{
width: 320px;
height: 400px;
}
.slider-images-two .slick-slide .content img{
opacity: .6;
margin-left: auto;
}
.container-custom{
max-width: 1180px;
/*margin: 0 0 0 auto;*/
margin: auto;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<div class="container-custom" style="margin-top:6rem;">
<div class="row align-content-center">
<div class="col-lg-6">
<div class="slider-contents-left">
<div class="slider-content">
<div>Host allowed me to see more of the country while working1</div>
<div>I love matching people to the new exciting role they deserve2</div>
<div>Host allowed me to see more of the country while working3.</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="slider-contents-right">
<div class="slider-images">
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="slider-images-two">
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
<div>
<div class="content">
<img class="slider-image" src="https://www.fillmurray.com/640/600">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
我想完成的事情