<head>
  <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
</head>

<body>
  <div class="loSlide">

    <input type="radio" name="radio-btn" id="img-1" checked />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide1.jpg" data-alt="slide 1">
        <source srcset="https://tikevin83.github.io/Images/slide1.webp, https://tikevin83.github.io/Images/slide1-small.webp .5x, https://tikevin83.github.io/Images/slide1-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide1.jpg, https://tikevin83.github.io/Images/slide1-small.jpg .5x, https://tikevin83.github.io/Images/slide1-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-1" id="img-dot-1"></label>

    <input type="radio" name="radio-btn" id="img-2" />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide2.jpg" data-alt="slide 2">
        <source srcset="https://tikevin83.github.io/Images/slide2.webp, https://tikevin83.github.io/Images/slide2-small.webp .5x, https://tikevin83.github.io/Images/slide2-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide2.jpg, https://tikevin83.github.io/Images/slide2-small.jpg .5x, https://tikevin83.github.io/Images/slide2-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-2" id="img-dot-2"></label>

    <input type="radio" name="radio-btn" id="img-3" />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide3.jpg" data-alt="slide 3">
        <source srcset="https://tikevin83.github.io/Images/slide3.webp, https://tikevin83.github.io/Images/slide3-small.webp .5x, https://tikevin83.github.io/Images/slide3-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide3.jpg, https://tikevin83.github.io/Images/slide3-small.jpg .5x, https://tikevin83.github.io/Images/slide3-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-3" id="img-dot-3"></label>

    <input type="radio" name="radio-btn" id="img-4" />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide4.jpg" data-alt="slide 4">
        <source srcset="https://tikevin83.github.io/Images/slide4.webp, https://tikevin83.github.io/Images/slide4-small.webp .5x, https://tikevin83.github.io/Images/slide4-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide4.jpg, https://tikevin83.github.io/Images/slide4-small.jpg .5x, https://tikevin83.github.io/Images/slide4-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-4" id="img-dot-4"></label>

    <input type="radio" name="radio-btn" id="img-5" />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide5.jpg" data-alt="slide 5">
        <source srcset="https://tikevin83.github.io/Images/slide5.webp, https://tikevin83.github.io/Images/slide5-small.webp .5x, https://tikevin83.github.io/Images/slide5-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide5.jpg, https://tikevin83.github.io/Images/slide5-small.jpg .5x, https://tikevin83.github.io/Images/slide5-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-5" id="img-dot-5"></label>

    <input type="radio" name="radio-btn" id="img-6" />
    <div class="slide">
      <picture class="lozad" data-iesrc="https://tikevin83.github.io/Images/slide6.jpg" data-alt="slide 6">
        <source srcset="https://tikevin83.github.io/Images/slide6.webp, https://tikevin83.github.io/Images/slide6-small.webp .5x, https://tikevin83.github.io/Images/slide6-large.webp 2x" type="image/webp">
        <source srcset="https://tikevin83.github.io/Images/slide6.jpg, https://tikevin83.github.io/Images/slide6-small.jpg .5x, https://tikevin83.github.io/Images/slide6-large.jpg 2x" type="image/jpeg">
      </picture>
    </div>
    <label for="img-6" id="img-dot-6"></label>

  </div>
</body>
html, body {
  background: #333;
}

.loSlide {
  padding: 0;
  width: 800px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  text-align: center
}

.loSlide * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

input {
  display: none;
}

input:checked + .slide {
  opacity: 1;
  z-index: 1;
}

.slide {
  opacity: 0;
  transition: opacity 1s;
  top: 0;
  position: absolute;
}

.slide picture.lozad {
  width: 800px;
  height: 600px;
  display: none;
  top: 0;
  position: absolute;
}

input:checked + .slide picture, .slide picture.lozad[data-loaded="true"] {
  display: block;
}

label {
  z-index: 2;
  top: 550px;
  width: 16px;
  height: 16px;
  margin: 7px;
  position: relative;
  display: inline-block;
  border: 8px solid white;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.67);
}

label:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.67);
}

input:checked + div + label {
  background: rgba(0, 0, 0, 0.67);
}
const observer = lozad();
(function startLozad() {
  observer.observe();
})();

//Uncomment this for Autoplay
/* 
(function autoPlay() {
  var slidesShown = 0;
  var slideInputs = document.querySelectorAll(".loSlide input");
  var autoplayInterval = setInterval(function () {
    slideInputs[++slidesShown % slideInputs.length].checked = true;
    if (slidesShown >= slideInputs.length * 3) clearInterval(autoplayInterval);
  }, 8000);

  [].forEach.call(slideInputs,function(e){e.addEventListener('click',function () {
    clearInterval(autoplayInterval);
  },false)})
})();
*/

//Uncomment this to preload images after window.onload
/*
window.onload = function imagePreload() {
  [].forEach.call(document.querySelectorAll(".loSlide picture.lozad"),function(e){observer.triggerLoad(e)})
}
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.