Effortless Image Loading with Slider

A Smarter Approach to Page Loading
Effortlessly Load Images with Slider that Doesn't Block

Smarter Image Loading A Guide to the Load Property in Sliders

The "load" property blocks the loading of the slider images to speed up the page loading process. Then, it loads the image specified in the settings as the first one, and the images from the adjacent slides. For example, when starting the slider and pointing to the third slide as the starting point, the images from the second and fourth slides are pre-loaded. Using the load property in the previously described mode should be combined with disabling the "preload" functionality, which, in turn, is responsible for loading all the images one by one.

The load property takes Boolean values, that is, true and false. When the specified (using the "sliderImg" property) image is loaded, the active slide receives the appropriate CSS class declared in the settings under the "classLoaded" position and is not reloaded again until the page is reloaded or the window size changes. The "load" property is enabled by default, but to disable it, change the value of "load" to false in the settings.

<div class="compsoul-slider compsoul-slider-fade">
  
  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Loading images does not block page loading!</span>
      </h2>
      <div class="compsoul-slide-main">Thanks to the Lazy Loading function, only the necessary images are retrieved from the server, saving transfer, server, and connection.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Web design and creation, online stores, website templates, website modules, and free website templates.">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-1.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-1.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Slider adapted for mobile and touch devices!</span>
      </h2>
      <div class="compsoul-slide-main">The photo show has been adapted for mobile devices and features event handling that will allow you to navigate the slider smoothly.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Slider adapted for mobile and touch devices!">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-2.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-2.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Picture rotator adjusts the background size to the screen width!</span>
      </h2>
      <div class="compsoul-slide-main">Don't unnecessarily load large pictures on small screens, adjust the picture to the screen width. Shrink the screen now and see for yourself!</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Picture rotator adjusts the background size to the screen width">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-3.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-3.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Progress bar with hover pause slideshow feature</span>
      </h2>
      <div class="compsoul-slide-main">Handling the slideshow with CSS animation? It's easy, just point to the element that will be your progress bar and enjoy simple animations.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Progress bar with hover pause slideshow feature">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide image" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-4.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-4.jpg" alt="Slide image">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Animated Photo Slideshow on a Website</span>
      </h2>
      <div class="compsoul-slide-main">Create your own animations, customize the look of the slider to match your website, thanks to the simple class CSS system.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Animated Photo Slideshow on a Website">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide Photo" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-5.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-5.jpg" alt="Slide Photo">
      </noscript>
    </figure>
  </article>

  <nav class="compsoul-slide-navigation">
    <ul>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Ładowanie zdjęć nie blokuje wczytywania strony!</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Slider dostosowany do urządzeń mobilnych i dotykowych!</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Rotator zdjęć dostosuje rozmiar tła do szerokości ekranu</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Pasek postępu wraz z funkcją zatrzymania przewijania zdjęć po najechaniu.</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Animowany pokaz zdjęć na stronie WWW</span>
        </button>
      </li>
    </ul>
  </nav>

  <button class="compsoul-slide-button compsoul-slide-next"><span class="compsoul-slide-hidden">Next slide</span></button>
  <button class="compsoul-slide-button compsoul-slide-prev"><span class="compsoul-slide-hidden">Previous slide</span></button>
  
  <div class="compsoul-slide-timeline">
    <span class="compsoul-slide-hidden">Timeline</span>
  </div>
  
