【slick】右から左に自動スライドでループさせる方法

今回はslickを使って右から左に少しずつ自動でなめらかにスライドさせる方法を紹介していきたいとおもいます。

自動スライドさせる方法

html

まず画像を用意します。

<div class="inner">
        <ul class="slider">
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
                <li><img src="https://placehold.jp/300x150.png" alt=""></li>
        </ul>  
</div>

css

.inner{width: 100%;}
.inner li{padding: 10px;}

jQuery

jQuery(function () {   
	jQuery('.slider').slick({
        	arrows: false,
                autoplaySpeed: 30,
                cssEase: "linear",
                swipe: false,
                infinite: true,
                speed: 8000,
                autoplay: true,
                pauseOnFocus: false,
                pauseOnHover: true,
                centerMode: true,
                slidesToShow: 1,
                centerPadding: '30%',
                variableWidth: true,
	});
});

サンプル