I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Related
I want to hide all the contents except the center one.
Take above image as example, only "Content 1" is showing, the rest are hidden. But the images are still showing.
When click to 2nd image, "Content 2" will show instead and hide "Content 1".
I try to use jquery find "slick-center" class and remove the hidden content, but it's not working. Hoping that some of you could provide me with some advice. Thank you!
$('.slick-wrap').on('init', function(event, slick){
var dots = $( '.slick-dots li' );
dots.each( function( k, v){
$(this).find( 'button' ).addClass( 'heading'+ k );
});
var items = slick.$slides;
items.each( function( k, v){
var text = $(this).find( 'h2' ).text();
$( '.heading' + k ).text(text);
});
});
$('.slick-wrap').slick({
dots: true,
focusOnSelect: true,
infinite: true,
arrows: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
centerMode: true,
centerPadding: '30px',
responsive: {
600: {
items: 2
}
}
});
if ($('.slick-item').hasClass("slick-center")){
$('div').removeClass( "cont-hide" );
}
.slick-section{
padding: 25px;
text-align: center;
}
.slick-container{
width: 100%;
margin: 0 auto;
}
.slick-wrap{
margin: 0 -10px;
}
.slick-item{
padding: 0 10px;
}
h2{
display:none;
}
.slick-dots {
list-style-type: none;
margin: 25px 0 0;
padding: 0;
}
.slick-dots li {
width: auto;
height: auto;
display: inline-block;
padding: 0 5px;
}
button{
width: auto;
height: auto;
padding: 10px;
font-size: 12px;
color: #666;
border: none;
background: #f0f0f0;
}
.slick-active button{
background: #ccc;
}
.cont-hide{
display:none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<section class="slick-section">
<div class="slick-container">
<div class="slick-wrap">
<div class="slick-item">
<h2>Image 1</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 1</div>
</div>
<div class="slick-item">
<h2>Image 2</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 2</div>
</div>
<div class="slick-item">
<h2>Image 3</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 3</div>
</div>
<div class="slick-item">
<h2>Image 4</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 4</div>
</div>
<div class="slick-item">
<h2 class="cont-hide">Image 5</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 5</div>
</div>
<div class="slick-item">
<h2>Image 6</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 6</div>
</div>
</div>
</div>
</section>
Solved the issue by myself and here is the answer. If you have the better one, please suggest, thank you :)
//display first item
$('.slick-wrap').on('init', function(event, slick){
var carouselTexts = $(".slick-item .cont-hide");
var idx = $(event.target).find('.slick-list .slick-center').index();
carouselTexts.eq(idx).css('visibility', 'visible');
});
//remove and display clicked items
$('.slick-item').on('click', function() {
var carouselTexts = $(".slick-item .cont-hide");
var clickedNum = $(".slick-slide").index(this);
carouselTexts.not(clickedNum).css('display', 'none')
carouselTexts.eq(clickedNum).css('display', 'initial');
});
How to create the following tabs using javascript/jquery?
I have attempted to make this using slick.js but every time I swipe the tabs, slick registers it as a click and loads the content of the tab I just touched. How can I eliminate this?
$(function() {
'use strict';
$('.pageFoot').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.pageContent',
arrows: false,
infinite: false,
focusOnSelect: true,
centerMode: true,
swipeToSlide: true,
touchThreshold: 10,
});
$('.pageContent').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.pageFoot',
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
});
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 10vh 90vh;
}
.pageFoot {
height: 10vh;
width: 100vw;
}
.pageFootItem {
height: 10vh!important;
}
.pageContent,
.pageContentItem {
height: 90vh!important;
width: 100vw;
}
.pageFootItem.slick-current {
box-shadow: inset 0 -5px aqua;
color: aqua;
}
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="pageFoot">
<div class='pageFootItem'>Intro</div>
<div class='pageFootItem'>T01</div>
<div class='pageFootItem'>T02</div>
<div class='pageFootItem'>T03</div>
<div class='pageFootItem'>T04</div>
<div class='pageFootItem'>T05</div>
<div class='pageFootItem'>T06</div>
<div class='pageFootItem'>T07</div>
<div class='pageFootItem'>T08</div>
<div class='pageFootItem'>T09</div>
<div class='pageFootItem'>T10</div>
<div class='pageFootItem'>T11</div>
<div class='pageFootItem'>T12</div>
<div class='pageFootItem'>T13</div>
<div class='pageFootItem'>T14</div>
<div class='pageFootItem'>T15</div>
<div class='pageFootItem'>T16</div>
<div class='pageFootItem'>T17</div>
<div class='pageFootItem'>T18</div>
<div class='pageFootItem'>T19</div>
<div class='pageFootItem'>T20</div>
</div>
<div class="pageContent">
<div class="pageContentItem">Content1</div>
<div class="pageContentItem">Content2</div>
<div class="pageContentItem">Content3</div>
<div class="pageContentItem">Content4</div>
<div class="pageContentItem">Content5</div>
<div class="pageContentItem">Content6</div>
<div class="pageContentItem">Content7</div>
<div class="pageContentItem">Content8</div>
<div class="pageContentItem">Content9</div>
<div class="pageContentItem">Content10</div>
<div class="pageContentItem">Content11</div>
<div class="pageContentItem">Content12</div>
<div class="pageContentItem">Content13</div>
<div class="pageContentItem">Content14</div>
<div class="pageContentItem">Content15</div>
<div class="pageContentItem">Content16</div>
<div class="pageContentItem">Content17</div>
<div class="pageContentItem">Content18</div>
<div class="pageContentItem">Content19</div>
<div class="pageContentItem">Content20</div>
</div>
</body>
As slick.js library isn't free for commercial use, is there any other way of achieving this?
You can achieve that using css with overflowX: scroll.
You can use just html and css to get a result like you want:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.slider {
width: 300px;
background: #f1565a;
overflow: hidden;
}
.slider ul {
white-space: nowrap;
overflow-x: scroll;
}
.slider ul::-webkit-scrollbar {
height: 2px;
}
.slider ul::-webkit-scrollbar-track {
background: rgba(255,255,255, 0.5);
}
.slider ul::-webkit-scrollbar-thumb {
background: rgba(255,255,255, 0.8);
}
.slider ul li {
display: inline-block;
font-family: sans-serif;
padding: 10px;
color: #fff;
}
<div class="slider">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Now, if you need, you can implements js to make arrows. :)
I have two slick sliders working well. Problem with the same navigation: When I slide the first and second slide, the second slide will slide by 2 (like 1:2), at the same time the first slide will slide by one.
I have tried with asNavFor but it has not split the slider1 and slider2 with the same navigation. Can anyone help me to achieve this? Solution will be marked sure.
$('.slider1').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
rows: 1,
swipeToSlide: true,
asNavFor: '.slider2'
});
$('.slider2').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 2,
slidesToScroll: 2,
arrows: true,
asNavFor: '.slider1'
});
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black !important;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
.slick-prev {
position: relative;
top: 45px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<section class="slider slider1">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
<div class="col-sm-6 col-md-6">
<section class="slider slider2">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
</div>
</div>
In Fancybox modal window I have Flickity carousels. On iPad, when I change the orientation, Flickity stops working properly. flickity-viewport appears as 0px. No issues on desktop window resize. Not sure how to update Flickity when the orientation changes on iPad.
https://jsfiddle.net/2zb5qesa/13/embedded/result/
$(document).ready(function() {
$('.carousel-container').each( function( i, container ) {
var $container = $( container );
// main Flickity
var $carouselMain = $container.find('.carousel-main').flickity({
imagesLoaded: true,
percentPosition: false,
pageDots: false,
adaptiveHeight: true
});
// nav Flickity
$container.find('.carousel-nav').flickity({
asNavFor: $carouselMain[0],
contain: true,
pageDots: false,
groupCells: true,
adaptiveHeight: true,
prevNextButtons: false
});
});
$("[data-fancybox]").fancybox({
idleTime : false,
smallBtn: false,
buttons : [
'close'
],
touch : {
vertical : false,
momentum : false
},
wheel : false,
afterShow: function( instance, slide ){
slide.$slide.find('.carousel-main').flickity('resize');
slide.$slide.find('.carousel-nav').flickity('resize');
}
});
});
.carousel {
background: #FAFAFA;
margin-bottom: 40px;
}
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.carousel-nav .carousel-cell {
height: 80px;
width: 100px;
}
.carousel-nav .carousel-cell:before {
font-size: 50px;
line-height: 80px;
}
.carousel-nav .carousel-cell.is-nav-selected {
background: #ED2;
}
.modal-window {
width: 985px;
padding: 0;
background: none;
}
.modal-window-inner {
width: 980px;
padding: 40px;
position: relative;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.1.2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/flickity#2.1.2/dist/flickity.css" rel="stylesheet"/>
<a data-src="#p1" href="javascript:;" data-fancybox="gallery">MODAL 1</a>
<a data-src="#p2" href="javascript:;" data-fancybox="gallery">MODAL 2</a>
<div style="display: none;" id="p1" class="modal-window">
<div class="modal-window-inner">
<div class="carousel-container">
<div class="carousel carousel-main">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-main -->
<div class="carousel carousel-nav">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-nav -->
</div>
<!-- /.carousel-container -->
</div>
<!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->
<div style="display: none;" id="p2" class="modal-window">
<div class="modal-window-inner">
<div class="carousel-container">
<div class="carousel carousel-main">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-main -->
<div class="carousel carousel-nav">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-nav -->
</div>
<!-- /.carousel-container -->
</div>
<!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->
I think this is because fancybox hides content for a moment on device orientation change event, maybe try adding this for fancybox and see if helps:
onUpdate : function( instance, slide ) {
slide.$slide.find('.carousel-main').flickity('resize');
slide.$slide.find('.carousel-nav').flickity('resize');
}
I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:
I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>