</div>
.compsoul-slider {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.compsoul-slide {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

.compsoul-slide-hidden {
  border: 0;
  clip: rect(0 0 0 0); 
  height: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  margin: -1px;
  width: 1px;
}

.compsoul-slide-content {
  display: inline-flex;
  flex-flow: column wrap;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  margin: 0 auto 48px;
  max-width: 540px;
  width: 90%;
}

.compsoul-slide-content .compsoul-slide-heading {
  color: #ffffff;
  font-size: 32px;
  font-weight: 100;
  margin: 0 0 21px;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 0;
}

.compsoul-slide-content .compsoul-slide-heading:before {
  background: #e7a14f;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.compsoul-slide-content .compsoul-slide-main {
  background: #464972bb;
  color: #d7d8ed;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 21px;
  padding: 21px;
}

.compsoul-slide-content .compsoul-slide-more {
  background: #464972;
  border-radius: 5px;
  color: #d7d8ed;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  margin: 0 auto;
  padding: 8px 16px;
  position: relative;
  text-decoration: none;
  transition: background 0.4s, color 0.4s;
  z-index: 0;
}

.compsoul-slide-content .compsoul-slide-more:hover,
.compsoul-slide-content .compsoul-slide-more:focus {
  background: #e7a14f;
  color: #ffffff;
}

.compsoul-slide {
  height: 100%;
  left: 0;
  position: absolute;
  pointer-events: none;
  top: 0;
  width: 100%;
}

.compsoul-slide.compsoul-active {
  z-index: 1;
  pointer-events: auto;
}

.compsoul-slide .compsoul-slide-figure {
  background: no-repeat center;
  background-size: cover;
  bottom: 0;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.compsoul-slide .compsoul-slide-img {
  display: none;
}

.compsoul-slide-button {
  background: #464972;
  border: none;
  cursor: pointer;
  font-size: 2.6px;
  height: 16em;
  outline: 1px solid #e7a14f00;
  padding: 0;
  transition: outline 0.4s;
  width: 16em;
}

.compsoul-slide-button:focus, .compsoul-slide-button:focus-within {
  outline: 1px solid #e7a14fff;
}

.compsoul-slide-next {
  right: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 5;
}

.compsoul-slide-prev {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 5;
}

.compsoul-slide-next, .compsoul-slide-prev {
  cursor: default;
  opacity: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
}

.compsoul-slide-next.compsoul-active, .compsoul-slide-prev.compsoul-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-slide-next.compsoul-loading, .compsoul-slide-prev.compsoul-loading {
  cursor: progress;
}

.compsoul-slide-next:before, .compsoul-slide-prev:before {
  border-top: 1em solid #d7d8ed;
  border-right: 1em solid #d7d8ed;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate(-25%, 25%);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-slide-next:hover:before, .compsoul-slide-prev:hover:before {
  border-top: 1em solid #e7a14f;
  border-right: 1em solid #e7a14f;
}

.compsoul-slide-next:after, .compsoul-slide-prev:after {
  animation: compsoul-loading 1s infinite linear;
  animation-play-state: paused;
  border-bottom: 1em solid #d7d8ed;
  border-left: 1em solid #d7d8ed;
  border-right: 1em solid #d7d8ed;
  border-top: 1em solid #fff;
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 6em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s, border 0.4s;
  width: 6em;
}

@keyframes compsoul-loading {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.compsoul-slide-next.compsoul-loading:before, .compsoul-slide-prev.compsoul-loading:before {
  opacity: 0;
}

.compsoul-slide-next.compsoul-loading:after, .compsoul-slide-prev.compsoul-loading:after {
  animation-play-state: running;
  cursor: progress;
  opacity: 1;
}

.compsoul-slide-next.compsoul-loading:hover:after, .compsoul-slide-prev.compsoul-loading:hover:after {
  border-top: 1em solid #ff0000;
}

.compsoul-slide-prev:before {
  transform: rotate(-135deg) translate(-25%, 25%);
}

.compsoul-slide-navigation {
  bottom: 21px;
  font-size: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  z-index: 5;
}

.compsoul-slide-navigation ul {
  margin: 0;
  padding: 0;
}

.compsoul-slide-navigation .compsoul-slide-nav {
  display: inline-block;
  cursor: pointer;
}

.compsoul-slide-navigation .compsoul-slide-nav * {
  pointer-events: none;
}

.compsoul-slide-navigation button {
  background: none;
  border: 0;
  box-sizing: content-box;
  display: block;
  font-size: 1px;
  padding: 4em 2em;
}

.compsoul-slide-navigation button:focus, .compsoul-slide-navigation button:focus-within {
  outline: none;
}

.compsoul-slide-navigation .compsoul-slide-point {
  background: #464972;
  border: 1em solid #e7a14f00;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 20em;
  padding: 0;
  position: relative;
  transition: border 0.2s linear;
  width: 20em;
}

.compsoul-slide-navigation .compsoul-active .compsoul-slide-point, .compsoul-slide-navigation button:focus .compsoul-slide-point, .compsoul-slide-navigation button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav:hover .compsoul-slide-point {
  border: 3em solid #e7a14fff;
}

.compsoul-slide-navigation .compsoul-loading button:focus .compsoul-slide-point, .compsoul-slide-navigation .compsoul-loading button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav.compsoul-loading:hover .compsoul-slide-point {
  border: 3em solid #ff0000ff;
}

.compsoul-slide-navigation .compsoul-slide-point:before {
  background: #d7d8ed00;
  border: 2em solid #d7d8ed;
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 10em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.4s, opacity 0.4s;
  width: 10em;
}

.compsoul-slide-navigation .compsoul-slide-point:after {
  animation: compsoul-loading 1s infinite;
  animation-play-state: paused;
  border-bottom: 2em solid #d7d8ed;
  border-left: 2em solid #d7d8ed;
  border-right: 2em solid #d7d8ed;
  border-top: 2em solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  height: 16em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
  width: 16em;
}

.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:before {
  opacity: 0;
}

.compsoul-slide-navigation .compsoul-loaded .compsoul-slide-point:before {
  background: #d7d8ed;
}

.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:after {
  animation-play-state: running;
  opacity: 1;
}

.compsoul-slide-timeline {
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-slide-timeline:before {
  animation: compsoul-slide-timeline 6s linear forwards;
  animation-play-state: paused;
  background: #e7a14f;
  content: "";
  display: block;
  height: 100%;
  transform: translate(-100%, 0);
  width: 100%;
}

.compsoul-slider .compsoul-slide-timeline.compsoul-active:before {
  animation-play-state: running;
}

.compsoul-slider:hover .compsoul-slide-timeline:before {
  animation-play-state: paused;
}

.compsoul-slide-timeline.compsoul-unset:before {
  animation: unset;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate(-100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-fade .compsoul-slide {
  opacity: 0;
  will-change: opacity;
  z-index: 0;
}

.compsoul-slider-fade .compsoul-slide.compsoul-wait {
  opacity: 1;
  z-index: 1;
}

.compsoul-slider-fade .compsoul-slide.compsoul-active {
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.compsoul-slider-fade .compsoul-slide.compsoul-first, .compsoul-slider-fade .compsoul-slide.compsoul-previous {
  transition: unset;
}

.compsoul-slider-vertical {
  overflow: hidden;
}

.compsoul-slider-vertical .compsoul-slide {
  background: transparent;
  will-change: transform;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-previous {
  z-index: 2;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-active {
  z-index: 4;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-direction-down {
  animation: compsoul-slider-vertical-down 0.4s linear forwards;
}

@keyframes compsoul-slider-vertical-down {
  from {
    transform: translate(0, -100%);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-vertical .compsoul-slide.compsoul-direction-up {
  animation: compsoul-slider-vertical-up 0.4s linear forwards;
}

@keyframes compsoul-slider-vertical-up {
  from {
    transform: translate(0, 100%);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-vertical .compsoul-slide.compsoul-first, .compsoul-slider-vertical .compsoul-slide.compsoul-previous {
  animation: unset;
}

.compsoul-slider-horizontal {
  overflow: hidden;
}

.compsoul-slider-horizontal .compsoul-slide {
  background: #ffffff;
  will-change: transform;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
  z-index: 2;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-active {
  z-index: 4;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-down {
  animation: compsoul-slider-horizontal-left 0.4s linear forwards;
}

@keyframes compsoul-slider-horizontal-left {
  from {
    transform: translate(-100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-up {
  animation: compsoul-slider-horizontal-right 0.4s linear forwards;
}

@keyframes compsoul-slider-horizontal-right {
  from {
    transform: translate(100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-first, .compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
  animation: unset;
}

@media (max-width: 840px) {
  .compsoul-slide-next, .compsoul-slide-prev {
    top: auto;
    transform: unset;
    bottom: 12px;
  }
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/slider.js"></script><script> 
  new Slider(".compsoul-slider .compsoul-slide").options({
    load: true,
    preload: false
  }).init();
</script>

As we can see on the screenshot below, when the "load" property is enabled and "preload" is disabled, only three out of the five added photos are loaded during page loading. The "preload" property works similarly to "load", but instead of loading neighboring photos, it loads all of them one by one, also not blocking the page rendering.

Image loading process with preload option enabled

If we use point navigation, we must remember that we won't be able to choose an unloaded slide. Slides will be loaded on the fly as we run the next slider positions using arrow navigation, point navigation or automatic photo scrolling. Below, I would like to present a screenshot showing how the slider behaves when the "load" option is disabled.

<div class="compsoul-slider compsoul-slider-fade">
  
  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Loading images does not block page loading!</span>
      </h2>
      <div class="compsoul-slide-main">Thanks to the Lazy Loading function, only the necessary images are retrieved from the server, saving transfer, server, and connection.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Web design and creation, online stores, website templates, website modules, and free website templates.">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-1.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-1.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Slider adapted for mobile and touch devices!</span>
      </h2>
      <div class="compsoul-slide-main">The photo show has been adapted for mobile devices and features event handling that will allow you to navigate the slider smoothly.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Slider adapted for mobile and touch devices!">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-2.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-2.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Picture rotator adjusts the background size to the screen width!</span>
      </h2>
      <div class="compsoul-slide-main">Don't unnecessarily load large pictures on small screens, adjust the picture to the screen width. Shrink the screen now and see for yourself!</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Picture rotator adjusts the background size to the screen width">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide picture" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-3.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-3.jpg" alt="Slide picture">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Progress bar with hover pause slideshow feature</span>
      </h2>
      <div class="compsoul-slide-main">Handling the slideshow with CSS animation? It's easy, just point to the element that will be your progress bar and enjoy simple animations.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Progress bar with hover pause slideshow feature">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide image" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-4.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-4.jpg" alt="Slide image">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Animated Photo Slideshow on a Website</span>
      </h2>
      <div class="compsoul-slide-main">Create your own animations, customize the look of the slider to match your website, thanks to the simple class CSS system.</div>
      <a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Animated Photo Slideshow on a Website">Read more</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Slide Photo" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-5.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-5.jpg" alt="Slide Photo">
      </noscript>
    </figure>
  </article>

  <nav class="compsoul-slide-navigation">
    <ul>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Ładowanie zdjęć nie blokuje wczytywania strony!</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Slider dostosowany do urządzeń mobilnych i dotykowych!</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Rotator zdjęć dostosuje rozmiar tła do szerokości ekranu</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Pasek postępu wraz z funkcją zatrzymania przewijania zdjęć po najechaniu.</span>
        </button>
      </li>
      <li class="compsoul-slide-nav">
        <button class="compsoul-slide-point">
          <span class="compsoul-slide-hidden">Animowany pokaz zdjęć na stronie WWW</span>
        </button>
      </li>
    </ul>
  </nav>

  <button class="compsoul-slide-button compsoul-slide-next"><span class="compsoul-slide-hidden">Next slide</span></button>
  <button class="compsoul-slide-button compsoul-slide-prev"><span class="compsoul-slide-hidden">Previous slide</span></button>
  
  <div class="compsoul-slide-timeline">
    <span class="compsoul-slide-hidden">Timeline</span>
  </div>
  
</div>
.compsoul-slider {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.compsoul-slide {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

.compsoul-slide-hidden {
  border: 0;
  clip: rect(0 0 0 0); 
  height: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  margin: -1px;
  width: 1px;
}

.compsoul-slide-content {
  display: inline-flex;
  flex-flow: column wrap;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  margin: 0 auto 48px;
  max-width: 540px;
  width: 90%;
}

.compsoul-slide-content .compsoul-slide-heading {
  color: #ffffff;
  font-size: 32px;
  font-weight: 100;
  margin: 0 0 21px;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 0;
}

.compsoul-slide-content .compsoul-slide-heading:before {
  background: #e7a14f;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.compsoul-slide-content .compsoul-slide-main {
  background: #464972bb;
  color: #d7d8ed;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 21px;
  padding: 21px;
}

.compsoul-slide-content .compsoul-slide-more {
  background: #464972;
  border-radius: 5px;
  color: #d7d8ed;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  margin: 0 auto;
  padding: 8px 16px;
  position: relative;
  text-decoration: none;
  transition: background 0.4s, color 0.4s;
  z-index: 0;
}

.compsoul-slide-content .compsoul-slide-more:hover,
.compsoul-slide-content .compsoul-slide-more:focus {
  background: #e7a14f;
  color: #ffffff;
}

.compsoul-slide {
  height: 100%;
  left: 0;
  position: absolute;
  pointer-events: none;
  top: 0;
  width: 100%;
}

.compsoul-slide.compsoul-active {
  z-index: 1;
  pointer-events: auto;
}

.compsoul-slide .compsoul-slide-figure {
  background: no-repeat center;
  background-size: cover;
  bottom: 0;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.compsoul-slide .compsoul-slide-img {
  display: none;
}

.compsoul-slide-button {
  background: #464972;
  border: none;
  cursor: pointer;
  font-size: 2.6px;
  height: 16em;
  outline: 1px solid #e7a14f00;
  padding: 0;
  transition: outline 0.4s;
  width: 16em;
}

.compsoul-slide-button:focus, .compsoul-slide-button:focus-within {
  outline: 1px solid #e7a14fff;
}

.compsoul-slide-next {
  right: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 5;
}

.compsoul-slide-prev {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 5;
}

.compsoul-slide-next, .compsoul-slide-prev {
  cursor: default;
  opacity: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
}

.compsoul-slide-next.compsoul-active, .compsoul-slide-prev.compsoul-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-slide-next.compsoul-loading, .compsoul-slide-prev.compsoul-loading {
  cursor: progress;
}

.compsoul-slide-next:before, .compsoul-slide-prev:before {
  border-top: 1em solid #d7d8ed;
  border-right: 1em solid #d7d8ed;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate(-25%, 25%);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-slide-next:hover:before, .compsoul-slide-prev:hover:before {
  border-top: 1em solid #e7a14f;
  border-right: 1em solid #e7a14f;
}

.compsoul-slide-next:after, .compsoul-slide-prev:after {
  animation: compsoul-loading 1s infinite linear;
  animation-play-state: paused;
  border-bottom: 1em solid #d7d8ed;
  border-left: 1em solid #d7d8ed;
  border-right: 1em solid #d7d8ed;
  border-top: 1em solid #fff;
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 6em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s, border 0.4s;
  width: 6em;
}

@keyframes compsoul-loading {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.compsoul-slide-next.compsoul-loading:before, .compsoul-slide-prev.compsoul-loading:before {
  opacity: 0;
}

.compsoul-slide-next.compsoul-loading:after, .compsoul-slide-prev.compsoul-loading:after {
  animation-play-state: running;
  cursor: progress;
  opacity: 1;
}

.compsoul-slide-next.compsoul-loading:hover:after, .compsoul-slide-prev.compsoul-loading:hover:after {
  border-top: 1em solid #ff0000;
}

.compsoul-slide-prev:before {
  transform: rotate(-135deg) translate(-25%, 25%);
}

.compsoul-slide-navigation {
  bottom: 21px;
  font-size: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  z-index: 5;
}

.compsoul-slide-navigation ul {
  margin: 0;
  padding: 0;
}

.compsoul-slide-navigation .compsoul-slide-nav {
  display: inline-block;
  cursor: pointer;
}

.compsoul-slide-navigation .compsoul-slide-nav * {
  pointer-events: none;
}

.compsoul-slide-navigation button {
  background: none;
  border: 0;
  box-sizing: content-box;
  display: block;
  font-size: 1px;
  padding: 4em 2em;
}

.compsoul-slide-navigation button:focus, .compsoul-slide-navigation button:focus-within {
  outline: none;
}

.compsoul-slide-navigation .compsoul-slide-point {
  background: #464972;
  border: 1em solid #e7a14f00;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 20em;
  padding: 0;
  position: relative;
  transition: border 0.2s linear;
  width: 20em;
}

.compsoul-slide-navigation .compsoul-active .compsoul-slide-point, .compsoul-slide-navigation button:focus .compsoul-slide-point, .compsoul-slide-navigation button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav:hover .compsoul-slide-point {
  border: 3em solid #e7a14fff;
}

.compsoul-slide-navigation .compsoul-loading button:focus .compsoul-slide-point, .compsoul-slide-navigation .compsoul-loading button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav.compsoul-loading:hover .compsoul-slide-point {
  border: 3em solid #ff0000ff;
}

.compsoul-slide-navigation .compsoul-slide-point:before {
  background: #d7d8ed00;
  border: 2em solid #d7d8ed;
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 10em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.4s, opacity 0.4s;
  width: 10em;
}

.compsoul-slide-navigation .compsoul-slide-point:after {
  animation: compsoul-loading 1s infinite;
  animation-play-state: paused;
  border-bottom: 2em solid #d7d8ed;
  border-left: 2em solid #d7d8ed;
  border-right: 2em solid #d7d8ed;
  border-top: 2em solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  height: 16em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
  width: 16em;
}

.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:before {
  opacity: 0;
}

.compsoul-slide-navigation .compsoul-loaded .compsoul-slide-point:before {
  background: #d7d8ed;
}

.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:after {
  animation-play-state: running;
  opacity: 1;
}

.compsoul-slide-timeline {
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-slide-timeline:before {
  animation: compsoul-slide-timeline 6s linear forwards;
  animation-play-state: paused;
  background: #e7a14f;
  content: "";
  display: block;
  height: 100%;
  transform: translate(-100%, 0);
  width: 100%;
}

.compsoul-slider .compsoul-slide-timeline.compsoul-active:before {
  animation-play-state: running;
}

.compsoul-slider:hover .compsoul-slide-timeline:before {
  animation-play-state: paused;
}

.compsoul-slide-timeline.compsoul-unset:before {
  animation: unset;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate(-100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-fade .compsoul-slide {
  opacity: 0;
  will-change: opacity;
  z-index: 0;
}

.compsoul-slider-fade .compsoul-slide.compsoul-wait {
  opacity: 1;
  z-index: 1;
}

.compsoul-slider-fade .compsoul-slide.compsoul-active {
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.compsoul-slider-fade .compsoul-slide.compsoul-first, .compsoul-slider-fade .compsoul-slide.compsoul-previous {
  transition: unset;
}

.compsoul-slider-vertical {
  overflow: hidden;
}

.compsoul-slider-vertical .compsoul-slide {
  background: transparent;
  will-change: transform;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-previous {
  z-index: 2;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-active {
  z-index: 4;
}

.compsoul-slider-vertical .compsoul-slide.compsoul-direction-down {
  animation: compsoul-slider-vertical-down 0.4s linear forwards;
}

@keyframes compsoul-slider-vertical-down {
  from {
    transform: translate(0, -100%);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-vertical .compsoul-slide.compsoul-direction-up {
  animation: compsoul-slider-vertical-up 0.4s linear forwards;
}

@keyframes compsoul-slider-vertical-up {
  from {
    transform: translate(0, 100%);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-vertical .compsoul-slide.compsoul-first, .compsoul-slider-vertical .compsoul-slide.compsoul-previous {
  animation: unset;
}

.compsoul-slider-horizontal {
  overflow: hidden;
}

.compsoul-slider-horizontal .compsoul-slide {
  background: #ffffff;
  will-change: transform;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
  z-index: 2;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-active {
  z-index: 4;
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-down {
  animation: compsoul-slider-horizontal-left 0.4s linear forwards;
}

@keyframes compsoul-slider-horizontal-left {
  from {
    transform: translate(-100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-up {
  animation: compsoul-slider-horizontal-right 0.4s linear forwards;
}

@keyframes compsoul-slider-horizontal-right {
  from {
    transform: translate(100%, 0);
  }

  to {
    transform: translate(0, 0);
  }
}

.compsoul-slider-horizontal .compsoul-slide.compsoul-first, .compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
  animation: unset;
}

@media (max-width: 840px) {
  .compsoul-slide-next, .compsoul-slide-prev {
    top: auto;
    transform: unset;
    bottom: 12px;
  }
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/slider.js"></script><script> 
  new Slider(".compsoul-slider .compsoul-slide").options({
    load: false
  }).init();
</script>
Loading process with the preload option enabled

As we can see in the above screenshot, when both "load" and "preload" options are disabled, all the slides load simultaneously. To summarize, with the "load" option, we can eliminate one of the serious disadvantages of using a slider on a website, i.e. slowing down the page loading due to the "heavy" images that are part of the slider. So why turn it off? Well, not all sliders contain images. There may be only text or the slider may only consist of two or three images. In such cases, the "load" property may be unnecessary or cause errors. Additionally, it is important to keep in mind that if we want to turn off both "preload" and "load" options at the same time, we must change the slider's structure. We have to load the images using the src attribute, not the data-src attribute, as it is currently done.

Thank You for Reading

We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.