Slider z opiniami w html, css i JavaScript
Utworzyłam prosty i lekki skrypt slidera tekstowego, który może służyć jako slider opinii, recenzji, referencji. Przydatna i dość często spotykana funkcja na stronach, na których umieszczane są opinie klientów na temat usług firmy czy opinii o produkcie. Takie opinie dodaje się ręcznie, bo jest to prosty skrypt na stronę html. Za pomocą styli css odpowiednio nadany jest wygląd, a za pomocą javascript taki slider umożliwia przesuwanie opinii w bok za pomocą strzałek oraz kółeczek.
Wstawiamy kod slidera w strukturę strony html:
<!-- START: SLIDESHOW --->
<div class="slideshow">
<div class="slides showSlides">
<div class="numbertext">1 / 4</div>
<div class="slides-text">
<p>Lorem ipsum dolor sit amet. Vel ipsam pariatur sit reiciendis aspernatur est dolor ullam. Et perspiciatis vero quo alias nobis et doloribus error aut voluptatem molestiae!
Ad provident facere aut tempora placeat rem repellat rerum? Hic alias beatae in voluptatem autem est exercitationem sunt quo odio itaque. Ut maiores corporis est repudiandae minima ut dolor voluptatem. At obcaecati quos in galisum enim sed magnam voluptates aut similique internos. <br><br>
<strong>Adam i Ewa - <a href="https://www.adresstrony.pl"
target="_blank">www.adresstrony.pl</a></strong>
</p>
</div>
</div>
<!--------->
<div class="slides">
<div class="numbertext">2 / 4</div>
<div class="slides-text">
<p>Lorem ipsum dolor sit amet. Ut facere nobis a asperiores nostrum ut fuga enim non voluptas quae qui accusantium velit et repellendus voluptatem. Id perspiciatis dolor id consectetur tempore vel minima quia sit voluptatum saepe ea vero esse et dolores esse est quas veritatis.
Eum excepturi voluptatem aut placeat aspernatur qui voluptates sint sit cumque odio nam dolor porro qui pariatur molestias quo mollitia dicta. Non nihil odio et nesciunt saepe ea praesentium fugit aut similique quis eum nemo nihil At aperiam quod. <br><br>
<strong>Firma na medal</strong>
</p>
</div>
</div>
<!------->
<div class="slides">
<div class="numbertext">3 / 4</div>
<div class="slides-text">
<p>Lorem ipsum dolor sit amet. Et aliquid ullam non corporis numquam et dignissimos optio vel sint Quis. Qui molestiae modi vel vero animi et enim quae vel soluta perferendis?
Qui adipisci dolore aut nisi maxime ex impedit expedita sed vitae omnis sit omnis alias et consequatur adipisci ut omnis minima. Aut optio autem ab necessitatibus similique in voluptas perferendis quo quasi pariatur aut optio animi sit numquam numquam.<br><br>
<strong>Gospodarstwo Agroturystyczne</strong>
</p>
</div>
</div>
<!-------->
<div class="slides">
<div class="numbertext">4 / 4</div>
<div class="slides-text">
<p>Lorem ipsum dolor sit amet. Ut consequatur error eos repudiandae blanditiis est sunt nesciunt eum quis officia qui explicabo quas nam magnam omnis. Et voluptate repellendus est mollitia consequatur est deleniti modi nam illum sunt.
Quo voluptates velit sit velit repellendus aut amet odio est nihil placeat? Ut placeat magnam a autem culpa et sequi laborum? In nisi quis qui voluptatibus ducimus est inventore consequatur aut saepe tempora? <br><br>
<strong>Firma sprzątająca</strong>
</p>
</div>
</div>
<!------->
<!-- Next and previous buttons -->
<div class="prev" onclick="plusSlides(-1)" tabindex="0"
onkeydown="return event.keyCode != 13 || plusSlides(-1);"><span>❮</span></div> <div class="next"
onclick="plusSlides(1)" tabindex="0"
onkeydown="return event.keyCode != 13 || plusSlides(1);"><span>❯</span></div>
<br>
<!-- The dots/circles -->
<div style="text-align:center"> <span class="dot activeDot" onclick="currentSlide(1)" tabindex="0"
onkeydown="return event.keyCode != 13 || currentSlide(1);"></span><span class="dot"
onclick="currentSlide(2)" tabindex="0"
onkeydown="return event.keyCode != 13 || currentSlide(2);"></span><span class="dot"
onclick="currentSlide(3)" tabindex="0"
onkeydown="return event.keyCode != 13 || currentSlide(3);"></span><span class="dot"
onclick="currentSlide(4)" tabindex="0"
onkeydown="return event.keyCode != 13 || currentSlide(4);"></span></div>
</div>
<!--- END : SLIDESHOW --->
Jest trochę tego kodu, a to dlatego, że sporo miejsca zajmują przecież opinie, a jest ich 4 w przykładzie powyżej. Jeśli chcemy dodać więcej opinii, to kopiujemy kod jednej opinii i wklejamy niżej. Dla przykładu kopiujemy ostatni kod opinii:
<div class="slides">
<div class="numbertext">4 / 4</div>
<div class="slides-text">
<p>Lorem ipsum dolor sit amet. Ut consequatur error eos repudiandae blanditiis est sunt nesciunt eum quis officia qui explicabo quas nam magnam omnis. Et voluptate repellendus est mollitia consequatur est deleniti modi nam illum sunt.
Quo voluptates velit sit velit repellendus aut amet odio est nihil placeat? Ut placeat magnam a autem culpa et sequi laborum? In nisi quis qui voluptatibus ducimus est inventore consequatur aut saepe tempora? <br><br>
<strong>Firma sprzątająca</strong>
</p>
</div>
</div>
<!------->
I tak możemy kilka razy wkleić i będzie ich więcej. Należy jeszcze dodać kółeczka na dół slidera, bo jest ich tylko 4. Na dole, gdzie mamy komentarz: <!– The dots/circles –> kopiujemy kod:
<span class="dot" onclick="currentSlide(4)" tabindex="0" onkeydown="return event.keyCode != 13 || currentSlide(4);"></span>W powyższym kodzie zmieniamy numery z 4 na 5. W dwóch miejscach zmieniamy, bo znajdują się tam dwie czwórki w nawiasach (4). Od teraz mamy więcej opinii i pojawiły się dodatkowe kółeczka.
Wstawiamy kod JavaScript
W strukturze html strony, przed znacznikiem </body> wstawiamy kod JavaScript:
<script src="slider.js"></script>Musimy też utworzyć oddzielny plik slider.js, który będzie np. w głównym katalogu ze stroną. W tym pliku wstawiamy kod js:
//SLIDESHOW
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("showSlides");
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeDot", "");
}
slides[slideIndex - 1].classList.add("showSlides");
dots[slideIndex - 1].className += " activeDot";
}
Wstawiamy kod styli css
W strukturze strony html w <head> wstawiamy kod odwołujący się do pliku style.css:
<link rel="stylesheet" type="text/css" href="style.css" />Musimy utworzyć oddzielny plik o nazwie style.css, w którym wklejamy kod styli:
/*SLIDESHOW*/
.slideshow {
border-radius: 15px;
position: relative;
width: 100%;
width: calc(100% - 60px);
margin: 20px 0px 0px 0px;
}
.slides p {
text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 28px;
margin: 0;
min-height: 12em;
vertical-align: top;
}
.slides a {
color: #E70969;
text-decoration: none;
}
.slides a:hover {
text-decoration: underline;
}
.slides {
opacity: 0;
visibility: hidden;
height: 0;
pointer-events: none;
}
.showSlides {
visibility: visible;
height: 100% !important;
opacity: 1;
pointer-events: all;
opacity: 1;
transition: transform .3s ease-out 0.1s, opacity .3s ease-out 0.1s;
}
.slides-text {
padding: 0px 20px 0 70px;
}
/* Next & previous buttons */
.slideshow .prev, .next {
cursor: pointer;
position: absolute;
top: 0%;
width: auto;
padding: 0px 0px;
color: #545454;
font-weight: bold;
font-size: 40px;
transition: 0.6s ease;
-o-transition: 0.6s ease;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height: 100%;
}
.slideshow .prev {
left: 0;
}
.slideshow .next {
right: -35px;
border-radius: 3px 0 0 3px;
}
.slideshow .prev span, .next span {
position: absolute;
top: 50%;
}
/* Caption text */
.slideshow .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.slideshow .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
display: none;
}
/* The dots/bullets/indicators */
.slideshow .dot {
cursor: pointer;
height: 18px;
width: 18px;
margin: 20px 10px;
background-color: #ddd;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-webkit-transition: transform 0.3s ease;
-o-transition: background-color 0.6s ease;
}
.slideshow .activeDot, .dot:hover {
background-color: #E70969;
}
.slideshow .dot:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
}
@media (max-width:700px){
.slideshow {
padding: 0px 0px;
width: calc(100% - 10px);
}
.slideshow .slides p {
font-size: 15px;
line-height: 27px;
}
.slideshow .slides-text {
padding: 0px 8px;
}
.slideshow .prev, .next {
display: none;
}
}
Gotowe! Mamy działający slider tekstowy, który można uzupełnić opiniami klientów. Możecie też go odpowiednio ostylować, zmienić czcionkę, rozmiar, kolor, tło itp. Na dole kodu styli dodałam regułę dla ekranów mniejszych niż 700px:@media (max-width:700px){
Tam ustawiłam odpowiednie style dla mniejszych ekranów jak smartfon. Zmniejszyłam czcionkę oraz usunęłam strzałki boczne, dzięki czemu więcej treści się zmieściło i slider jest bardziej czytelny. Oczywiście możecie odkryć strzałki, usuwając display: none; ze .slideshow .prev, .next {
To tyle. Efekt można zobaczyć na stronie https://www.stronki.pl
