Slider - JS, HTML5, CSS3

Wydajny i szybki slider na stronę internetową który nie blokuje jej wczytywania, posiadający szereg przydatnych opcji jak i kilka animacji wykonanych przy pomocy CSS3.

Slider - JS, HTML5, CSS3

Slider jako klasa biblioteki Comp, czyli jak poruszać zdjęciami bez potrzeby blokowania strony. Slidery, rotatory zdjęć, karuzele posiadają złą sławę wśród projektantów stron internetowy, głównie z racji blokowania procesu renderowania strony i niską konwersje (klikalność), dzięki stworzonemu przez mnie modułowi postaramy się zwalić babę z wozu. Zalety i możliwości slidera:

  • Nawigacja za pomocą strzałek
  • Nawigacja za pomocą kropek
  • Kilka rodzai animacji CSS3
  • Moduł nie blokuje wczytywania strony
  • Szybkość działania
  • Automatyczne przewijanie zdjęć
  • Zatrzymanie slidera po najechaniu kursorem
  • Wysokość rodzica uzależniona od wysokości slidu
  • Kompatybilność modułu z biblioteką jQuery
  • ECMAScript 6
  • RWD

Moduł można umieścić na stronie jako główny slider, rotator zdjęć czy karuzelę banerów reklamowych. Poniżej znajduje się przykład wykorzystania slidera, instrukcja instalacji i lista przydatnych opcji.

Zobacz Demo

DEMO:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

HTML:

<div id="slider" class="slides">
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide1.jpg" alt="Pierwszy slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Nie wczytuj wszystkich zdjęć na raz!</h3>
      <p>Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide2.jpg" alt="Drugi slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Animacje CSS3</h3>
      <p>Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide3.jpg" alt="Trzeci slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Zatrzymaj po najechaniu</h3>
      <p>Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide4.jpg" alt="Czwarty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Wywołaj slider w dowolnym momencie</h3>
      <p>Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide5.jpg" alt="Piąty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Mam już bibliotekę jQuery, nie chcę Comp!</h3>
      <p>Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide6.jpg" alt="Szósty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Slider RWD</h3>
      <p>Slider został dostosowany do urządzeń mobilnych.</p>
    </div>
  </div>

  <nav role="pagination" class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </nav>
  <nav role="pagination" class="arrows">
    <button class="arrow-prev">❮</button>
  </nav>
  <nav role="pagination" class="arrows">
    <button class="arrow-next">❯</button>
  </nav>
</div>

CSS:

.slides {
  overflow: hidden;
  position: relative;
  transition: height 0.4s;
  z-index: 0;
}

.slide {
  display: flex;
  min-height: 600px;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 0;
}

.js .slide {
  position: absolute;
}

.slide > figure {
  background-size: cover;
  background-position: center;
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
}

.slide > figure img.hidden {
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  padding: 0;
  width: auto;
}

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

.slide-description {
  align-self: flex-end;
  padding: 64px 64px 64px 136px;
  position: relative;
  transition: opacity 0.4s;
  max-width: 612px;
  z-index: 0;
}

.slide-description:after {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 32px;
  content: "";
  left: 104px;
  position: absolute;
  right: 32px;
  top: 32px;
  z-index: -1;
}

.slide-description h3 {
  border-left: 6px solid #000;
  color: #fff;
  font-weight: 100;
  font-size: 24px;
  letter-spacing: 0.5px;
  line-height: 32px;
  margin: 0 0 16px 0;
  padding: 4px 0 0 24px;
}

.slide-description p {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  word-spacing: 1px;
}

.dots {
  bottom: 32px;
  display: none;
  font-size: 0;
  letter-spacing: 4px;
  position: absolute;
  right: 24px;
  z-index: 999;
  max-width: 200px;
}

.js .dots {
  display: block;
}

.dot {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  margin-top: 8px;
  transition: background-color 0.6s ease, opacity 0.6s ease;
  width: 16px;
}

.dot:hover {
  background-color: #000;
}

.dots .active {
  background-color: #fff;
}

.dots .loading {
  opacity: 0;
}

.dots .active.error {
  background: #f22613;
}

.arrows {
  display: none;
}

.js .arrows {
  display: block;
}

.arrows .arrow-prev, .arrows .arrow-next {
  background-color: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  padding: 16px;
  top: 50%;
  transform: translate(0, -50%);
  transition: background-color 0.6s ease;
  z-index: 3;
}

