0

Использую на странице два слайдера 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>

2
  • Надо код фрагментом прикреплять
    – Alex78191
    2 июн 2017 в 7:53
  • сделал фрагментом, есть ли идеи, как сделать слайдер?
    – word
    2 июн 2017 в 8:12

2 ответа 2

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>

3
  • Но проблема в том, что при смене класса active, второй слайдер остаётся не видимым, т.е. класс slick-track имеет width: 0px... ща 2 июн 2017 в 9:05
  • если нажать на кнопку, тогда слайды второго слайдера наложены друг на друга.
    – word
    2 июн 2017 в 9:15
  • v.children[0].slick.setPosition(); - DOM элемент. $(v.children[0]).slick('setPosition'); - jQuery объект, вроде работает 2 июн 2017 в 9:23
0

Можно скрывать слайдер с сохранением ширины при помощи position:absolute

$('.tab-slider').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    dots: true
});
$('.btn').click(function(){
  $('.wrapper').toggleClass('hidden');
})
.tab-content{
  position:relative;
  overflow:hidden;
}
.wrapper.hidden{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:-1;
  opacity:0;
}
.slick-slide{
  height:50px;
  line-height:50px;
  text-align:center;
  font-weight:bold;
  background-color:#cda;
  box-sizing:border-box;
  border:1px dotted;
}
.cars .slick-slide{
  background-color:#acd;
}
<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">

<div class="tab-content">
  <div class="wrapper">
    <div class="tab-slider electro">
      <div>slide1</div>
      <div>slide2</div>
      <div>slide3</div>
      <div>slide4</div>
      <div>slide5</div>
    </div>
   </div>
   <div class="wrapper hidden">
    <div class="tab-slider cars">
      <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.