Jeżeli liczyłeś na to, że po przeczytaniu tego poradnika będziesz w stanie własnoręcznie skonstruować obiekt będący źródłem wspomnień z dzieciństwa, to niestety muszę Cię rozczarować. Dziś zajmiemy się budowaniem prawdopodobnie najlepiej prezentującego się rodzaju strony internetowej – “Full Page Carousel”

Na wstępie chciałbym Ci wyjaśnić czym właściwie jest narzędzie, którym będziemy się dzisiaj posługiwać. Material Design for Bootstrap, bo o nim mowa, to nasz rodzimy framework stworzony z myślą o ludziach, którzy lubią budować responsywne strony internetowe szybko i sprawnie.

Sam Material Design nadaje naszej stronie głębię oraz poczucie ciężaru poszczególnych elementów. Jeżeli jesteś użytkownikiem narzędzi Google to zapewne masz z nim styczność każdego dnia.
Bootstrap jako samodzielne narzędzie pozwala na szybkie budowanie, edytowanie i usprawnianie stron internetowych, o czym przekonasz się już za chwilę.

Dla jasności – ten oraz wszystkie inne poradniki zostały stworzone z myślą o osobach, które mają chociażby minimalne doświadczenie z technologiami HTML i CSS. Są one też niezłą dawką wiedzy dla doświadczonych deweloperów.

Aby nie być gołosłownym, przedstawiam Ci efekt końcowy dzisiejszego poradnika: tutaj.

Tak więc do dzieła!

Zaczniemy od pobrania paczki MDB – zbioru wszystkich plików, które będą potrzebne nam w trakcie pracy. Aby tego dokonać, należy wejść na naszą stronę i pobrać darmową wersję przyciskiem “Direct download”. Potrzebny będzie nam też edytor tekstu. Tutaj osobiście polecam Brackets, ale dla opornych wystarczy nawet sam notatnik.

Rozpakuj paczkę w folderze, w którym będziesz pracować i otwórz plik index.html. Na środku strony powinien ukazać Ci się napis “Material Design for Bootstrap”. To znaczy, że wszystko jest na swoim miejscu i możemy zabrać się do pracy.

Krok 1

Otwórz plik index.html w swoim edytorze tekstu.

Na potrzeby tego poradnika, skupiającego się głównie na karuzeli, pozostałe elementy strony takie jak stopka czy pasek nawigacyjny zostały już zaimplementowane w kodzie. Jeżeli interesuje Cię, jak działają lub chciałbyś stworzyć własne, zapraszam do zapoznania się z pozostałymi poradnikami i naszą dokumentacją. Na tą chwilę skopiujemy następujący kod poniżej znacznika <body> w naszym pliku index.html, który zawiera w sobie wszystkie wyżej wymienione elementy.

[html]
<!–Navbar–>

<nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar">

<!– Collapse button–>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
<i class="fa fa-bars"></i>
</button>

<div class="container">

<!–Collapse content–>

<div class="collapse navbar-toggleable-xs" id="collapseEx">
<!–Navbar Brand–>
<a class="navbar-brand" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
<!–Links–>

<ul class="nav navbar-nav">

<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!–Search form–>
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!–/.Collapse content–>
</div>
</nav>
<!–/.Navbar–>
<!–Carousel Wrapper–>
<!–/.Carousel Wrapper–>
<!–Footer–>
<footer class="page-footer center-on-small-only">
<!–Footer Links–>
<div class="container-fluid">
<div class="row">
<!–First column–>
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
Material Design (codenamed Quantum Paper) is a design language developed by Google.
Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework – Bootstrap.
</div>
<!–/.First column–>
<hr class="hidden-md-up">
<!–Second column–>
<div class="col-md-2 offset-md-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!–/.Second column–>
<hr class="hidden-md-up">
<!–Third column–>
<div class="col-md-2">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>

</div>
<!–/.Third column–>
<hr class="hidden-md-up">
<!–Fourth column–>
<div class="col-md-2">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!–/.Fourth column–>
</div>
</div>
<!–/.Footer Links–>
<hr>
[/html]

Otwórzmy teraz plik style.css znajdujący się w folderze CSS. Wklej tam następujący kod odpowiadający za strukturę naszej strony:

[css]
.navbar {
background-color: transparent;
}

.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
background-color: #1C2331;
}

footer.page-footer {
background-color: #1C2331;
margin-top: 0;
}

@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}

[/css]

