CODEWITHSUNDEEP
javascriptjquerybxslider
Takács Zoltán
Takács Zoltán

Reputation: 117

BxSlider min and max slides not working

I have about 10-15 slides in the .

Max slides is 4, but only 1 slide is showned. When the page loads, the slider "flashes", and show 4 slides, but after that, one slide is displayed again.

Whats wrong with the slider? Thank for helps!

You can see the problem here:Click

<div class="home-slider-wrapper">
              <?php
              $get_slides = mysqli_query($kapcs, "SELECT * FROM slideshow WHERE slide_status = 1 ORDER BY slide_sorrend ASC");
              if(mysqli_num_rows($get_slides) > 0 )
              {
                  echo '<ul class="bxslider">';
                    while($slide = mysqli_fetch_assoc($get_slides))
                    {
                        if($slide['slide_link'] == "" )
                        {
                            echo '<li><img src="'.$host.'/images/homepage_slideshow/'.html($slide['slide_img']).'" title="'.html($slide['slide_cim']).'" /></li>';
                        }
                        else
                        {
                            echo '<li><a href="'.html($slide['slide_link']).'" title="'.html($slide['slide_cim']).'" target="'.html($slide['slide_link_target']).'"><img src="'.$host.'/images/homepage_slideshow/'.html($slide['slide_img']).'" title="'.html($slide['slide_cim']).'" /></a></li>';
                        }
                    }
                  echo '</ul>';
              }
              ?>
            </div>


$('.kiemelt_termekek_slider').bxSlider({
  auto: true,   
  mode: 'horizontal',
  captions: false,
  minSlides: 4
  //maxSlides: 4    
});

Upvotes: 0

Views: 2883

Answers (2)

mrwpress
mrwpress

Reputation: 311

The issue here is you are missing the 'slideWidth'. Try this:

$('.kiemelt_termekek_slider').bxSlider({
    minSlides: 4,
    maxSlides: 4, 
    auto: true,   
    mode: 'horizontal', // This is default so you don't need it
    captions: false,
    slideWidth: 365, // This is your missing link.  Change this to the width of the slide you want and bxslider will do the appropriate calculation
  });

Note: I have marked in the code that 'mode' is already default to 'horizontal' per the documents here:

BX Slider Options

EDIT: Your code above shows this as the selector:

                  echo '<ul class="bxslider">';

You will need to change that to 'kiemelt_termekek_slider' if that is what you are truly targeting. Either that or change your jQuery to the following:

$('.bxslider').bxSlider({
    minSlides: 4,
    maxSlides: 4, 
    auto: true,   
    mode: 'horizontal', // This is default so you don't need it
    captions: false,
    slideWidth: 365, // This is your missing link.  Change this to the width of the slide you want and bxslider will do the appropriate calculation
  });

Upvotes: 1

ajmajmajma
ajmajmajma

Reputation: 14216

Based on their examples as seen here - http://bxslider.com/examples/carousel-static-number-slides

$('.kiemelt_termekek_slider').bxSlider({
  minSlides: 4,
  maxSlides: 4, 
  auto: true,   
  mode: 'horizontal',
  captions: false
});

The flickering probably has to do with how you are loading in the images.

Upvotes: 0

Related Questions