Swiper | src/srcset

uses higher resolution images as expected according to window width.

by salt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
    <div class="swiper-slide">
		  <img
			class="swiper-lazy"
	
			srcset="
				https://via.placeholder.com/400x200 400w,
				https://via.placeholder.com/800x400 800w,
				https://via.placeholder.com/1200x600 1200w,
				https://via.placeholder.com/1600x800 1600w,
				https://via.placeholder.com/2400x1200 2400w,
				"
		
			sizes="
				(max-width: 800px) 400px,
				(max-width: 1200px) 600px,
				(max-width: 1920px) 800px,
				1200px
			"
			src="https://via.placeholder.com/400x200" 
      >
      <div class="swiper-lazy-preloader"></div>
	  </div> 

    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

JavaScript

var swiper = new Swiper('.swiper-container', {
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true
});