因此，我正在为客户端构建一个滑块，其功能比我想象的要多。基本上，图像滑块是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,.slider-images',useCss: false,useTransform: false,});
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>
我想完成的事情