.arrows .arrow-prev:hover, .arrows .arrow-next:hover {
  background-color: rgba(0,0,0,0.8);
}

.arrows .arrow-prev {
  left: 0;
}

.arrows .arrow-next {
  right: 0;
}

.first figure, .first .slide-description {
  transition: unset;
}

.slides .slide.prev {
  z-index: 1;
}

.slides .active {
  z-index: 2;
}

.slides.zip figure {
  transform: translate(0, -100%);
}

.slides.zip .slide-description {
  transform: translate(0, 100%);
}

.slides.zip .active figure, .slides.zip .active .slide-description {
  transform: translate(0, 0);
}

.slides.zip .active figure {
  transition: transform 0.4s ease;
}

.slides.zip .active .slide-description {
  transition: transform 0.4s 0.4s ease;
}

.slides.zip .prev figure, .slides.zip .prev .slide-description {
  transition: transform 0.2s 0.8s
}

.slides.chain figure {
  transform: translate(-100%, 0);
}

.slides.chain .slide-description {
  transform: translate(-100%, 0);
}

.slides.chain .active figure, .slides.chain .active .slide-description {
  transform: translate(0, 0);
}

.slides.chain .active figure {
  transition: transform 0.4s ease;
}

.slides.chain .active .slide-description {
  transition: transform 0.4s 0.4s ease;
}

.slides.chain .prev figure, .slides.chain .prev .slide-description {
  transition: transform 0.2s 0.8s
}

.slides.fade .slide figure, .slides.fade .slide .slide-description {
  transform: translate(0, 0);
}

.slides.fade .slide {
  opacity: 0;
}

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

.slides.fade .slide.prev {
  transition: opacity 0.4s 0.4s;
  z-index: 1;
}

.slider-content {
  overflow: hidden;
  width: 100%;
}

.slides.tape {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: unset;
  margin: 0 auto;
  max-width: 980px;
}

.slides.tape .slide {
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  transition: margin-left 0.4s;
}
.slides.tape .slide.first {
  transition: unset;
}

.slides.tape .slide figure, .slides.tape .slide .slide-description {
  opacity: 0.4;
  transition: opacity 0.4s;
}

.slides.tape .slide figure {
  bottom: -12px;
  left: -12px;
  right: -12px;
  top: -12px;
}

.slides.tape .slide.active figure, .slides.tape .slide.active .slide-description {
  opacity: 1;
}

@media screen and (max-width: 980px) {
  .js .dots {
    display: none;
  }

  .slide {
    justify-content: center;
  }

  .slide-description {
    padding: 74px;
  }

  .slide-description:after {
    left: 50px;
    right: 50px;
  }

  .slide-description h3 {
    border-left: 0;
    padding: 0;
  }
}

JS:

<script src="[TUTAJ TWOJA ŚCIEŻKA]/comp.js"></script>
<script src="[TUTAJ TWOJA ŚCIEŻKA]/slider.js"></script>
<script>
(function () {
  new Slider("#slider .slide").options({
      prev: "#slider nav button.arrow-prev",
      next: "#slider nav button.arrow-next",
      nav: "#slider nav.dots span"
  }).init();
})();
</script>

Instalacja:

HTML:

Kod HTML5 slidera zawiera, między innymi:

  • listę slidów w której znajdują się znaczniki <figure> odpowiedzialne za wyświetlanie tła w naszych slidach
  • zdjęcia umieszczone za pomocą znaczników <img> dzięki którym skrypt odnajduje lokalizacje grafik na serwerze, blokuje ich wczytywanie i przypisuje do znaczników <figure>
  • element blokowy z klasą class="slide-description" zawierający nagłówek poszczególnego slidu <h3 class="slide-header">, oraz jego opis
  • dodatkowo w kodzie HTML5, za pomocą znacznika <nav class="dots"> możemy umieścić nawigacje punktową bądź strzałkową <nav class="arrows">

Kod dostępny na początku artykułu pod nagłówkiem HTML5, umieszczamy na stronie internetowej w pożądanym miejscu. Ważne aby pamiętać o możliwości modyfikacji kodu HTML, przykładowo jeżeli nie potrzebujemy którejś z nawigacji, bądź obydwu, po prostu nie umieszczamy jej w kodzie HTML i podczas wywołania skryptu. W dalszej części artykułu pojawią się przykłady obrazujące wspomniany wygląd slidera.

CSS:

Do poprawnego działania naszego skryptu oraz animacji niezbędny będzie kod CSS, który umieszczamy w naszym zewnętrznym pliku CSS. Przygotowany przez mnie CSS jest jedynie domyślną wizualizacją wyglądu slidera, możemy zmieniać jego kolorystykę, wysokość, czas trwania animacji, tworzyć zaawansowane animacje w poszczególnych slidach, modyfikować wygląd nawigacji czy ustawienie poszczególnych elementów. Kod do wklejenia znajduje się na początku artykułu pod nagłówkiem CSS.

JS:

Kod JS niezbędny do uruchomienia naszego skryptu znajduje się w dwóch plikach comp.js oraz slider.js należy pobrać wspomniane pliki, zapisać je na serwerze i umieścić tuż przed zamknięciem znacznika </body>, sposób w jaki należy tego dokonać został przedstawiony na początku artykułu pod nagłówkiem JS. Pozostało nam jeszcze wywołanie slidera, które również zostało przedstawione pod nagłówkiem JS. Reasumując, pobieramy pliki z biblioteką i sliderem, umieszczamy je na serwerze, kopiujemy zawartość artykułu znajdującą się pod nagłówkiem JS, zmieniamy ścieżki do wcześniej skopiowanych plików i odświeżamy stronę.

Ustawienia:

Slider posiada szereg ustawień które pozwalają dostosować jego wygląd i zachowanie, aby zmienić daną opcje wystarczy nadać jej pożądaną wartość podczas przekazywania obiektu, jako parametru metody options. Wiem że brzmi to skomplikowanie, ale to nic trudnego poniżej kilka przykładów ze zmianą opcji oraz uzyskanym rezultatem.

Slider z ustawieniami domyślnymi:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

HTML:
 <div id="slider1" class="slides">
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide1.jpg" alt="Pierwszy slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Nie wczytuj wszystkich zdjęć na raz!</h3>
      <p>Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide2.jpg" alt="Drugi slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Animacje CSS3</h3>
      <p>Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide3.jpg" alt="Trzeci slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Zatrzymaj po najechaniu</h3>
      <p>Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide4.jpg" alt="Czwarty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Wywołaj slider w dowolnym momencie</h3>
      <p>Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide5.jpg" alt="Piąty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Mam już bibliotekę jQuery, nie chcę Comp!</h3>
      <p>Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide6.jpg" alt="Szósty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Slider RWD</h3>
      <p>Slider został dostosowany do urządzeń mobilnych.</p>
    </div>
  </div>
</div>
JS:
<script>
(function () {
  new Slider("#slider1 .slide").init();
})();
</script>

Slider z animacją typu zip:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
<script>
(function () {
  new Slider("#slider2 .slide").options({
      prev: "#slider2 nav button.arrow-prev",
      next: "#slider2 nav button.arrow-next",
      nav: "#slider2 nav.dots span",
      animation: "zip"
  }).init();
})();
</script>

Slider z animacją typu fade:

Animacja fade, jest domyślną animacją slidera.

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
<script>
(function () {
  new Slider("#slider3 .slide").options({
      prev: "#slider3 nav button.arrow-prev",
      next: "#slider3 nav button.arrow-next",
      nav: "#slider3 nav.dots span",
      animation: "fade"
  }).init();
})();
</script>

Slider z animacją typu chain:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
<script>
(function () {
  new Slider("#slider4 .slide").options({
      prev: "#slider4 nav button.arrow-prev",
      next: "#slider4 nav button.arrow-next",
      nav: "#slider4 nav.dots span",
      animation: "chain"
  }).init();
})();
</script>

Slider z animacją typu tape:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

HTML:
<div class="slider-content">
  <div id="slider5" class="slides">
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide1.jpg" alt="Pierwszy slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Nie wczytuj wszystkich zdjęć na raz!</h3>
        <p>Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide2.jpg" alt="Drugi slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Animacje CSS3</h3>
        <p>Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide3.jpg" alt="Trzeci slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Zatrzymaj po najechaniu</h3>
        <p>Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide4.jpg" alt="Czwarty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Wywołaj slider w dowolnym momencie</h3>
        <p>Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide5.jpg" alt="Piąty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Mam już bibliotekę jQuery, nie chcę Comp!</h3>
        <p>Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide6.jpg" alt="Szósty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Slider RWD</h3>
        <p>Slider został dostosowany do urządzeń mobilnych.</p>
      </div>
    </div>
  </div>
