

bxsliderのプラグインを使用しているのですが、チュートリアルに使い方がのっていない部分があるようなので、使い方を知りたいです。  
<http://bxslider.com>  
上記のサイトでトップにあるサンプルでは、左右の矢印にマウスを置くと、特に矢印自体が動作しないのですが、自分が使用しているときは矢印にマウスを置くと、上下に動くアニメーションのようなことが発生します。この動きをなくしたいののと、矢印の画像を背景が丸く灰色になっている部分をなくしたいです。

[code]

    $(document).ready(function(){
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            auto: true,
            pause:  5500,
            speed: 800,
            mode: 'horizontal',
            pager:true,
            prevText: '<',
            nextText: '>'
        });
    });
    
[/code]


CC BY-SA 3.0
2016-01-04T15:01:22.477
20603
2016-01-05T02:40:23.560
10980
question
jquery
bxsliderの使い方


矢印がアニメーションしてしまうのは画像の高さが統一されていないからでしょう。  
画像の高さに関わらず矢印の位置を固定したい場合は`adaptiveHeight`を`false`に指定する必要があるようです。  
<http://bxslider.com/examples/slideshow-adaptive-height>

[code]

    adaptiveHeight: false
    
[/code]

矢印の画像の背景に関しては`images/controls.png`の灰色部分を画像編集ソフトで透明にしてしまうか、質問者さんのように`prevText`,
`nextText`指定で表示したいテキストを変える場合は`prevSelector`,
`nextSelector`でテキストを表示する場所を指定して表示するしかなさそうです。  
<http://bxslider.com/examples/custom-next-prev-selectors>

画像内にテキストを表示させたいのであれば、CSSで親要素を`relative`、テキスト表示要素を`absolute`等で位置指定して出す、とかでしょうね。


CC BY-SA 3.0
2016-01-05T02:40:23.560
20615
2016-01-05T02:40:23.560
7214
20603
answer