株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > 便乗してスライダーのご紹介

便乗してスライダーのご紹介

UPDATE : 2023.02.14

CATEGORY :
Hirabayashi
Hirabayashi

Hirabayashi

こんにちわ、かずです。
火曜日担当ですが遅くなりましたすみません!

以前さやさんがスライダーの記事を紹介していましたので、便乗!

使いやすいスライダープラグイン2選「slick」「Swiper」紹介



自分も基本的にスライド関連は紹介されている「slick」か「swiper」の2択です。
個人的には「swiper」が好きなんですが、実務だと「slick」が多いかなーといった感じです。

そんな中今回ご紹介するのはこちら

bxSlider

公式はこちら

以前にこんなスライドをつくる案件がありました。

条件1.ゆっくり等速で自動スライド
条件2.スライドの数は増減
条件3.各スライドにリンクをつけて、ホバーで停止
条件4.ホバーが離れると再度自動でスライド

まずは上記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がこんな形で活躍するとは!とちょっと衝撃も受けつつも、選択肢が広がるいい案件でした。
どなたかの参考になれば幸いです!

それでは。

この記事を書いた人Who wrote this blog

Hirabayashi Kazuaki

猫をこよなく愛するコーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design