Kod powyżej nadaje naszej stronie podstawowy układ wszystkich elementów. Możemy teraz skupić się na samej karuzeli. Dodajmy ją, poprzez wklejenie poniższego kodu pomiędzy komentarze <!–Carousel Wrapper –>

[html]
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!–Indicators–>
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!–/.Indicators–>
<!–Slides–>
<div class="carousel-inner" role="listbox">
<!–First slide–>
<div class="carousel-item active">
<!–Mask color–>
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/images/slides/slide%20(11).jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
<!–Caption–>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Light mask</h3>
Secondary text
</div>
</div>
<!–Caption–>
</div>
<!–/First slide–>
<!–Second slide–>
<div class="carousel-item">
<!–Mask color–>
<div class="view hm-black-strong">
<img src="https://mdbootstrap.com/images/slides/slide%20(15).jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
<!–Caption–>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Strong mask</h3>
Secondary text

</div>
</div>
<!–Caption–>
</div>
<!–/Second slide–>
<!–Third slide–>
<div class="carousel-item">
<!–Mask color–>
<div class="view hm-black-slight">
<img src="https://mdbootstrap.com/images/slides/slide%20(13).jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
<!–Caption–>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Super light mask</h3>
Secondary text
</div>
</div>
<!–Caption–>
</div>
<!–/Third slide–>
</div>
<!–/.Slides–>
<!–Controls–>
<a class="left carousel-control" href="#carousel-example-2" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-2" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!–/.Controls–>
</div>
[/html]

Krok 2

Zapisz zmiany i otwórz plik w przeglądarce. Nasza karuzela jest już na miejscu. Gołym okiem da się jednak zauważyć, że pozostały pewne niedociągnięcia.

  1. Wysokość naszej karuzeli zależy od wysokości grafiki, jaka została w niej umieszczona. Jest to dość niepożądany efekt, szczególnie w wypadku kiedy mamy grafiki różnej wielkości.
  2. Nasza karuzela nie zajmuje całości dostępnej powierzchni i w zależności od wielkości ekranu efekt może być mniej lub bardziej przyjemny dla oka, a na takie nieścisłości nie możemy sobie pozwolić.
  3. Treść strony oraz strzałki nie są do końca wyśrodkowane.
    Aby pozbyć się tych problemów, musimy zmienić nasz kod na nieco poprawionym:

[html]

<!–Carousel Wrapper–>
<div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<!–Indicators–>
<ol class="carousel-indicators">
<li data-target="#carousel-example-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1" data-slide-to="1"></li>
<li data-target="#carousel-example-1" data-slide-to="2"></li>
</ol>
<!–/.Indicators–>
<!–Slides–>
<div class="carousel-inner" role="listbox">
<!–First slide–>
<div class="carousel-item active">
<!–Mask–>
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1>
</li>

<li>
The most powerful and free UI KIT for Bootstrap
</li>

<li>
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg flex-item">Sign up!</a>
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg flex-item">Learn more</a>
</li>
</ul>
</div>
</div>

<!–/.Mask–>
</div>
<!–/.First slide–>
<!–Second slide –>
<div class="carousel-item">
<!–Mask–>
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>

<li>
And all of them are FREE!
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
</div>
<!–/.Mask–>
</div>

<!–/.Second slide –>
<!–Third slide–>
<div class="carousel-item">
<!–Mask–>
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Visit our support forum</h1>
</li>
<li>
Our community can help you with any question
</li>
<li>
<a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
</div>
<!–/.Mask–>
</div>
<!–/.Third slide–>
</div>
<!–/.Slides–>
<!–Controls–>
<a class="left carousel-control" href="#carousel-example-1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!–/.Controls–>
</div>
<!–/.Carousel Wrapper–>

[/html]

Po odświeżeniu strony zauważysz, że karuzela zniknęła. I właśnie o to nam chodziło, ponieważ nadszedł czas na trochę magii związanej z CSS.

Krok 3

Otwórz ponownie plik style.css i dodaj tam następujący kod:

[css]
/* Necessary for full page carousel*/

html,
body,
.view {
height: 100%;
}

/* Carousel*/

.carousel,
.carousel-item,
.active {
height: 100%;
}

.carousel-inner {
height: 100%;
}

.carousel-item:nth-child(1) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(54).jpg");
background-repeat: no-repeat;
background-size: cover;
}

.carousel-item:nth-child(2) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(4).jpg");
background-repeat: no-repeat;
background-size: cover;
}

.carousel-item:nth-child(3) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(3).jpg");
background-repeat: no-repeat;
background-size: cover;
}
Zapisz wszystkie pliki i ponownie odśwież przeglądarkę.
Pozostał nam do dopracowania jeszcze ostatni element – napisów. Dodaj poniższy kod do pliku style.css i odśwież naszą stronę.
/*Caption*/

.flex-center {
color: #fff;
}

@media (min-width: 776px) {
.carousel .view ul li {
display: inline;
}
.carousel .view .full-bg-img ul li .flex-item {
margin-bottom: 1.5rem;
}
}

[/css]

Zapisz wszystkie pliki i ponownie odśwież przeglądarkę.

Pozostał nam do dopracowania jeszcze ostatni element – napisy. Dodaj poniższy kod do pliku style.css i odśwież naszą stronę.

[css]

/*Caption*/<br class="m_-6503448839523711733gmail-kix-line-break" /><br class="m_-6503448839523711733gmail-kix-line-break" />.flex-center {<br class="m_-6503448839523711733gmail-kix-line-break" />    color: #fff;<br class="m_-6503448839523711733gmail-kix-line-break" />}<br class="m_-6503448839523711733gmail-kix-line-break" /><br class="m_-6503448839523711733gmail-kix-line-break" />@media (min-width: 776px) {<br class="m_-6503448839523711733gmail-kix-line-break" />    .carousel .view ul li {<br class="m_-6503448839523711733gmail-kix-line-break" />        display: inline;<br class="m_-6503448839523711733gmail-kix-line-break" />    }<br class="m_-6503448839523711733gmail-kix-line-break" />    .carousel .view .full-bg-img ul li .flex-item {<br class="m_-6503448839523711733gmail-kix-line-break" />        margin-bottom: 1.5rem;<br class="m_-6503448839523711733gmail-kix-line-break" />    }<br class="m_-6503448839523711733gmail-kix-line-break" />}[/css]

Brawo!

Nasz tekst powinien wyróżniać się teraz na tle strony. To jest właśnie ten moment, w którym samodzielnie udało Ci się skonstruować swoją pierwszą karuzelę z MDB. Gratulacje!

Spróbuj teraz zmienić rozmiar okna przeglądarki. Jak zauważysz, elementy ustawiają się proporcjonalnie i schludnie przy każdej wielkości wyświetlania, a to za sprawą responsywności oferowanej przez MDB.

Teraz w kilku punktach postaram Ci się wyjaśnić jak działa Twoja karuzela :

  1. Pozbyliśmy się grafik z naszego pliku index.html i ustawiliśmy je jako tło elementów .carousel-item przy użyciu CSS. Dzięki ustawieniu wysokość na 100% dostępnej powierzchni, nasza grafika będzie zawsze dopasowywała się do ekranu.
  2. Ustawiliśmy też wysokość height: 100% dla wszystkich “rodziców” naszej karuzeli (html, body i .view) aby otrzymać ten sam efekt
  3. nth-child(1), nth-child(2), nth-child(3) odnoszą się do kolejnych slajdów jako numerów.
  4. W kodzie HTML użyliśmy mask – efektu, który pozwala na nakładanie na nasze grafiki cieni i kolorów aby uczynić napisy bardziej czytelnymi
  5. Skorzystaliśmy też z klasy .flex-center aby umieścić nasz tekst dokładnie pośrodku strony. Więcej o FlexBoxie możesz doczytać w naszej dokumentacji.
  6. Jeżeli przyjrzysz się bliżej naszemu kodowi HTML, zauważysz klasę .animated . Nadaje ona naszym tekstom przyjemną dla oka animację przy przechodzeniu pomiędzy slajdami.

Strona, którą udało się nam wspólnie stworzyć jest całkowicie do Twojej dyspozycji. Istnieje jeszcze dużo więcej ciekawych form designu dla konkretnych rodzajów stron, z konstrukcją których możesz się zapoznać w naszych pozostałych poradnikach oraz dokumentacji MDB znajdującej się na naszej stronie.

Dzięki za poświęcony czas i mam nadzieję, że Ci się podobało!

Autor

Piotr Bender – pasjonat wszystkiego co związane ze startupami i ich otoczeniem. Członek drużyny MDB, który w codziennej pracy łączy swoje umiejętności techniczne z pasją do tworzenia treści.
Linkedin : https://pl.linkedin.com/in/piotr-bender-728ab5b0
Twitter : @BenderPiotr

TEMATY:
Najświeższe artykuły