Website Slider with Different Images on Mobile

Here, we are providing you with the best solution to show a website slider with different images on mobile.

<div id="owl-demo" class="owl-carousel owl-theme">  
    <div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image"
               sizes="100vw"
               srcset="https://placehold.it/768x720/DB4105/FFF8E3&text=768w+720h 768w,
                       https://placehold.it/1280x500/DB4105/FFF8E3&text=1280w+500h 1280w,
                       https://placehold.it/2520x700/DB4105/FFF8E3&text=2520w+700h 2520w" 
               alt="image"></img>
  </div>
  
   <div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image"
               sizes="100vw"
               srcset=" https://placehold.it/768x720/33332D/FFF8E3&text=768w+720h 768w,
                       https://placehold.it/1280x500/33332D/FFF8E3&text=1280w+500h 1280w,
                       https://placehold.it/2520x700/33332D/FFF8E3&text=2520w+700h 2520w" 
               alt="image"></img>
  </div>

  <div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset=" https://placehold.it/768x720/CCCC9F/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/CCCC9F/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/CCCC9F/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>
  <div class="item">   
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset=" https://placehold.it/768x720/9FB4CC/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/9FB4CC/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/9FB4CC/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>
</div><h3>Owl Carousel with Picturefill using 'srcset' and 'sizes' attributes</h3>
<h5>This uses a mobile first approach with 4 breakpoint. It only loads images as each breakpoint matches.</p>

<div id="owl-demo" class="owl-carousel owl-theme">  
    <div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset="https://placehold.it/768x720/DB4105/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/DB4105/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/DB4105/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>
  
   <div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset=" https://placehold.it/768x720/33332D/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/33332D/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/33332D/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>
<div class="item">
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset=" https://placehold.it/768x720/CCCC9F/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/CCCC9F/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/CCCC9F/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>  
  <div class="item">   
      <img src="https://placehold.it/320x300/35478C/FFF8E3&text=Fallback+image" sizes="100vw" srcset=" https://placehold.it/768x720/9FB4CC/FFF8E3&text=768w+720h 768w, https://placehold.it/1280x500/9FB4CC/FFF8E3&text=1280w+500h 1280w, https://placehold.it/2520x700/9FB4CC/FFF8E3&text=2520w+700h 2520w" alt="image"></img>
  </div>
</div>

$(document).ready(function() {
  
  // -----------
  // Debugger that shows view port width. Helps when making responsive designs.
  // -----------
 
  function showViewPortWidth(display) {
    if(display) {
      var width = jQuery(window).width();
      jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;top:40px;left:5px;color:#fff;background:#000;padding:10px">Width: '+ width +'</div>');
      jQuery(window).resize(function() {
        width = jQuery(window).width();
        jQuery('#viewportsize').html('Width: '+ width);
      });
    }
  }
 
showViewPortWidth(true);
  
  
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
  //get carousel instance data and store it in variable owl
  var owl = $(".owl-carousel").data('owlCarousel');
  
});

#owl-demo {
  .item img{
    display: block;
    width: 100%;
    height: auto;
  }
}

<meta name='viewport' content='width=device-width, initial-scale=1'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/2.2.0/picturefill.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">