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

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

QA

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

본문

안녕하세요??

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

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

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 44
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT