Membuat Fullscreen Slider dengan Materialize CSS

Kreasi dan inovasi desain website adalah sesuatu yang bisa dibilang sangat diperlukan untuk memberikan kesan unik agar menarik perhatian orang yang mengunjunginya sehingga akan berpengaruh besar terhadap pengunjung yang merasa nyaman dan betah untuk berlama – lama membaca artikel atau konten yang ada, sisanya adalah tergantung isi konten dari website kalian, apakah menarik untuk dibaca atau tidak.

Hal yang sekarang sedang banyak di manfaatkan dalam perkembangan dunia web desain adalah jenis website yang memiliki ciri khas seperti parallax atau slider dengan tampilan fullscreen bahkan sampai web berbasis canvas, website jenis ini sudah sangat banyak bermunculan dimulai dari sekitar awal 2015 sudah banyak website yang menggunakan konsep serupa dengan yang saya sebutkan. Untuk yang belum mengetahuinya, kita akan membahas tentang cara membuat slider fullscreen Tujuan dari konsep fullscreen slider sendiri adalah membuat website yang terlihat memiliki background gambar fullscreen dan memiliki efek gerak seperti slider. Semua itu dilakukan menggunakan javascript

Dari sekian banyak plugin yang menyediakan konsep fullscreen slider, saya memilik sebuah framework yang sangat powerful untuk membuat efek fullscreen slider. Framework tersebut adalah framework Materialize CSS. Dimana framework ini berfokus pada tampilan frontend website yang bersifat material design dengan berbagai warna dan efek yang sangat menyesuaikan dengan apa yang saya jelaskan pada artikel saya yang berjudul Apa Itu Material Design?

Berikut ini saya akan berikan contoh untuk cara membuat background fullscreen slider menggunakan materialize css.

Pertama kita hubungkan dulu plugin yang kita butuhkan

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

<!—Compiled and minified Jquery -->
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

Selanjutnya kita akan buat struktur html untuk slidernya seperti dibawah ini

<div class="slider fullscreen">
  <ul class="slides">
    <li>
      <img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- random image -->
      <div class="caption center-align">
        <h3>Materialize CSS</h3>
        <h5 class="light grey-text text-lighten-3">Cara Membuat Fullscreen Slider</h5>
      </div>
    </li>
    <li>
      <img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
      <div class="caption left-align">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
      <div class="caption right-align">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>
</div>

 

Sekarang kita perlu mengaktifkan slider tersebut menggunakan beberapa baris kode jquery seperti dibawah ini

$(document).ready(function(){
   $('.slider').slider();
});

Untuk lebih jelasnya kalian bisa lihat demo dibawah ini

 

 

1 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat