0

So this is the case: I have a simple gallery, 5 images stacked on one row. After certain breakpoint this gallery have to become a image slider (using BxSlider). This is my html:

<section class="gallery clearfix">
    <a class="fancybox" href="images/pic1.png"><div class="sprite pic1"></div></a>
    <a class="fancybox" href="images/pic2.png"><div class="sprite pic2"></div></a>
    <a class="fancybox" href="images/pic3.png"><div class="sprite pic3"></div></a>
    <a class="fancybox" href="images/pic4.png"><div class="sprite pic4"></div></a>
    <a class="fancybox" href="images/pic5.png"><div class="sprite pic5"></div></a>
</section>

I have used sprite for the images.

TeodoraS.K
  • 185
  • 1
  • 9

4 Answers4

1

I have checked the solution provided by @dowomenfart but if we resize the window multiple time it will reinstall the slider as @DrKey have mentioned in the comment . So here is the solution to get rid of this 

$(document).ready(function(){
    var width = $(window).width();
    $(window).resize(function(){
        var width = $(window).width();
        slider(width);
    });
    slider(width);
});

function slider(width) 
{
   if(width <= 400)    // change it here 
   {
        if(window.sldr!=undefined)
        {               
            window.sldr.destroySlider();
        }

        window.sldr=$('.bxslider').bxSlider();
   }else
   {
        window.sldr.destroySlider();
   }
}

we need to destroy the slider after condition

Manoj Dhiman
  • 4,896
  • 6
  • 24
  • 59
0

Put your bxslider call in a $(window).resize()

JSFIDDLE DEMO

$(document).ready(function(){
    $(window).resize(function(){
        console.log($(window).width());
        if($(window).width() <= 400){
           $('.bxslider').bxSlider();
        }
    });
});

I put 400 for the window size but you can change that to get the desired look.

dowomenfart
  • 2,525
  • 2
  • 13
  • 16
  • How I can put some event listeners, because when I start to resize the window back to normal the slider should return in its original state. – TeodoraS.K Apr 08 '15 at 13:09
  • 1
    While resizing a web browser under 400px bxSlider() will be instantiated multiple times. – DrKey Apr 08 '15 at 13:10
  • @DrKey To resolve that, you can use the jquery's `.one()` method. Link: http://stackoverflow.com/questions/14687459/how-to-call-function-only-once-in-resize-function – TheAmazingKnight Mar 10 '17 at 15:53
0

on the small resolution you can call the bx slider as below 

$(document).ready(function(){
if(($(window).width()) < 768)
{
     $('.bxslider').bxSlider();
}
});

$(window).resize(function(){
if(($(window).width()) < 768)
{
     $('.bxslider').bxSlider();
}
});

it will call bx slider only when the device width less then 768px. You have to manage all 5 images in desktop or tablet device by css.

Vijay Dhanvai
  • 978
  • 2
  • 10
  • 22
  • Why are you calling the same function twice? – dowomenfart Apr 08 '15 at 13:00
  • While resizing a web browser under 768px `bxSlider()` will be instantiated multiple times. – DrKey Apr 08 '15 at 13:08
  • yes this can be done by only first document.ready() function. but if you are checking by browser window resizing. it will not work properly because document ready event only call at the time of page load, once at the page. So it require if you are checking with browser window resize. at every resize point it will check is it in given condition or not. – Vijay Dhanvai Apr 09 '15 at 04:50
0

Taken from this answer

$(document).ready(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('.bxslider').bxSlider();
}
});
Community
  • 1
  • 1
DrKey
  • 3,059
  • 2
  • 25
  • 39
  • I don't think this will solve his problem. You're looking for what device the user is on and he wants to know whether the screen is small and then call the plugin. – dowomenfart Apr 08 '15 at 13:02
  • If you have right then he should ask how to instatiate bxslider at certain screen size, not only on mobile.. – DrKey Apr 08 '15 at 13:07