jQuery slick caroussel // test 2

by bizamajig

HTML

<!--// 
/*
     _ _      _       _
 ___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__ \ | | (__|   < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
                   |__/
 Version: 1.4.1
  Author: Ken Wheeler
 Website: http://kenwheeler.github.io
    Docs: http://kenwheeler.github.io/slick
    Repo: http://github.com/kenwheeler/slick
  Issues: http://github.com/kenwheeler/slick/issues
*/
//-->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css"/>
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

<h1>Two "four slides" carrousel</h1>

<div id="playlist">
    <div class="slick"><h3>1</h3></div>
    <div class="slick"><h3>2</h3></div>
    <div class="slick"><h3>3</h3></div>
    <div class="slick"><h3>4</h3></div>
</div>

<div id="playlist2">
    <div class="slick"><h3>1</h3></div>
    <div class="slick"><h3>2</h3></div>
    <div class="slick"><h3>3</h3></div>
    <div class="slick"><h3>4</h3></div>
</div>

CSS

.slick {
    background:rgba(0,0,0,0.3);
    color:white;
    text-align:center;
    border:1px solid white;
}
.slick-active {
    background:orange;
}
.slick-center {
    background:yellow;
}

#playlist,
#playlist2 {
    background:red;    
    width:100%;
    margin-top:20px;
}
#playlist h3,
#playlist2 h3 {
    width:106px;
}

JavaScript

$(function() {
    
    $('#playlist').slick({
        infinite        : true,
        slidesToScroll  : 4,
        slidesToShow    : 5, // BREAK : ask for ODD in CenterMode
        touchThreshold  : 5,
        focusOnSelect   : true,
        centerMode      : true,
        centerPadding   : '50px',
    });
    
    $('#playlist2').slick({
        infinite        : true,
        slidesToScroll  : 3, // BREAK and not fluid.....
        slidesToShow    : 3,
        touchThreshold  : 5,
        focusOnSelect   : true,
        centerMode      : true,
        centerPadding   : '50px',
    });
    
});