displaySlideQty doesn't work

[somerussian]

I have the following code:

$(".view-id-slideshow.view-display-id-block_4 ul:first").bxSlider({ controls: false, mode: "fade", auto: true, displaySlideQty: 3, moveSlideQty: 3 });

And it works but I can see only 1 image in the slide (instead of 3). How can I fix it?

[tba6440]

maybe you can try to add a width to the li tag

[somerussian]

nice idea, but didn't work. Here is the test page: http://kendo74.ru/nashi-eksperty/glushko-aleksandr You can see both slideshow and it's photos there. Any other ideas?

[adrian-fc]

I am having an issue where mode:fade doesnt work with multiple slides (where mode:horizontal does)

[tejasunkara]

Any success with this? Im trying to accomplish something exactly like this.

My displaySlideQty is 3 and want my slider to work with mode: 'fade'. Only one slide gets displayed :(

My function:

$(function(){ $('#scrollable').bxSlider({
mode:'fade' ,
displaySlideQty: 3, moveSlideQty: 3 });
});

[adrian-fc]

I had to 'cheat'

    displaySlideQty: 3,
    moveSlideQty: 3,
    infiniteLoop: false,
    pager: true,
    controls: false, 
    pagerSelector: '#pager1',
    auto: true,
    pause: 5000,
    speed: 0,
    onBeforeSlide: function(currentSlide, totalSlides){
  $('.carousel').fadeTo(400, 0);
},
    onAfterSlide: function(currentSlide, totalSlides){
  $('.carousel').fadeTo(400, 1);
}

Prob not the best idea (and the fades dont overlap) but the client was happy enough

[ghost]

I found a solution about this issue :

$(".slider .slide").each(function(index) {
    var displaySlideQty = 2;

    if(index % displaySlideQty == 0) {
        $(this).before("<div class=\"slide-group\"></div>");
    }

    $(this).appendTo($(this).prev());
});

$(".slider").bxSlider({
    mode: 'fade',
    pager: true,
    controls: false,
    speed: 600
});

[ghost]

I've found another cheat for this, it's quite easy. If You want to display 'n' slides at once (and move by 'n' as well), You can put every 'n' slides in some wrapper. In example, for two slides at once, instead of:

<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>

we've got something like this:

<div id="slider1">
  <div>
    <div>Slide one content</div>
    <div>Slide two content</div>
  </div>
  <div>
    <div>Slide three content</div>
    <div>And so on...</div>
  </div>
</div>

Now, those wrappers are threated as slides.

[aarondaniels00]

@tasiek

That's cool. I understand what you accomplish with this approach, but I'm not sure nesting is necessary.

Check out this example: http://bxslider.com/examples/display-move-multiple-slides-once-example-two

This example uses an unordered list, but I think div's would work as well.

[b3ckstage]

@wandoledzep we really need this feature.