UPDATE：2023.2.14
- CATEGORY
便乗してスライダーのご紹介
こんにちわ、かずです。以前さやさんがスライダーの記事を紹介していましたので、便乗！
使いやすいスライダープラグイン２選「slick」「Swiper」紹介
自分も基本的にスライド関連は紹介されている「slick」か「swiper」の2択です。
個人的には「swiper」が好きなんですが、実務だと「slick」が多いかなーといった感じです。
そんな中今回ご紹介するのはこちら
bxSlider
公式はこちら以前にこんなスライドをつくる案件がありました。
まずは上記2つで試しました。
しかし、調べた限りでは条件1・2は満たせるものの3・4が実現出来ませんでした・・・
そこで使ってみたのが【bxSlider】です！
書いたコードはこちら↓↓ （※htmlは省略）
const slider = $('#slider'),
slideSpeed = 10000,
slideLength = slider.find('.slide').length;
slider.bxSlider({
ticker: true,
tickerHover: true,
useCSS: false,
pager: false,
easing: 'linear',
slideWidth: 'auto',
speed: slideSpeed * slideLength,
controls: false,
});ざっくりなのでサイトに合うよう調整してください・・・
こんな形の記述で条件3・4も満たしたスライドの出来上がりです！
もっとよくドキュメントを読み込めばswiperやslickでも出来たかもしれませんが、時間との勝負もありましたので・・・（逃げ）
もう使うこともないかなーと思っていたbxSliderがこんな形で活躍するとは！とちょっと衝撃も受けつつも、選択肢が広がるいい案件でした。
どなたかの参考になれば幸いです！
それでは。
条件2.スライドの数は増減
条件3.各スライドにリンクをつけて、ホバーで停止
条件4.ホバーが離れると再度自動でスライド