How to use the bxslider

I'm using the plug-in of the bxslider, but I'd like to know how to use it because there seems to be some parts of the tutorial that don't show how to use it.
http://bxslider.com
In the sample at the top of the above site, if you mouse over the left and right arrows, the arrow itself does not work, but if you mouse over the arrow when you are using it, something like an animation that moves up and down.I want to get rid of this movement, and I want to get rid of the round gray background of the arrow image.

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

jquery

2022-09-30 16:32

1 Answers

The reason why the arrows are animated is probably because the height of the images is not uniform.
It seems that adaptiveHeight should be specified as false if you want to fix the arrow position regardless of the height of the image height.
http://bxslider.com/examples/slideshow-adaptive-height

adaptiveHeight:false

As for the background of the arrow image, the gray part of images/controlls.png is transparent with image editing software, or prevText, nextText to change the text you want to display like a prevSelector text.
http://bxslider.com/examples/custom-next-prev-selectors

If you want the text to be displayed in the image, CSS will position the parent element with relative, text display element with absolute, and so on.

2022-09-30 16:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656