Slider
Jeżeli miałbym wymienić najpopularniejsze moduły używane przez programistów podczas tworzenia stron www w czołówce z pewnością znalazłby się slider. Ale czym właściwie jest slider? Jak sama nazwa wskazuje to pokaz slajdów na stronie www, zwany również rotatorem zdjęć. Można by rzec, że ilu programistów tyle slider'ów, jednak dobry slider musi spełniać kilka podstawowych założeń:
- Slider nie może blokować wczytywania strony - jak powszechnie wiadomo, im szybciej wczyta się strona, tym więcej użytkowników na niej zostanie.
- Powinien mieć opcjonalną automatyczną zmianę zdjęć - bo nie każdy zauważy, że Twój slider ma nawigacje i może pominąć kolejne slajdy.
- Nie powinien wczytywać dużych zdjęć na urządzenia mobilne.
- Powinien być lekki i nie wymagać zewnętrznych zależności, typu jQuery czy Bootstrap.
- Animacje powinny być łatwe do edycji i zoptymalizowane w celu osiągnięcia jak najwyższej wydajności.
- Slider powinien posiadać intuicyjną nawigację punktową i strzałkową.
- Dodatkowo, zdjęcia powinny być zmieniane za pomocą gestów na urządzeniach dotykowych.
Powyższe założenia pozwoliły mi stworzyć Compsoul Slider - w pełni darmowy i profesjonalny moduł. Na moim blogu znajdziesz również instrukcję umieszczenia slidera, opis jego funkcjonalności, zalety stosowania oraz będziesz mógł zakupić płatne wdrożenie na swojej stronie www, a w razie problemów skorzystać z bezpłatnej pomocy.
Przykład slidera z domyślnymi ustawieniami:
<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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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.pl/uploads/js/compsoul.js"></script><script src="https://compsoul.pl/uploads/js/slider.js"></script><script>
new Slider(".compsoul-slider .compsoul-slide").init();
</script>
Komentarze
mae40c,Artykuł,Mariusz