Подскажите, что я не так делаю?
На первом ТАБе слайдер работает нормально, а на остальных не работает пока не сделаешь скрол влево или вправо, после чего происходит инициализация слайдера и он работает.
$('.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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Каким образом можно настроить картинку для репоста в соц сеть? Нужно сделать так что бы все репосты имели одну и ту же картинку, отличную от логотипа,...
Каким образом можно построить график, по типу подобный графику в диспетчере задач Windows?