JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img data-src="https://picsum.photos/320/240/?random" class="lazy" width="320" height="240"></div>
        <div class="swiper-slide"><img data-src="https://picsum.photos/320/240/?random" class="lazy" width="320" height="240"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

.swiper-container {
  width: 320px;
  height: 240px;
}
img.lazy {
  opacity: 0;
}
img.lazy:not(.initial) {
  will-change: opacity;
  transition: opacity 0.3s ease-in-out;
}
img.lazy.initial, img.lazy.loaded, img.lazy.error {
  opacity: 1;
}
img:not([src]) {
  visibility: hidden;
}

JavaScript

var lazyLoadImages = new LazyLoad({
	elements_selector: ".lazy",
  threshold: 200
});

var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  speed: 1000,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  keyboard: {
    enabled: true
  },
  on: {
    init: function() {
      $(this.$el).find('img').removeAttr('data-was-processed').removeClass('loaded');
      lazyLoadImages.update();
    }
  }
});