슬릭슬라이드 질문드립니다.
이름없음55
2년 전
조회 2,442
안녕하세요??
슬릭슬라이드 질문드립니다.
화살표로는 빅슬라이드것만 움직일때 제어하고
small 슬라이드를 클릭했을때 big슬라이드 위에것도 바뀌게 하고싶고
스몰슬라이드는 화살표했을땐 스몰만 움직이고 빅슬라이드는 가만히있게하고싶은데
이거 혹시 슬릭으로도 가능한가요??
</p>
<p><link rel="stylesheet" type="text/css" href="<a href="https://kenwheeler.github.io/slick/slick/slick.css"" target="_blank" rel="noopener noreferrer">https://kenwheeler.github.io/slick/slick/slick.css"</a> /></p>
<p><script src="<a href="https://code.jquery.com/jquery-1.11.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.11.0.min.js"></script></a>
<script src="<a href="https://kenwheeler.github.io/slick/slick/slick.js"></script>" target="_blank" rel="noopener noreferrer">https://kenwheeler.github.io/slick/slick/slick.js"></script></a>
</p>
<p><style>
#wrap {margin: 100px auto; width: 1400px;}
.big_slider {height: 500px;}
.big_slider .list {width: 1000px; height: 500px;}
.red {background: red;}
.blue {background: blue;}
.yellow {background: yellow;}
.green {background: green;}
.black {background: black;}
.brown {background: #ccc;}
.black {background: #000;}
.white {background: #fff; border: 1px solid #000;}</p>
<p>
.small_slider .list {width: 250px; height: 250px; margin-top: 50px;}
</style> </p>
<p><div id="wrap">
<div class="big_slider">
<div class="list red"></div>
<div class="list blue"></div>
<div class="list yellow"></div>
<div class="list green"></div>
<div class="list black"></div>
<div class="list brown"></div>
<div class="list white"></div>
<div class="list red"></div>
<div class="list blue"></div>
<div class="list yellow"></div>
<div class="list green"></div>
<div class="list black"></div>
<div class="list brown"></div>
<div class="list white"></div>
</div>
<div class="small_slider">
<div class="list red"></div>
<div class="list blue"></div>
<div class="list yellow"></div>
<div class="list green"></div>
<div class="list black"></div>
<div class="list brown"></div>
<div class="list white"></div>
<div class="list red"></div>
<div class="list blue"></div>
<div class="list yellow"></div>
<div class="list green"></div>
<div class="list black"></div>
<div class="list brown"></div>
<div class="list white"></div>
</div>
</div></p>
<p><script>
$(document).ready(function() {
$('.big_slider').slick({
slidesToShow: 1,
asNavFor: '.small_slider',
});
$('.small_slider').slick({
slidesToShow: 6,
//asNavFor: '.big_slider',
slidesToScroll: 6,
focusOnSelect: true,
});
});
</script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인