</div>
JS:
<script>
(function () {
  new Slider("#slider5 .slide").options({
      animation: "tape"
  }).init();
})();
</script>

Slider z nawigacją strzałkową:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

HTML:
<div id="slider6" class="slides">
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide1.jpg" alt="Pierwszy slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Nie wczytuj wszystkich zdjęć na raz!</h3>
      <p>Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide2.jpg" alt="Drugi slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Animacje CSS3</h3>
      <p>Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide3.jpg" alt="Trzeci slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Zatrzymaj po najechaniu</h3>
      <p>Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide4.jpg" alt="Czwarty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Wywołaj slider w dowolnym momencie</h3>
      <p>Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide5.jpg" alt="Piąty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Mam już bibliotekę jQuery, nie chcę Comp!</h3>
      <p>Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.</p>
    </div>
  </div>
  <div class="slide">
    <figure>
      <img class="hidden" src="uploads/images/blog/slide6.jpg" alt="Szósty slide">
    </figure>
    <div class="slide-description">
      <h3 class="slide-header">Slider RWD</h3>
      <p>Slider został dostosowany do urządzeń mobilnych.</p>
    </div>
  </div>
  <nav role="pagination" class="arrows">
    <button class="arrow-prev">❮</button>
  </nav>
  <nav role="pagination" class="arrows">
    <button class="arrow-next">❯</button>
  </nav>
</div>
JS:
  <script>
  (function () {
    new Slider("#slider6 .slide").options({
        prev: "#slider6 nav button.arrow-prev",
        next: "#slider6 nav button.arrow-next"
    }).init();
  })();
  </script>

Slider nawigowany za pomocą kropek:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

HTML:
  <div id="slider7" class="slides">
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide1.jpg" alt="Pierwszy slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Nie wczytuj wszystkich zdjęć na raz!</h3>
        <p>Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide2.jpg" alt="Drugi slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Animacje CSS3</h3>
        <p>Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide3.jpg" alt="Trzeci slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Zatrzymaj po najechaniu</h3>
        <p>Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide4.jpg" alt="Czwarty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Wywołaj slider w dowolnym momencie</h3>
        <p>Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide5.jpg" alt="Piąty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Mam już bibliotekę jQuery, nie chcę Comp!</h3>
        <p>Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.</p>
      </div>
    </div>
    <div class="slide">
      <figure>
        <img class="hidden" src="uploads/images/blog/slide6.jpg" alt="Szósty slide">
      </figure>
      <div class="slide-description">
        <h3 class="slide-header">Slider RWD</h3>
        <p>Slider został dostosowany do urządzeń mobilnych.</p>
      </div>
    </div>
  
    <nav role="pagination" class="dots">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </nav>
  </div>
JS:
<script>
(function () {
  new Slider("#slider7 .slide").options({
      nav: "#slider7 nav.dots span"
  }).init();
})();
</script>

Slider bez opcji automatycznego przewijania:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
  <script>
  (function () {
    new Slider("#slider8 .slide").options({
        prev: "#slider8 nav button.arrow-prev",
        next: "#slider8 nav button.arrow-next",
        nav: "#slider8 nav.dots span",
        auto: false
    }).init();
  })();
  </script>

Czas przewijania slidera ustawiony na 10 sekund:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
  <script>
  (function () {
    new Slider("#slider9 .slide").options({
        prev: "#slider9 nav button.arrow-prev",
        next: "#slider9 nav button.arrow-next",
        nav: "#slider9 nav.dots span",
        time: 10000
    }).init();
  })();
  </script>

Slider z wyłączonym zatrzymaniem po najechaniu:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
  <script>
  (function () {
    new Slider("#slider10 .slide").options({
        prev: "#slider10 nav button.arrow-prev",
        next: "#slider10 nav button.arrow-next",
        nav: "#slider10 nav.dots span",
        pause: false
    }).init();
  })();
  </script>

Slider z wyłączonym automatycznym wczytywaniem zdjęć:

Nie wczytuj wszystkich zdjęć na raz!

