光滑的滑块onChange

时间:2019-11-05 03:01:58

标签: jquery html slick.js

因此,我正在为客户端构建一个滑块,其功能比我想象的要多。基本上,图像滑块是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>

我想完成的事情

enter image description here

0 个答案:

没有答案