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.