Два слайдера slick, один скрыт

426

04 июня 2017, 20:12

Использую на странице два слайдера slick, один из которых имеет css-класс .active, второй без этого класса. Слайдер без класса active должен быть скрыт с помощью display none. При нажатии на кнопку, классы active должны меняться у этих слайдеров. Но проблема в том, что при смене класса active, второй слайдер остаётся не видимым, т.е. класс slick-track имеет width: 0px, которые устанавливает сам слайдер.
Подскажите, как правильно инициализировать два слайдера, чтобы по нажатию на кнопку скрывать один из слайдеров и второй был виден?

https://jsfiddle.net/8qLfgme0/

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <script 
            src="https://code.jquery.com/jquery-2.2.4.min.js" 
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
            crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"> 
    <style> 
    .wrap{ 
        display: none; 
    } 
    .wrap.active{ 
        display: block; 
    } 
    </style> 
</head> 
<body> 
 
    <div class="tab-content"> 
        <div class="wrap active"  data-tab="cars"> 
            <div class="tab-slider cars"> 
                <div>slide1</div> 
                <div>slide2</div> 
                <div>slide3</div> 
                <div>slide4</div> 
                <div>slide5</div> 
            </div> 
        </div> 
        <div class="wrap"  data-tab="electro"> 
            <div class="tab-slider electro"> 
                <div>slide1</div> 
                <div>slide2</div> 
            </div> 
        </div> 
    </div> 
    <button class="btn">click</button> 
 
<script> 
    $(function(){ 
 
    $('.tab-slider').slick({ 
        infinite: true, 
        slidesToShow: 2, 
        slidesToScroll: 1, 
        dots: true 
    }); 
 
    $('.btn').on('click', function(e){ 
        var $tabContent = $('.tab-content'), 
            $active = $tabContent.find('.wrap.active'), 
            $wrap = $tabContent.find('.wrap'); 
        $wrap.toggleClass('active'); 
    }) 
 
    }) 
</script> 
 
</body> 
</html>

Answer 1

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <script 
            src="https://code.jquery.com/jquery-2.2.4.min.js" 
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
            crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"> 
    <style> 
    .wrap{ 
        display: none; 
    } 
    .wrap.active{ 
        display: block; 
    } 
    </style> 
</head> 
<body> 
 
    <div class="tab-content"> 
        <div class="wrap active" data-show="true" data-tab="cars"> 
            <div class="tab-slider cars"> 
                <div>slide1</div> 
                <div>slide2</div> 
                <div>slide3</div> 
                <div>slide4</div> 
                <div>slide5</div> 
            </div> 
        </div> 
        <div class="wrap" data-show="false" data-tab="electro"> 
            <div class="tab-slider electro"> 
                <div>img1</div> 
                <div>img2</div> 
                <div>img3</div> 
                <div>img4</div> 
                <div>img5</div> 
                <div>img6</div> 
            </div> 
        </div> 
    </div> 
    <button class="btn">click</button> 
 
<script> 
;(function (slider, button){ 
   slider.slick({ 
      infinite: true, 
      slidesToShow: 2, 
      slidesToScroll: 1, 
      dots: true 
   }); 
 
   var content = $('.tab-content'); 
 
   content.find('[data-show="true"]').addClass('active'); 
 
   button.on('click', function () { 
      content.find('[data-show]').each(function(i, v){ 
         v.dataset.show =  v.dataset.show !== 'true'; 
         if (v.dataset.show === 'true') { 
            v.classList.add("active"); 
            v.children[0].slick.setPosition(); 
         } 
         else 
            v.classList.remove("active"); 
      }); 
   }); 
})($('.tab-slider'), $('.btn')); 
</script> 
 
</body> 
</html>