bxslider.jsのボタンについて

Question

画像をボタンによって切り替えできるものを実装したいと考えています。
スマホ、タブレット表示の場合はスワイプで切り替えできるようにしたいです。

調べてみたところ、以下のbxslider.jsというものがあったのでそれを使用してみました。

bxslider.js

一応、写真の切り替えはできたのですがnext,previewボタンにマウスオーバーするとボタンが縦にクルッと回転というか変な動きをします＞＜

文字で説明がしにくいのでキャプチャを取ってみました。（トリミングしてるので見難いと思いますが）

![![イメージ説明]WIDTH:55]WIDTH:55

これがクルッと回転してる最中です。

一応、開発者モードで確認してもマウスオーバー前と後で見た目に切り替えが起きているところが内容に感じられます。

何か解決策はあるでしょうか？

また、他に便利なスライドができるインストールがあれば教えていただけないでしょうか？

よろしくお願いいたします。

Answer 1

こんにちは。

過去、bxSlider を業務で使ったことがあるので、お役に立てればと
思い、回答させて頂きます。

次のスライド、もしくは、前のスライドに移動するボタン画像を
自作の画像に切り替えるために、私の場合は、
ドキュメントレディハンドラの中で、

$(function(){
   //
   //・・・bxSlider の初期化・・・
   //

    $('a.bx-next').html(
    	'<img src="/images/myNextButton.png" alt="次へ" />');

    $('a.bx-prev').html(
    	'<img src="/images/myPrevButton.png" alt="戻る" />');

　　//
   // ・・・その他の処理・・・
   // 

  };
);

というコードで乗り切りました。

上記で、bx-next や bx-prev は bxSlider の初期化時に、
「次へ」および「前へ」の要素に自動的に付加されるクラス名
です。

さらに、これらの画像に対して何かをしたければ、この後で、
$('a.bx-text img') や $('a.bx-prev img') に対して
処理を行えばよいと思います。

ご参考になれば幸いです。

Answer 2

うーん、すいません。
うまく解決できなかったので他のスライダー、「owl carousel」を使用しました。
owl carousel

色々と解決策を提示していただきありがとうございます。

Answer 3

[jquery.bxslider.css]

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

116行目～122行目あたり
マウスオーバーのスタイルはここなので、
マウスオン画像がずれる原因は
画像をカスタマイズしたか、ここの値が間違っているのかと思います。