SteamerLaneStudio

script ニュースティッカー
最終更新日: 2023年4月15日

「この記事を読んだ人へのお奨め」的な記事などを並べる際に使うニュースティッカー。
slick.js
これを選んだのはカスタムしやすい事はもちろん、スマホでのスワイプ対応、ラップ要素に対しコンテンツが少ない際は動かないなど、マルチデバイス対応・ユーザビリティにも優れているから。

htmlヘッダ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

html
<div class="各コンテンツを包むクラス">
　　　<div>コンテンツ</div>
　　　<div>コンテンツ</div>
　　　<div>コンテンツ</div>
　　　<div>コンテンツ</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.recommendslider').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1921,
settings: {
slidesToShow: 6,
infinite: true,
dots: true
}
},
{
breakpoint: 1601,
settings: {
slidesToShow: 5,
infinite: true,
dots: true
}
},
{
breakpoint: 1201,
settings: {
slidesToShow: 4,
infinite: true,
dots: true
}
},
{
breakpoint: 980,
settings: {
slidesToShow: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 641,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
}
]
});
});
</script> CSS
.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}

.slick-list:focus {
outline: none;
}

.slick-list.dragging {
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}

.slick-track:before,.slick-track:after {
display: table;
content: '';
}

.slick-track:after {
clear: both;
}

.slick-loading .slick-track {
visibility: hidden;
}

.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}

[dir='rtl'] .slick-slide {
float: right;
}

.slick-slide img {
display: block;
}

.slick-slide.slick-loading img {
display: none;
}

.slick-slide.dragging img {
pointer-events: none;
}

.slick-initialized .slick-slide {
display: block;
}

.slick-loading .slick-slide {
visibility: hidden;
}

.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}

htmlは簡単、外部scriptを置くほか、レスポンシブなどオプションを記述。cssは基本的な部分のみなので、ちゃんとやること。
jqueryのバージョンはどこまで遡れるか不明。
元ネタhttp://kenwheeler.github.io/slick/