Seperti yang kita lihat di sebuah gambar yang ada di ponsel, dimana kita mendapatkan gambar yang ke potong dan untuk melihat gambar bagian kanan, kiri, atas, dan bawahnya kita harus menahan lalu mendragnya materi proses ini dapat Anda pelajari di kursus website online, proses itu biasanya ada di sebuah mobile ya, dan disini jika untuk membuat drag dan swap di sebuah website kita bisa gunakan plugin ini.
Fungsi ini bermanfaat ya, bagi teman-teman yang mempunyai website gambar, dan bisa menambah cantik website teman-teman itu sendiri. oke langsung untuk membuat drag dan swap di sebuah website silahkan teman-teman gunakan plugin dragscroll yang ada di jqueyscript dan untuk cara menggunakannya silahkan teman-teman ikuti cara ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Drag/Swipe To Scroll Example</title> <style type="text/css"> *{ margin: 0; padding: 0 } body { background: #fafafa; } .container { margin: 150px auto; max-width: 960px; text-align: center; } .drag-box{ width: 400px; height: 300px; margin: 20px auto; overflow: hidden; border: 3px dotted #222; background: #f8f8f8; line-height: 25px; font-size: 14px; } .drag{ width: 150%; padding: 10px; cursor: grab; } </style> </head> <body> <div class="container"> <h1>Cara Membuat Drag dan Swap</h1> <div class="drag-box"> <div class="drag"><img src="https://maritim.go.id/konten/unggahan/2016/01/GunungBromo3-1.jpg"></div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="js/jquery.dragscroll.js"></script> <script type="text/javascript"> $('.drag').dragscroll({ onStart: function($this) { console.log($this); }, onMove: function($this) { console.log($this); }, onEnd: function($this) { console.log($this); } }); </script> </body> </html> |
Oke seperti yang teman-teman kursus website online lihat karena kita menggunakan sebuah pulgin jadi yang teman-teman butuhkan adalah sebuah bahan yang simple dimana ada sebuah gambar yang di bungkus oleh class drag itu sendiri, dan jangan lupa untuk kode jsnya teman-teman silahkan ambil di jquery script ya, karena disini saya menggunakan cara offline jadi silahkan teman-teman lihat di websitenya
Untuk hasilnya silahkan teman-teman lihat disini:
Hasilnya paling enak teman-teman coba sendiri terlebih dahulu, karena jika sebuah gambar tidak terlihat ya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat drag dan swap di sebuah website, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.
mau belajar lebih detail bisa mengikuti kelas di Belajar Website Online dari Dumet School.