Responsive Mobile Slider

RWD - The Key to Optimal User Experience Implementing HTML, CSS, and JS for Mobile Optimization

The slider has been adapted for mobile devices in two aspects. The first is loading photos depending on the screen size, and the second is changing the settings according to the declared resolution ranges. The module allows you to change the settings using an object containing a list of widths below which certain settings will apply:

<script>
new Slider(".compsoul-slider .compsoul-slide").options({
  responsive: {
    1300: {
      loop: false,
      load: false,
      preload: false
    }
  }
}).init();
</script>

The above instance contains an "responsive" object that stores settings for screens with a width up to 1300px. Responsive takes as its value an object that consists of width declarations, below which the screen resolution settings expressed in pixels will apply. The sample instance changes the module settings for a page with a relative width less than 1300px by changing the following settings: "loop", "load", and "preload". When the browser window exceeds 1300px in width, the default settings will be loaded and the module will be reloaded. Declaring more than one threshold is done by adding additional objects containing screen widths in increasing order:

<script>
new Slider(".compsoul-slider .compsoul-slide").options({
  classActive: "desktop-active",
  responsive: {
    400: {
      classActive: "mobile-active"
    },
    800: {
      classActive: "tablet-active"
    },
    1300: {
      classActive: "laptop-active"
    }
  }
}).init();
</script>

The added instance changes the settings for various resolutions:

Above 1300px - the value of the class responsible for activation has been changed to: "desktop-active"
Below 1300px to 800px - the value of "classActive" has been changed to: "laptop-active"
Below 800px to 400px - the value of "classActive" has been changed to: "tablet-active"
Below 400px - the value of "classActive" has been changed to: "mobile-active"

The number of declared settings is arbitrary, but remember to maintain a increasing order.

Additionally, the module has the functionality of loading different images, depending on the screen resolution. The implementation of this functionality is done by editing the HTML code of the slider:

<img class="compsoul-slide-img compsoul-slide-hidden" alt="Tekst alternatywny" data-src="default.jpg" data-480="telefon.jpg" data-800="tablet.jpg" data-1280="laptop.jpg" src="missing.jpg">

Declaring resolutions is done by adding a "data" attribute and a suffix containing the given resolution. For example: for the "data-480" attribute, for a browser window with dimensions below 480px, the image from the path that is the value of the "data-480" attribute will be loaded. The functionality works similarly in the other cases, as we can observe from the example added above. It is important to maintain an increasing order of attributes.

<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">Ładowanie zdjęć nie blokuje wczytywania strony!</span>
      </h2>
      <div class="compsoul-slide-main">Dzięki funkcji Lazy Loading pobieraj z serwera tylko te zdjęcia które są potrzebne, oszczędzając transfer, serwer i łącze.</div>
      <a class="compsoul-slide-more" href="http://compsoul.pl" target="_blank" title="Projektowanie i tworzenie stron WWW, sklepy internetowe, szablony stron WWW, moduły stron internetowych oraz darmowe szablony stron WWW.">Czytaj więcej</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Zdjęcie slajdu" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-1.jpg"
        data-480="uploads/images/blog/slider/slide-1-480.jpg"
        data-800="uploads/images/blog/slider/slide-1-800.jpg"
        data-1280="uploads/images/blog/slider/slide-1-1280.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-1.jpg" alt="Zdjęcie slajdu">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Slider dostosowany do urządzeń mobilnych i dotykowych!</span>
      </h2>
      <div class="compsoul-slide-main">Pokaz zdjęć został dostosowany do urządzeń mobilnych, posiada obsługę zdarzeń które bezproblemowo pozwolą Ci nawigować sliderem.</div>
      <a class="compsoul-slide-more" href="http://compsoul.pl" target="_blank" title="Slider dostosowany do urządzeń mobilnych i dotykowych!">Czytaj więcej</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Zdjęcie slajdu" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-2.jpg"
        data-480="uploads/images/blog/slider/slide-2-480.jpg"
        data-800="uploads/images/blog/slider/slide-2-800.jpg"
        data-1280="uploads/images/blog/slider/slide-2-1280.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-2.jpg" alt="Zdjęcie slajdu">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Rotator zdjęć dostosuje rozmiar tła do szerokości ekranu</span>
      </h2>
      <div class="compsoul-slide-main">Nie wczytuj niepotrzebnie dużych zdjęć na małych ekranach, dostosuj zdjęcie do szerokości ekranu. Zmniejsz teraz ekran i przekonaj się sam!</div>
      <a class="compsoul-slide-more" href="http://compsoul.pl" target="_blank" title="Rotator zdjęć dostosuje rozmiar tła do szerokości ekranu">Czytaj więcej</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Zdjęcie slajdu" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-3.jpg"
        data-480="uploads/images/blog/slider/slide-3-480.jpg"
        data-800="uploads/images/blog/slider/slide-3-800.jpg"
        data-1280="uploads/images/blog/slider/slide-3-1280.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-3.jpg" alt="Zdjęcie slajdu">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Pasek postępu wraz z funkcją zatrzymania przewijania zdjęć po najechaniu.</span>
      </h2>
      <div class="compsoul-slide-main">Obsługa przewijania slidera za pomocą animacji CSS? Nic prostszego, wskaż element który ma być Twoim paskiem postępu i ciesz się prostymi animacjami.</div>
      <a class="compsoul-slide-more" href="http://compsoul.pl" target="_blank" title="Pasek postępu wraz z funkcją zatrzymania przewijania zdjęć po najechaniu.">Czytaj więcej</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Zdjęcie slajdu" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-4.jpg"
        data-480="uploads/images/blog/slider/slide-4-480.jpg"
        data-800="uploads/images/blog/slider/slide-4-800.jpg"
        data-1280="uploads/images/blog/slider/slide-4-1280.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-4.jpg" alt="Zdjęcie slajdu">
      </noscript>
    </figure>
  </article>

  <article class="compsoul-slide">
    <div class="compsoul-slide-content">
      <h2 class="compsoul-slide-heading">
        <span class="compsoul-slide-title">Animowany pokaz zdjęć na stronie WWW</span>
      </h2>
      <div class="compsoul-slide-main">Twórz własne animacje, dostosuj wygląd slidera do własnej strony strony internetowej, dzięki prostemu systemowi class CSS.</div>
      <a class="compsoul-slide-more" href="http://compsoul.pl" target="_blank" title="Animowany pokaz zdjęć na stronie WWW">Czytaj więcej</a>
    </div>
    <figure class="compsoul-slide-figure">
      <img class="compsoul-slide-img" alt="Zdjęcie slajdu" 
        src="uploads/images/blank.png"
        data-src="uploads/images/blog/slider/slide-5.jpg"
        data-480="uploads/images/blog/slider/slide-5-480.jpg"
        data-800="uploads/images/blog/slider/slide-5-800.jpg"
        data-1280="uploads/images/blog/slider/slide-5-1280.jpg"
      >
      <noscript>
        <img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-5.jpg" alt="Zdjęcie slajdu">
      </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">Następny slajd</span></button> 
  <button class="compsoul-slide-button compsoul-slide-prev"><span class="compsoul-slide-hidden">Poprzedni slajd</span></button>

  <div class="compsoul-slide-timeline">
    <span class="compsoul-slide-hidden">Oś czasu</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({
  responsive: {
    1300: {
      loop: false,
      load: true,
      preload: true
    }
  }
}).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.