Slide gallery one image at a time with Bxslider

Question

I’m trying to create slide gallery with http://bxslider.com/ I would like the gallery to run one image at a time and not a group of images.

Example I am using but would like to CHANGE : http://bxslider.com/examples/carousel-dynamic-number-slides)

Below the code:

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

Reading the options of bxslider I found the getCurrentSlide option that I think could be right but I don’t know how to enter the script above :

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

Thank you!

Answer 1

The answer to that is in the code itself jquery that you published in your question, and is even mentioned in the sample page from the link you added, right after the HTML code on this sample page.

minSlides > means: minimum number of slides to be shown
maxSlides > means: maximum number of slides to be shown

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

minSlides: 2,
maxSlides: 3,

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

To show only 1 slide at a time, you have to modify the jQuery code to 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, because the comments are there just to guide you and give you a sense of what they do.