Membuat Fullscreen Slider dengan Materialize CSS

01/05/2017    Maykhel David    4261    Website

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

 

 

Web Design

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow