Od jakiegoś czasu na naszym blogu ukazują się tworzone przez nas projekty. Dziś w swoim artykule pokażę wam jak korzystając z komponentów paczki MDB FREE stworzyć podróżniczy slider na naszą stronę.
Krok 1: Wypakowujemy naszą paczkę, po czym za pomocą dowolnego edytora kodu otwieramy w niej "index.html" oraz plik "style.css", znajdujący się w podfolderze "style".
Krok 2: Skupiamy się na sekcji body. Usuwamy cały content pomiędzy komentarzami "Start your project here" i "End your project here".
Krok 3: Tworzymy diva, który będzie podstawą naszego slidera:
<!--Carousel Wrapper-->
<div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<!-- Carousel Wrapper -->
</div>
Krok 4: Teraz zajmiemy się slajdami. Tworzymy znacznik div
z klasą carousel-inner
oraz atrybut role="listbox"
. Umieszczamy go pomiędzy komentarzami:
Carousel Wrapper
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class=" carousel-item active">
<!--Mask-->
<div class="view mask rgba-stylish-strong">
<div class="text-center full-bg-img animated fadeInLeft">
<p class="p1 font-weight-bold ">Norway</p>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.First slide-->
Musimy pamiętać aby klasa pierwszego slajdu miała postać carousel-item active
. Bez tego nasz slider
nie zadziała.
Krok 5: Teraz zajmiemy się kolejnymi slajdami. Mają one mają taką samą formę.
<!--Second slide -->
<div class="carousel-item">
<!--Mask-->
<div class="view mask rgba-stylish-light">
<div class="text-center full-bg-img animated fadeInLeft">
<p class="p1 font-weight-bold">Mexico</p>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.Second slide -->
<!--Third slide-->
<div class="carousel-item">
<!--Mask-->
<div class="view mask rgba-stylish-light">
<div class="text-center full-bg-img animated fadeInLeft">
<p class="p1 font-weight-bold">Italy</p>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.Third slide-->
<!--Fourth slide-->
<div class="carousel-item">
<!--Mask-->
<div class="view mask rgba-stylish-light">
<div class="text-center full-bg-img animated fadeInLeft">
<p class="p1 font-weight-bold">Greece</p>
</div>
</div>
<!--/.Mask-->
</div>
<!--/.Fourth slide-->
</div>
<!--/.Slides-->
Krok 6: Następnie poniżej zamknięcia naszego slidera
umieszczamy diva z klasą first, która jest naszym własnym wytworem. W środku diva umieszczamy znacznik
img
z klasą women (ważne aby zdjęcie kobiety było pozbawione tła, w poszukiwaniu
odpowiedniego zdjęcia polecam darmowy stock zdjęć pexels.com)
<div class="first">
<img class="women"
src="https://images.pexels.com/photos/3722496/pexels-photo-3722496.png?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
Krok 7: Teraz przechodzimy do stylowania naszej strony. Zaczniemy od zaimportowania zewnętrznej czcionki.
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
Następnie nadamy wartości, dzięki którym nasz slider będzie na całą stronę.
/* Necessary for full page carousel*/
html,
body,
.view {
height: 100%;
}
/* Carousel*/
.carousel,
.carousel-item,
.carousel-item.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
Następnie zajmiemy się slajdami.
.carousel-item:nth-child(1) {
background-image: url("https://images.pexels.com/photos/3722494/pexels-photo-3722494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
Tak samo stylujemy pozostałe, zmieniając .carousel-item:nth-child(1)
na
.carousel-item:nth-child(2)
, etc.
Krok 8: Opisujemy nastęująco ostatnie klasy.
.p1 {
font-family: 'Lobster', cursive;
font-size: 170px;
color: #ee5253;
position: relative;
}
.women {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, 0px);
width: 1200px;
}
.first {
position: relative;
z-index: 4;
}
@media only screen and (max-width: 650px) {
.p1 {
font-size: 100px;
}
.women {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, 0px);
width: 900px;
}
}
Krok 9: Aby slajdy sie poprawnie zmieniały, musimy dodać krótki kod JavaScript na samym dole strony pomiędzy zncznikami script.
$('.carousel').carousel({
interval: 1500
})
Nasz slider jest już gotowy. Efekt możecie podejrzeć tutaj.