ガタガタです。いつもありがとうございます。
先日、お問い合わせフォームより連絡があり、テンプレート「Simple Slider」のスライダーが正常に動作していないことがわかりました。
このような不具合は2020年7月にも起きていましたが、不具合の原因は、Simple Sliderに使用しているスライダープログラム「Swiper」が6版から7版にアップデートされたことに伴い、仕様が変更されたことにありました。
「do」で配布しているテンプレート「Simple Slider」においてはSwiperのCDNを利用しているため、7版のプログラムに対して6版のHTMLの記述を利用している状態になってしまい、不具合が起きてしまったと考えられます。
2020年7月に起きた同様の不具合についての詳細は、以下のお知らせをご参照ください。
現在配布中のテンプレートおよびデモサイトについては、不具合を修正したものに差し替えが完了しています。
これまで、配布されているプログラムはできる限り最新のものを利用したほうがよいという考えのもと、CDNを利用していました。しかしSwiperにおいてはCDNの仕様に頻繁に変更があり、今後も同様の不具合が高頻度で発生してしまう可能性が高いことを考慮し、CDNではなくプログラムファイルそのものをテンプレートに組み込むことで不具合の発生を回避することにいたしました。
現在テンプレートをご利用中の方へ
以下の手順で不具合を解消することができます。
１）Swiperの旧バージョンのプログラムファイルをダウンロードする
こちらをクリックし、Swiperの6版のプログラムファイルをダウンロードしてください。
CSSおよびJSファイルが１つずつ、フォルダに入った状態で同梱されていますので、サイトの適切な場所に配置してください。通常CSSファイルは「css」フォルダ直下に、JSファイルは「js」フォルダ直下に配置します。
２）HTMLの記述を書き換える
スライダーを利用しているHTMLファイルの2か所を以下の通りに書き換えてください。
<head>～</head>の間
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> ↓これを以下のように書き換える <link rel="stylesheet" href="css/swiper-bundle.min.css">
</body>の直前
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> ↓これを以下のように書き換える <script src="js/swiper-bundle.min.js"></script>
以上の手順でスライダーが正常に作動するようになります。また、自分のサーバー上にアップロードしたプログラムファイルを利用しているため、今後はSwiperのCDNの仕様変更による影響を受けることはなくなります。
お手数をおかけしますが、よろしくお願いいたします。
ご支援のお願い
doでは、テンプレート、プログラムおよびノウハウ記事の制作、およびサイトの運営・メンテナンスや問い合わせへの対応を、すべてガタガタ個人が行っています。もしもdoのコンテンツが役に立ったと思ったら、あたたかなご支援をお寄せいただけると、とても励みになります。AmazonほしいものリストやOFUSE、ギフトカード、その他のサービスからご支援いただけます。
支援する！