2016/07/05

Yahooトリプルでbxsliderが動かないときの対処方法

先日、Yahoo!ショッピングにjquery【bxslider】を組み込んでいたときに、正常に動かなかったので対処方法を記しておきます。

 

bxsliderとは

jqueryプラグインの中でも有名かつ、簡単にスライド機能を追加できるプラグインでJavasqriptの知識がなくても簡単に動的ページの作成が可能です。

 

 

対処方法

使用方法は使い方をまとめている記事が多数あるので今回は本題のYahoo!ショッピングの対処法のみ解説。

 

楽天市場やローカル環境ではスムーズに動きますが、Yahoo!ショッピングではnextボタンやサムネイルをクリックしても、リロードされ正常に動作せず。

原因はbxsliderのJavasqriptファイルのタグを書き出す場所がhref=””となっていること

通常だとこれで問題ないが、ヤフートリプルだとこのままの記述だと正常に動かないのでhref=”javascript:void(0);”と書き換えます。

サムネイル画像の場合はをa data-slide-index=”0″ href=””を

a data-slide-index=”0″ href=”javascript:void(0);” と置き換えるだけ。

 

Yahooトリプルでbxsliderを使用したいときの参考に。