slickオプションの初期表示指定の
initialSlide:○
に数値をランダムに入れるメソッドを使う
var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;
seed*3←この数字が全体のスライド数
「0」が1枚めなので「-1」して「: 0」も含む書き方してます。
var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;$('.slick').slick({
initialSlide:randKv});
この書き方ならslickじゃなくても他のものにも応用できそうな便利なメソッドです！
https://qiita.com/Y_ASAMOTO/items/90afe7d24467020c17f0
https://sinap.jp/blog/2016/12/adobe-xd-export.html
.list_item a::after {content: url(./arrow.png);display: inline-block;vertical-align: middle;-webkit-transform: scale(0.5);transform: scale(0.5);}
contentで追加した画像にはサイズを指定することができません。
そのため、サイズを変更したい場合はtransformプロパティのscale()で拡大・縮小させます。
https://webdesignday.jp/inspiration/technique/jquery-js/3847/
https://qiita.com/sunnyG/items/faf1821ae09820e30ce8
https://www.webopixel.net/javascript/1483.html
https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d
https://qiita.com/yoshida-hi/items/4909c578b098f172efdb
https://kagesai.net/search-form-design/https://kagesai.net/search-form-design/
オプションの”infinite”はautoplayを止める値ではなかった！！（衝撃）
手動でスライドさせていった際にループをさせないオプションとのこと、、、
なのでautoplayを最後で止めるには下記リンク先のような記述が別途必要
https://nldot.info/how-to-change-slick-slider-by-slicktogo-on-hover/
・サムネイルの同期の仕方
・サムネイルをautoplayでス〜とループさせるなど参考
パラメーターなど一覧
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
http://black-flag.net/jquery/20160802-6170.html
すーーーーと止まることなくスライドしていく動きを実装
下記のパラメータが重要
autoplaySpeed: 0,
speed: 5000,
cssEase: 'linear',※でも、slickだと挙動がおかしくなることもあるので、あまり使わないほうがいいかも
↓無限スライダーはここで実装している
jquery不要のスライダープラグイン
swiper.jp
を使っている模様