Script Slider Responsive Sederhana Dengan CSS dan jQuery

Admin Juni 19, 2020 Script , Tutorial CSS Comment

Di artikel ini, saya akan berbagi sebuah script slider responsive sederhana dengan CSS dan jQuery. Link library jQuery nya langsung di ambil dari google, jadi kalian tidak perlu scriptnya. Tapi jika kalian ingin menyimpan scriptnya, link download saya sediakan di akhir artikel.

Script ini memiliki berapa keunggulan antara lain :

Desain responsif dan adaptif untuk semua jenis perangkat.
Mendukung berbagai mode tampilan seperti mode horizontal, vertikal dan fade.
Konten Slide dapat berupa apa saja: gambar, video atau teks HTML.
Mendukung semua browser populer.
Menyediakan berbagai opsi konfigurasi yang memungkinkan Anda untuk menyesuaikan slider sesuai kebutuhan Anda.

Bagamaimana Cara Menggunakan Script Ini ?

1. Letakkan potongan file HTML berikut sebelum tag <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

2. Selanjutnya letakkan potongan file berikut dalam body (pada halaman yang Anda inginkan) :

<div class="slider">
            <div><img src="/path/to/image1.jpg" title="Title Of Image1"></div>
            <div><img src="/path/to/image2.jpg" title="Title Of Image2"></div>
            <div><img src="/path/to/image3.jpg" title="Title Of Image3"></div>
</div>

3. Kemudian letakkan script berikut dibawah file yang tadi atau sebelum tag </body> :

<script>
         $('.slider').bxSlider({
          autoControls: true,
          auto: true,
          pager: true,
          slideWidth: 800,
          mode: 'fade',
          captions: true,
          speed: 1000
            });
</script>

Dan berikut contoh lengkapnya :

<!DOCTYPE html>
<html>
    <body>
        <head>    
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
            <script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
        </head>

            <div class="slider">
            <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dSJKbapAMmIueePx-9XGSCzAqPkK0BLH_6QQHW7KQY6SUodtnGP-eqzs5LipNlTJTfmbUMW9-PROLKvVVmeayWnVsMaTAzsPT2yTvcDQXeecUvtc8O4Rz4Y3JQOT40mPjf_tH0n3Yw5b/d/slide1.jpg" title="Title Of Image1"></div>
            <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudcurDAeh2_ME8WXLVj-ZPGnhTT-mjQ_975W_hdNrTzfsEoRF5dr4AXk5Uln9RNT8cxh-QZekjmZd-pIYg-gtOpaem9qJ01tFHa1062v7-kdGhpU1UT6QF7CRmahJi4kLLRvZVcbxhvx2/d/slide2.jpg" title="Title Of Image2"></div>
            <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaupxq_oaTVhvSDA6yHHDH58Qv-6WiEaEyu_wRMHzniBgIK7YH0yRlHTxsNm7P9rb7ycTsun-zqypjM-NDQm-7IVu7C-p2SO2-GQFQj-_D3fg9HR-MQcIRORsxeKFTYxDB3Se4JKU9RT-3/d/slide3.jpg" title="Title Of Image3"></div>
        </div>
 
        <script>
            $('.slider').bxSlider({
                autoControls: true,
                auto: true,
                pager: true,
                slideWidth: 800,
                mode: 'fade',
                captions: true,
                speed: 1000
            });
        </script>
    </body>
</html>

Dengan script tersebut, maka tampilan slide Anda akan terlihat seperti ini:

19 Juni 2020

Script Slider Responsive Sederhana Dengan CSS dan jQuery

0 Post a Comment

Posting Komentar

Featured