• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / これからはbxSliderを使わずに別のスライダーライブラリを使おう

これからはbxSliderを使わずに別のスライダーライブラリを使おう

池田祐太郎 | 2022年1月13日 公開 コメントを書く

レスポンシブのjQueryスライダーで有名なbxSliderですが、数年間更新されていないにも関わらず、制作時に導入しそのまま利用しているケースや、テーマ側で読み込んでいてアップデートしないで使っているケースなどがあります。

不具合が確認でき、別のスライダーライブラリに変更を実施したこともありますので、もしお使いの場合は可能な限り変更を、これから導入するという場合は別のライブラリを利用することをお勧めします。

本記事では、bxSliderの状況と発生した不具合について、また代替手段としての別のライブラリをご紹介します。

目次

  • 1 bxSliderの最終更新は2018年で止まっている
  • 2 iOS端末でリンクがクリックできない不具合が発生
  • 3 bxSlider の代わりになるスライダーライブラリ
    • 3.1 Swiper
    • 3.2 Slick
  • 4 突然使えなくなる、不具合が発生するといったリスクがあることを知っておく

bxSliderの最終更新は2018年で止まっている

bxSlider は利用者も多く人気のjQueryスライダープラグインです。手軽に使えるプラグインとして、スライダーライブラリの紹介で現時点でも検索上位の記事で紹介されています。

公式サイト: jQuery Content Slider | Responsive jQuery Slider | bxSlider
Github: GitHub – stevenwanderski/bxslider-4: Responsive jQuery content slider

記事執筆時点での確認ですが、最終更新日の2018年5月から更新されていません。issueは約450件、プルリクエストも約50件ある状態です。

これでも問題なく使えているならば利用の判断はできますが、不具合が発生しました。

iOS端末でリンクがクリックできない不具合が発生

bxSlider でリンクを設定しているスライダー箇所に対して、デスクトップからは問題ないですが、iPhone実機の場合リンクがタップできたり、できなかったりという不具合が発生していました。ページを読み込んで1回目のタップでは反応せず、2回目のタップで反応する、というような状態です。ブラウザはSafari, Chromeどちらも同様に発生していました。

こちらはデスクトップですが、最新のChromeでも同様にクリックできないという問題が上がっています。

Links not clickable latest version of Chrome · Issue #1268 · stevenwanderski/bxslider-4 · GitHub

利用しているテーマ内にて bxSlider が読み込まれていましたが、テーマ側のアップデートにて bxslider から Slick という別のスライダープラグインに切り替わる情報が公開されていたため、今回はテーマを更新することでスライダーライブラリが切り替わり、該当箇所のCSS等の調整を行い解決しました。

bxSlider の代わりになるスライダーライブラリ

bxSlider の代わりになるスライダー系のライブラリはたくさんありますが、個人的には以下をお勧めします。

  • Swiper
  • Slick

Swiper

GitHub – nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

jQueryのようなライブラリを必要とせずにスライダー、カルーセルを実装できます。更新は頻繁に行われているため安全で、githubスターの数は29,000を超えます。

ファイルサイズは136KBと軽量ではありませんが、後述のSlickと100KB程度しか変わりませんので、そこまで気にする必要はないでしょう。

実装した経験から、個人的にはSwiperをお勧めします。

Slick

GitHub – kenwheeler/slick: the last carousel you’ll ever need

jQueryを必要とするスライダーライブラリです。なんと言っても43KBと軽量です。githubのスターはSwiperに迫る約27,000件。

一番の懸念としては、最新バージョンが2017年で止まっているという点です。今の所問題なく使えているようですが、ブラウザ側やjQueryの仕様変更等により不具合が発生する可能性もあり、そのときに問題なく更新されない場合は別のライブラリを検討する必要があります。

上記ご紹介の通り、bxSlider から Slick に変更して問題なく動いているケースはありますので、多く使われていることを考えても近い将来発生するとは考えにくいですが、懸念材料として知っておくと安心です。

突然使えなくなる、不具合が発生するといったリスクがあることを知っておく

bxSlider は更新が止まっている上に不具合が発生したため、今後は利用するスライダーライブラリからは外れました。

今回のスライダー系ライブラリのように、個人の開発者が善意で開発・公開してくれているこのようなライブラリは突然更新が止まりサポートされなくなるということがあります。そういったリスクがあるということを知りつつ、メリットを享受できるという前提でいれば、不具合が発生したときに別のライブラリに変更する、というような対応策をスピーディーに取れることとなります。

もし不具合が発生した場合は、本番環境上で確認・修正をするのではなく、テスト環境や開発環境といった外部に一般公開していない環境で問題の原因確認や修正を実施し、最終的に本番環境へ反映するようなフローを取るようにしましょう。

参考: WordPressのテストサイト・検証用環境の作り方

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:bxslider, jQuery, Swiper

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
要素を遅らせて表示させるjQueryのサンプル
2013年11月9日
タグ: jQuery
カテゴリー: TIPS
aタグのクリックを無効にするjQuery
2013年10月16日
タグ: jQuery
カテゴリー: TIPS

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.