Automatically Loaded Content Slider

Boost Slider Performance Preloading Content for Faster Loading

The "preload" property is responsible for systematically loading the next slides. The purpose of this functionality is to speed up page loading. During rendering, loading of all the pictures is blocked and then the first slide is loaded which starts the next slides after loading. The timeline below shows the order of loading for five sample slides. As the "load" functionality overlaps with "preload", for better illustration it will be turned off:

Picture loading process with preload option turned on

As can be seen, the pictures have been loaded in accordance with the order of addition. The process taking place in the slider during rendering can be described as follows:

The picture loading process is blocked
The first picture is loaded
The remaining content on the page "queues" during rendering
Once the first picture is loaded, if the queue is free, the next pictures are loaded

This functionality is currently in beta phase. If you have problems with the smoothness of the slider, simply turn off this option.

<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>

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.

Website design and development, online stores, website templates, website modules and free websites.

Streamline Your Slider