Ломается слайдер (Slick + Tabs)

315
27 апреля 2017, 13:15

Подскажите, что я не так делаю?

На первом ТАБе слайдер работает нормально, а на остальных не работает пока не сделаешь скрол влево или вправо, после чего происходит инициализация слайдера и он работает.

$('.tab-content.current').slick({ 
  infinite: true, 
  slidesToShow: 5, 
  slidesToScroll: 5, 
  dots: true 
}); 
 
$('ul.tabs li').click(function(){ 
  var tab_id = $(this).attr('data-tab'); 
 
  $('ul.tabs li').removeClass('current'); 
  $('.tab-content').removeClass('current'); 
 
  $(this).addClass('current'); 
  $("#"+tab_id).addClass('current').slick({ 
    infinite: true, 
    slidesToShow: 5, 
    slidesToScroll: 5, 
    dots: true 
  }); 
})
.container .row ul { 
  list-style-type: none; 
  margin-left: 0; 
  -webkit-padding-start: 8px; 
} 
 
.container .row li { 
  display: inline-block; 
  padding: 0 10px; 
  font-size: 16px; 
  font-weight: 700; 
  -webkit-transition: 0.3s all ease; 
  -moz-transition: 0.3s all ease; 
  -ms-transition: 0.3s all ease; 
  -o-transition: 0.3s all ease; 
  transition: 0.3s all ease; 
} 
 
.container .row li.current { 
  color: #000; 
  border-bottom: 2px solid #000; 
} 
 
.item { 
  display: block; 
  width: 20%; 
  float: left; 
  padding-left: 8px; 
  padding-right: 8px; 
} 
 
.item img { 
  width: 100%; 
  height: auto; 
} 
 
.tab-content { 
  display: none; 
} 
 
.tab-content.current { 
  display: block; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.min.js"></script> 
<div class="container"> 
  <div class="row"> 
    <ul class="tabs"> 
      <li class="tab-link current" data-tab="tabs-1">Tab 1</li> 
      <li class="tab-link" data-tab="tabs-2">Tab 2</li> 
      <li class="tab-link" data-tab="tabs-3">Tab 3</li> 
      <li class="tab-link" data-tab="tabs-4">Tab 4</li> 
      <li class="tab-link" data-tab="tabs-5">Tab 5</li> 
    </ul> 
    <div id="tabs-1" class="tab-content current"> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 1</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 2</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 3</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 4</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 5</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 6</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 7</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 8</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 9</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 1, Tab 0</h6> 
      </div> 
    </div> 
    <div id="tabs-2" class="tab-content"> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 1</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 2</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 3</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 4</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 5</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 6</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 7</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 8</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 9</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 2, Tab 0</h6> 
      </div> 
    </div> 
    <div id="tabs-3" class="tab-content"> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 1</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 2</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 3</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 4</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 5</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 6</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 7</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 8</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 9</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 3, Tab 0</h6> 
      </div> 
    </div> 
    <div id="tabs-4" class="tab-content"> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 1</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 2</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 3</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 4</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 5</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 6</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 7</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 8</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 9</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 4, Tab 0</h6> 
      </div> 
    </div> 
    <div id="tabs-5" class="tab-content"> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 1</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 2</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 3</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 4</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 5</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 6</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 7</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 8</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 9</h6> 
      </div> 
      <div class="item"> 
        <img src="https://dummyimage.com/400x400/ccc/fff.jpg" alt=""> 
        <h6>Section 5, Tab 0</h6> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Настройка репостов с сайта в соц сети

Настройка репостов с сайта в соц сети

Каким образом можно настроить картинку для репоста в соц сеть? Нужно сделать так что бы все репосты имели одну и ту же картинку, отличную от логотипа,...

231
margin auto не работает

margin auto не работает

Почему блок "MAKESHOPPRO И CS-CART" на странице makeshop

282
Построение графика в WPF

Построение графика в WPF

Каким образом можно построить график, по типу подобный графику в диспетчере задач Windows?

333