Slide gallery one image at a time with BxSlider

Question

Slide gallery one image at a time with BxSlider

Navigation

#1 by (1 votes)

2

I'm trying to create a slide gallery with link I would like the gallery to pass one image at a time and not a group of images.

Example that I'm using but would like to CHANGE: link )

Below the code:

<script>
   $(document).ready(function(){
     $('.bxslider').bxSlider({  
       minSlides: 3,
       maxSlides: 2,
       slideWidth: 170,
       slideMargin: 10});
     });
</script>

Reading the bxslider options I found the getCurrentSlide option that I think might be right but I do not know how to enter it in the above script:

example:
slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

Thank you!

jquery script bxslider

asked by anonymous 12.08.2015 / 00:23

1 answer

Problems with PHP session - Continue a session How to pass parameter of type object to JSonResult

score 1 · Accepted Answer

The answer to this is in the actual jquery code that you post to your question, and is even mentioned in example page of the link you add to it, right after the HTML code of that examples page.

minSlides > means: minimum number of slides to display
maxSlides > means: maximum number of slides to display

These parameters exist to show less or plus slides depending on the screen size depending on the value you apply to them, which in this case are:

>

minSlides: 2,
maxSlides: 3,

That is, in small screens, only 2 slides will be displayed at a time, while on larger screens 3 slides will be displayed. You can test this in this example in jsFiddle that I created, where I have already modified the code to show only 1 slide of each instead.

To show only 1 slide at a time, you have to modify the jQuery code for the following:

$('.bxslider').bxSlider({
    minSlides: 1,     // mínimo de slides
    maxSlides: 1,     // máximo de slides
    slideWidth: 170,  // largura do slide
    slideMargin: 10   // margem do slide
});

In the code above I commented on what these parameters do, but then when you are implementing the code on your platform you can remove them, since the comments are there just to give you an idea of what they do.