Bootstrap Carousel Multiple Images Responsive On Window Resize

I am creating a bootstrap carousel that shows two images side by side on 'small' screen sizes and up, and only shows one image on 'x-small' devices. I have used and modified this b

Solution 1:

If you don't need to use Bootstrap carousel take a look at Slick- the last carousel you'll ever. You can define breakpoints for custom windows sizes pretty easy:

$('.responsive').slick({dots:true,infinite:false,speed:300,slidesToShow:4,slidesToScroll:4,responsive: [
    {
      breakpoint:1024,
      settings: {
        slidesToShow:3,
        slidesToScroll:3,
        infinite:true,
        dots:true
      }
    },
    {
      breakpoint:600,
      settings: {
        slidesToShow:2,
        slidesToScroll:2
      }
    },
    {
      breakpoint:480,
      settings: {
        slidesToShow:1,
        slidesToScroll:1
      }
    }
  ]
});

Solution 2:

I have managed to make this work. I have created two functions, one which appends the next image to each item in the carousel and one which removes those cloned images.

run = false;
var multiple = function() {
  $('.carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
         next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    run = true;
  });
};
var undo = function() {
  $('.carousel .item').each(function () {
    $(this).children().last().remove();
    run = false;
  });
};

If the window is greater than 768px on load I call the multiple images function right away

if ($(window).width() > 768) {
  multiple();
};

On window resize I only call the multiple function if it hasn't already been run and the window is 768px or greater. I call the undo function if the multiple function has already been called and the window width is less than 768px.

$(window).resize(function() {
  if (run==false && $(window).width() > 768) {
    multiple();
  } elseif (run == true && $(window).width() < 768) {
    undo();
  }
});

Demo