SwiperJS Lazy Load Images

<!DOCTYPE html>
<html>
  <head>
    <title>SWIPERJS | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="SWIPERJS">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="" rel="stylesheet" type="text/css">
	  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <!-- Required swiper-lazy class and image source specified in data-src attribute -->
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <!-- Preloader image -->
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      <div class="swiper-slide">
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      <div class="swiper-slide">
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      <div class="swiper-slide">
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      <div class="swiper-slide">
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      <div class="swiper-slide">
        <img data-src="https://source.unsplash.com/random/" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Navigation -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 
  <script type="text/javascript" src="script.js"></script>
</body>
</html>
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #000;

}

.swiper-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}
var swiper = new Swiper('.swiper-container', {
    lazy: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});
Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style04

Timeline style04

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Pie Charts

Pie Charts

Organization Chart

Organization Chart

Geocoded Locations

Geocoded Locations

Flat icon Responsive Boxes

Flat icon Responsive Boxes

ChartJS style01

ChartJS style01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Card Bootstrap4 02

Card Bootstrap4 02

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire