slick を使用した＜流れるようなスライダー＞

流れるようなスライダーを付けたいということなので自動ループでつくりました、使用するスライダーは「slick」。

「slick」については過去記事を参考にしてください。

レスポンシブで使うカルーセルスライダーならシンプルな「slick」がおすすめです。ダウンロードサイト ※「Download Now」はリンク切れの場合は「View On Github」からダウンロードが可能。今回はヤフーショッピングサイ...

レスポンシブで使うカルーセルスライダーなら「slick」が便利

公式：http://kenwheeler.github.io/slick/

今回は単体でも動くようにCDNリンクを利用して単体で動くようにしています。

<!DOCTYPE html>
<html>
<head>
<title>slick 流れるように表示する版</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.slider {
width: 100%;
margin: 0px auto;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: white;
}
.slick-next {
right: 35px;
z-index: 99;
}
.slick-prev {
left: 35px;
z-index: 100;
}
</style>
</head>
<body>

<div class="slider">
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1" alt="" /></div>
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=2" alt="" /></div>
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=3" alt="" /></div>
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=4" alt="" /></div>
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=5" alt="" /></div>
  <div><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=9" alt="" /></div>
</div>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
<script>
$(function(){
  $('.slider').slick({
    autoplay: true, // 自動スクロール
    autoplaySpeed: 0, // スライドするまでの時間を0にするオプション
    speed: 5000, // 流れるスピードはここで調整
    cssEase: "linear", // スムーズに流れるようにするオプション
    slidesToShow: 	5, // 表示するスライドの数
    swipe: false, // 操作による切り替えはさせない
    arrows: false, // 矢印表示　※表示はtrue
    pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか
    pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか
		responsive: [{
			breakpoint: 1200,settings: { //992px～1200pxでは5画像表示
				slidesToShow: 5,
				slidesToScroll: 5,
			}
		},
		{
			breakpoint: 991,settings: { //768px～991pxでは5画像表示
				slidesToShow: 5,
				slidesToScroll: 5,
			}
		},
		{
			breakpoint: 767,settings: { //576px～767pxでは2画像表示
				slidesToShow: 2,
				slidesToScroll: 2,
			}
		},
		{
			breakpoint: 575,settings: {//575px以下では2画像表示
				slidesToShow: 2,
				slidesToScroll: 2
			}
		}]
});
    });
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>slick 流れるように表示する版</title>

html, body {

margin: 0;

padding: 0;

}

.slider {

width: 100%;

margin: 0px auto;

}

.slick-slide {

margin: 0px 10px;

}

.slick-slide img {

width: 100%;

}

.slick-prev:before,

.slick-next:before {

color: white;

}

.slick-next {

right: 35px;

z-index: 99;

}

.slick-prev {

left: 35px;

z-index: 100;

}

</style>

</head>

<body>

</div>

$(function(){

$('.slider').slick({

autoplay: true, // 自動スクロール

autoplaySpeed: 0, // スライドするまでの時間を0にするオプション

speed: 5000, // 流れるスピードはここで調整

cssEase: "linear", // スムーズに流れるようにするオプション

slidesToShow: 5, // 表示するスライドの数

swipe: false, // 操作による切り替えはさせない

arrows: false, // 矢印表示　※表示はtrue

pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか

pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか

responsive: [{

breakpoint: 1200,settings: { //992px～1200pxでは5画像表示

slidesToShow: 5,

slidesToScroll: 5,

}

{

breakpoint: 991,settings: { //768px～991pxでは5画像表示

slidesToShow: 5,

slidesToScroll: 5,

}

{

breakpoint: 767,settings: { //576px～767pxでは2画像表示

slidesToShow: 2,

slidesToScroll: 2,

}

{

breakpoint: 575,settings: {//575px以下では2画像表示

slidesToShow: 2,

slidesToScroll: 2

}

}]

});

</script>

</body>

</html>

スタイルシートは好みで変更してください。