Photo Slider for Your Website

Optimize Your Website's Performance with a Lightweight and Intuitive Slider
Simple, Powerful, Mobile Photo Slider HTML, JS, CSS

Get the Best Image Slider for Your Website A Mobile-Friendly, Lightweight, and User-Friendly Option

If I were to list the most popular modules used by developers when creating websites in the top spot would certainly be the slider. But what exactly is a slider? As the name suggests, it's a slideshow on a website, also known as an image rotator. One could say that as many programmers as many sliders, but a good slider must meet a few basic assumptions:

  • The slider must not block the loading of the page - as is widely known, the faster the page loads, the more users will stay on it.
  • It should have optional automatic image changes - because not everyone will notice that your slider has navigation and may skip the next slides.
  • It should not load large images on mobile devices.
  • It should be lightweight and not require external dependencies, like jQuery or Bootstrap.
  • Animations should be easy to edit and optimized for maximum performance.
  • The slider should have intuitive point and arrow navigation.
  • Additionally, images should be changeable via gestures on touch devices.

The above assumptions allowed me to create Compsoul Slider - a fully free and professional module. On my blog you will also find instructions for placing the slider, a description of its functionality, the advantages of using it, and you will be able to purchase a paid implementation for your website, and if you have any problems, you can get free help.

An example of a slider with default 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").init();
</script>

Installation

We can divide the module installation process into the following steps:

  1. Installation of the Compsoul library Compsoul
  2. Slider module installation
  3. Instance with settings
  4. HTML code
  5. CSS code

Due to the asynchronous nature of the module, it requires running through a server for proper operation. Running the module in a browser directly from disk is not possible for security reasons.

JS

Installing JavaScript on the site comes down to downloading the files, copying the code responsible for importing the files and declaring the instance. Note that the script requires a server to work properly. You can freely edit the instance settings and the module file itself.

Installing the Compsoul Library

Installation Instructions:

  • Click on the link to download the library: Compsoul Library
  • Save the file to a specific location and add its path to the src attribute of the <script> tag. It's important to pay close attention to the file path to avoid common installation errors.
  • Place the <script> tag just before the closing body tag.

Example Code:

    <!-- Page content -->
    <script src="[YOUR PATH HERE]/compsoul.js"></script>
    <script src="[YOUR PATH HERE]/[YOUR MODULE FILE HERE]"></script>
    <script>
      new Example(".example").init();
    </script>
  </body>
</html>

Slider module installation

  • You should download the module by clicking on this link.
  • We save the file to a specific location, which we then put in the src attribute of the tag <script>. It is very common to set the path incorrectly during installation, so pay special attention to this point.
  • We insert the tag <script> just behind the previously added Compsoul library.

Importing the class required for the slider to work properly is done by appending the appropriate file (click to download). The import of the file is done with the tag <script>, to which the corresponding src attribute pointing to the file (click to download). Below is an example of the correct installation of the slider, for files located in the root directory of the site (remember to set the correct paths for the downloaded files):

    <!-- Page content -->
    <script src="[YOUR PATH HERE]/compsoul.js"></script>
    <script src="[YOUR PATH HERE]/slider.js"></script>
    <script>
      new Slider(".compsoul-slider .compsoul-slide").init();
    </script>
  </body>
</html>

Slider module instantiation

Below are all possible settings of the slider. I tried to give them names analogous to their purpose. Subsequent sub-pages of the entry (menu on the left side of the screen or in the lower right corner) accurately present the settings with all possible options and their description.

    <!-- Treść strony -->
    <script src="compsoul.js"></script>
    <script src="slider.js"></script>
    <script>
      new Slider(".compsoul-slider .compsoul-slide").options({
        classActive: "compsoul-active",
        classFirst: "compsoul-first",
        classNext: "compsoul-next",
        classPrev: "compsoul-prev",
        classPrevious: "compsoul-previous",
        classLoaded: "compsoul-loaded",
        classLoading: "compsoul-loading",
        classError: "compsoul-error",
        classUnset: "compsoul-unset",
        classAnimation: "compsoul-animation",
        classWait: "compsoul-wait",
        classDirectionUp: "compsoul-direction-up",
        classDirectionDown: "compsoul-direction-down",

        selector: selector,

        next: ".compsoul-slide-next",
        prev: ".compsoul-slide-prev",
        nav: ".compsoul-slide-nav",
        timeline: ".compsoul-slide-timeline",
        parent: false,
        height: false,

        cover: true,
        sliderCover: "figure",
        sliderImg: "figure img",

        animation: true,
        animationend: false,

        load: true,
        preload: true,
        first: 0,
        loop: true,

        responsive: {
          400: {
            loop: false
          },
          800: {
            loop: true
          },
          1300: {
            loop: false
          }
        }
      }).init();
    </script>
  </body>
</html>

HTML

Place the HTML code anywhere on the page, but remember to import scripts below the HTML slider code. The slider consists of: a list of pictures, a progress bar, arrow navigation, and dot navigation. If you want to remove any of the mentioned elements, simply don't add it in the code. The parent element of the slider, i.e.: <div class="compsoul-slider compsoul-slider-fade">, contains the class (in this case compsoul-slider-fade) responsible for the slider appearance and animation type. You can read more on the subpage describing the slider appearance (left-side menu or lower right corner).

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

CSS

We change the appearance of the slider using CSS styles. The sheet is divided into two styles: those responsible for appearance and those responsible for functionality. The styles have been constructed in a way that does not conflict with popular CSS libraries. Paste the following code into your stylesheet anywhere.

.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;
  }
}

Demo

Below is an example of a slider with default settings. Using the window below, check the default module code. Don't forget to switch tabs to check the HTML, CSS and JS code respectively.

<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").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.