Search code examples
javascriptjquerycssmobilebxslider

bxSlider cuts off slide viewing mobile


I am using bxSlider and it's working great...I'm having a slight issue with some functionality...when I view the slideshow on mobile it shows 1.5...basically one full slide and then part of the next one. In the code, I have minSlides set to 1 and maxSlides set to 3...what I'd like to do is have bxSlider display a particular li only if the entire li will fit on the screen. For example, my div's are 300px wide, in order to show two of them your screen size would have to be at least 600px wide...is that possible?

I created a fiddle: https://jsfiddle.net/785gcrnp/.

The example page is: http://joshrodg.com/hallmark/ - all the way on the bottom in the dark area where it says "Latest Media".

Thanks,
Josh


Solution

  • A friend of mine helped me get this working!

    I have updated the fiddle: https://jsfiddle.net/785gcrnp/1/

    var sm = 20;
    var podcastSlider;
    
    function podcastSettings() {
        var minmax;
        var win=$(window).width();
    
          if(win > 960) {
            minmax=3;
            var sw = 300;
          } else if(win > 660) {
            minmax=2;
            var sw = 300;
          } else {
            minmax=1;
            var sw = 480;
          }
    
          var sliderSettings={
            adaptiveHeight: true,
            infiniteLoop: false,
            maxSlides: minmax,
            mode: 'horizontal',
            nextSelector: '.next',
            nextText: 'Next',
            pager: false,
            prevSelector: '.prev',
            prevText: 'Prev',
            slideMargin: sm,
            slideWidth: sw
          };
    
          return sliderSettings;
        }
    
        $(window).resize(function() {
          podcastSlider.reloadSlider(podcastSettings());
        });
    
        $(document).ready(function(){
          podcastSlider = $('.podcast').bxSlider(podcastSettings());
        });
    

    This will center the slides and only show the amount of slides that will be fully visible without cutting anything off.

    This is also responsive, so if I resize the browser everything will update as it should.

    In addition, I specified a different width for smaller screens.

    I hope this helps someone else!

    Thanks,
    Josh