Cara Membuat Slider Touch-Enabled dengan SwipeJS dan jQuery

Gambar / Content Slider adalah salah satu komponen yang umum yang kita temukan di sebuah website. Hal ini sangat sederhana untuk membuatnya dengan jQuery. Saat ini, dengan meningkatnya jumlah orang yang menggunakan perangkat sentuh diaktifkan, kita mungkin harus memikirkan kembali bagaimana cara membuatnya.

Umumnya, slider dilengkapi dengan tombol Prev dan Next untuk menavigasi isi, yang bekerja dengan baik di komputer desktop. Tapi dalam perangkat sentuh, akan lebih baik jika pengguna juga bisa menggeser dan menavigasi dengan gesekan jari. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana membangun ini menggunakan jQuery dan SwipeJS.

Persyaratan

Mari kita pertama mendapatkan bahan-bahan dan alat siap slider. Kita akan membutuhkan sebuah style sheet dan dokumen HTML, jQuery, SwipeJS, dan dan beberapa gambar - dalam tutorial ini , akan menggunakan foto-foto fantastis dari Jared Lim.

Setup Dasar

SwipeJS sangat mudah untuk dibuat. Berikut ini adalah markup HTML. Kita perlu div dengan id, dan satu lagi untuk membungkus div daftar slide, setiap slide juga dibungkus dengan div dan Anda dapat menambahkan sesuatu dalam slide, bukan hanya gambar.

<div id='slider' class='swipe'>  
    <div class='swipe-wrap'>  
        <div><img src="img/cellumination.jpg" width="600" height="350"></div>  
        <div><img src="img/color-zone.jpg" width="600" height="350"></div>  
        <div><img src="img/diagonal-path.jpg" width="600" height="350"></div>  
        <div><img src="img/fractal-reflection.jpg" width="600" height="350"></div>  
        <div><img src="img/origami.jpg" width="600" height="350"></div>  
    </div>  
</div>  

SwipeJS membutuhkan beberapa baris aturan dasar gaya. Aturan-aturan gaya ini menentukan lebar slider, dan menampilkan inline slide.

.swipe {  
    overflow: hidden;  
    position: relative;  
    max-width: 600px;  
    width: 100%;  
    height: 350px;  
    margin: 100px auto 0;  
}  
.swipe-wrap {  
    overflow: hidden;  
    position: relative;  
}  
.swipe-wrap > div {  
    float: left;  
    width: 100%;  
    position: relative;  
}  

Berikut adalah bagian JavaScript yang menempatkan slider ke live. Untuk membuat script berjalan dengan baik, kita perlu memastikan seluruh dokumen telah dimuat terlebih dahulu. Kita dapat melakukannya dengan baik dengan menambahkan script di bagian paling bawah halaman, atau menggunakan jQuery. Siap ( ) metode, seperti begitu.

$(document).ready(function(){
    // we add the code here
});  

Menggunakan jQuery, kita dapat menambahkan fungsi Babatan seperti begitu.

Slider = $('#slider').Swipe().data('Swipe');  

Ini adalah konfigurasi dasar, yang akan berjalan slider dengan konfigurasi default. SwipeJS menerima beberapa parameter untuk mengubah konfigurasi default. Parameter ini harus ditetapkan dalam Babatan ( ), misalnya:

Slider = $('#slider').Swipe({
    auto: 3000,
    continuous: false
}).data('Swipe');  

 

Memanfaatkan API

Selanjutnya, kita dapat mengontrol perilaku slider kita dengan yang disediakan API. Dalam contoh ini, menggunakan. Berikutnya ( ) dan prev . ( ) Metode dalam SwipeJS , kita dapat menavigasi.
Pertama, mari kita tambahkan tombol, seperti:

<span class="nav prev">Prev</span>
<span class="nav next">Next</span>  

Kemudian ditambah dengan acara klik jQuery , kita dapat melakukan hal berikut , sehingga ketika pengguna mengklik pada tombol itu akan menampilkan slide berikutnya atau yang sebelumnya , seperti yang ditugaskan .

$('.next').on('click', Slider.next);
$('.prev').on('click', Slider.prev); 

Sekarang , Anda dapat melihat slider beraksi di halaman demo , dan lebih baik untuk mencoba ini di perangkat touchscreen.

• Demo
• Download Sumber

Sumber hongkiat
Cara Membuat Slider Touch-Enabled dengan SwipeJS dan jQuery