Dzięki właściwości "load" slieder nie wczytuje wszystkich zdjęć podczas ładowania strony, co skutkuje brakiem blokowania innych zasobów i szybszym ukończeniem procesu renderowania strony.

Animacje CSS3

Dzięki zastosowaniu animacji CSS3 nawet początkujący programista stron internetowych, może bez trudu pisać własne animacje dla pojedynczych slidów.

Zatrzymaj po najechaniu

Dzięki opcji "pause" po najechaniu kursorem slide zatrzyma się, co pozwoli podziwiać zdjęcia bądź przeczytać tekst w nim zawarty.

Wywołaj slider w dowolnym momencie

Konstrukcja slidera umożliwia uruchomienie rotacji zdjęć w dowolnym momencie, po wykonaniu akcji czy po wczytaniu się strony.

Mam już bibliotekę jQuery, nie chcę Comp!

Jeżeli posiadasz już zainstalowaną bibliotekę jQuery, nie musisz pobierać i instalować biblioteki Comp. Slider został dostosowany do popularnej biblioteki jQuery.

Slider RWD

Slider został dostosowany do urządzeń mobilnych.

JS:
  <script>
  (function () {
    new Slider("#slider11 .slide").options({
        prev: "#slider11 nav button.arrow-prev",
        next: "#slider11 nav button.arrow-next",
        nav: "#slider11 nav.dots span",
        load: false
    }).init();
  })();
  </script>

Domyślne opcje slidera z komentarzem roboczym (:

<script>
(function () {
  new Slider("#slider .slide").options({
      first: 0, // Pozycja od której rozpocznie się slider

      activeClassName: "active", // Nazwa klasy aktywnego slidu
      prevClassName: "prev", // Nazwa klasy slidu który był poprzednio aktywny (pomocne przy animacjach CSS)
      firstClassName: "first", // Nazwa nadawany na pierwszy (first: 0) slide podczas pierwszego uruchomienia
      loadingClassName: "loading", // Nazwa nadawana na slide oraz nawigację za pomocą kropek podczas wczytywania
      loadErrorClassName: "error", // Nazwa nadawana na slide oraz nawigację za pomocą kropek w przypadku kiedy slide się nie wczytał
      loadedClassName: "loaded", // Nazwa nadawana na slide oraz nawigację za pomocą kropek w przypadku kiedy slide się wczytał
      jsClassName: "js", // Nazwa nadawana na slider w celu wykrycia obsługiwania przez użytkownika JS
      animation: "fade", // Jedna z nazw animacji zip|fade|chain|tape

      prev: false, // Ciąg znaków wskazujący na element, który po kliknięciu będzie przełączał nam slider (#slider nav button.arrow-next), składnia CSS
      next: false, // Ciąg znaków wskazujący na element, który po kliknięciu będzie przełączał nam slider (#slider nav button.arrow-prev), składnia CSS
      auto: true, // Wskazuje czy slider ma się przełączać automatycznie
      time: 5000, // Czas pomiędzy slidami
      pause: true, // Wskazuje czy slider ma się zatrzymywać po najechaniu na aktywny slide

      nav: false, // Ciąg znaków wskazujący na elementy, które po kliknięciu będą przełączały nam slider (#slider nav.dots span), składnia CSS, ilość elementów musi być tożsama z ilością slidów
      parent: true, // Ciąg znaków wskazujący na element rodzica
      height: true, // Wskazuje czy rodzic slidera ma zmieniać wysokość
      load: true // Wskazuje czy zdjęcia mają być wczytywane za pomocą AJAX
  }).init();
})();
</script>

Jak zawsze zachęcam do komentowania (komentarz zostanie wyświetlony na stronie po zaakceptowaniu).

Gotowe szablony stron www z wdrożeniem!

Komentarze:

Admin

22.03.2019
@Szynku - Dziękuje za słowa krytyki :)

Szynku

22.03.2019
Porównując z innymi sliderami bez porównania najłatwiejszy w doszukaniu się kodu oraz bardzo efektywny i miły dla oka.

Admin

13.12.2018
@andre - Proszę uprzejmie, w razie pytań pozostaje do dyspozycji. Zachęcam do polubienia naszej strony na FB i oceny naszych skryptów.

andre

13.12.2018
Genialny material, Bardzo mi pomogles, Dziekuje

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".