1.5 #permalink HOME SLIDER - sekcja slider
-
slides img: Stylizacja obrazków w elemencie o klasie "slides". Określa szerokość na 260 pikseli i wysokość na 400 pikseli.
-
slides img:hover: Stylizacja obrazków w elemencie o klasie "slides" podczas najechania myszką. Dodaje animację o nazwie "pulse" trwającą 2 sekundy, która jest powtarzana nieskończoną ilość razy.
-
slides img:hover ~ .slide-description: Stylizacja elementu o klasie "slide-description" podczas najechania myszką na obrazki w elemencie o klasie "slides". Dodaje animację o nazwie "pulse" trwającą 2 sekundy, która jest powtarzana nieskończoną ilość razy.
-
slider-controls: Stylizacja kontrolek slidera. Ustawia wyśrodkowanie elementów, margines na górze i na dole oraz wysokość na 10 pikseli.
-
slider-radio: Stylizacja elementów radio (przycisków wyboru) slidera. Ukrywa te elementy.
-
slider-label: Stylizacja etykiet przycisków wyboru slidera. Określa kolor tekstu, podkreślenie oraz efekt transformacji podczas najechania myszką.
-
slider-label: Dodatkowe style dla etykiet przycisków wyboru slidera. Określa szerokość, wysokość, zaokrąglenie narożników, tło, marginesy oraz kursor myszki.
-
slider-radio:checked + .slider-label: Stylizacja etykiet przycisków wyboru slidera, które są zaznaczone. Zmienia tło etykiety na kolor czarny.
-
slider-controls > a:hover, .slider-controls > a:focus, .slider-nav > div:target: Stylizacja nawigacji slidera podczas najechania myszką lub skupienia oraz podczas aktywacji danego slajdu. Zmienia tło na kolor czarny.
-
slider: Stylizacja kontenera slidera. Określa, że ma być to flex container, zajmujący całą dostępną szerokość i wyśrodkowany tekst.
-
slides: Stylizacja kontenera slajdów wewnątrz slidera. Określa, że ma być to flex container, umożliwiający przewijanie w poziomie i zawijający elementy. Ustawia szerokość na 100% widoku i ukrywa poziome przewijanie.
-
slide: Stylizacja pojedynczego slajdu w sliderze. Określa, że slajd powinien być wyśrodkowany, ma elastyczną szerokość, marginesy, tło, cień i inne właściwości.
-
slides i slide: Duplikacja stylizacji dla kontenera slajdów i pojedynczego slajdu. Istnieje błąd w kodzie, który powoduje duplikację tych stylów.
Markup
Podsumowując, powyższe style są używane do stworzenia efektu slidera ze slajdami, gdzie obrazki i ich opisy zmieniają się podczas najechania myszką lub wyboru przycisków. Dodatkowo, style definiują kontrole slidera i jego wygląd ogólny.
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">
<img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-2" class="slide">
<img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-3" class="slide">
<img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-4" class="slide">
<img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-5" class="slide">
<img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-6" class="slide">
<img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-7" class="slide">
<img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-8" class="slide">
<img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
<div id="slide-9" class="slide">
<img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
<div class="slide-description">
<p class="product-name">Lorem Ipsum</p>
<p class="price">10$</p>
</div>
</div>
</div>
</div>styleIndex.css, line 2527