테스트 사이트 - 개발 중인 베타 버전입니다

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

이름없음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개

간디야놀자

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

이름없음55
2년 전
답변 감사드립니다 영역을 나눈다는게 혹시 어떤의미인지 알 수 있을까요..?? 지금 영역 나눠져 있지않아요??

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인