今回はslickの実装方法＋レスポンシブ対応について紹介したいと思います
slickはホームページなどで以下のような画面をみた事がないでしょうか？
写真が時間でスライドしていくように見せるために便利なのがslickになります
①実装方法
実装方法は多くのサイトで紹介されていますが私は、以下の記事がわかりやすく感じました
https://qiita.com/milneo/items/3560cb01cba92c2ccb6f
このサイト通りやったのですがchromの検証ツールを使うと「ajax-loader.gif」が見つからないというエラーメッセージが出るため
assetフォルダーのimageフォルダーの中に「ajax-loader.gif」を保存し
slick-theme.scssに
を追記これで見つからないよ！！エラーは消えました
②レスポンシブ対応
レスポンシブ対応はcssで行うと思ってました！確かに１枚１枚の写真サイズはCSSで設定できるのですがslickでスライドさせる写真の枚数などは
carousel.js内に 「breakpoint:○○」を設定することでスマホ、タブレットなど画面サイズによって切り分ける方法を取りました こうすることで画面サイズが変わってもサイズに合わせてスライダーを表字する事ができました！！参考になればと思います
$(document).on('turbolinks:load', function(){
$('.slick').slick({
autoplay:true,
dots: false,
arrows: false,
speed: 1500,
slidesToShow: 6,
slidesToScroll: 1,
autoplaySpeed: 0,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
dots: false,
cssEase: 'linear',
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
cssEase: 'linear',
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
});
