슬릭슬라이드 질문드립니다.

슬릭슬라이드 질문드립니다.

QA

슬릭슬라이드 질문드립니다.

답변 1

본문

안녕하세요??

슬릭슬라이드 질문드립니다.

화살표로는 빅슬라이드것만 움직일때 제어하고

small 슬라이드를 클릭했을때 big슬라이드 위에것도 바뀌게 하고싶고

스몰슬라이드는 화살표했을땐 스몰만 움직이고 빅슬라이드는 가만히있게하고싶은데

이거 혹시 슬릭으로도 가능한가요??

 


<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
  
<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;}
    
    .small_slider .list {width: 250px; height: 250px; margin-top: 50px;}
</style>    
<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>
<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>

이 질문에 댓글 쓰기 :

답변 1

빅슬라이드랑 스몰슬라이드 영역을 나누시면 될거 같습니다.

비교적 어려운 작업은 아닐 듯 하고 영역만 분리한다면 작동을 따로 할 수 있게 되겠네요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 44
© SIRSOFT
현재 페이지 제일 처음으로