Gambar slider adalah dimana gambar itu akan berganti secara otomatis ke gambar lainya, ada yang secara otomatis atau ada juga yang harus di click baru gambar itu berganti, dan disini kita akan mencoba cara membuat gambar slider menggunakan posistion jQueryUI, walaupun sudah bertebaran banyak plugin dan cantik-cantik tidak ada salahnya ya, kita mencobanya, maka dari itu jangan kemana-mana simak terus ya teman-teman.
lalu apa yang mebedakan cara membuat gambar slider menggunakan posistion jQueryUI, jika di kata simple si tidak malah saya pernah melihat sebuah plugin simple untuk membuat slider, tetapi disini kita akan belajar bagaimana cara lainya selain menggunakan plugin simple tersebut, walaupun di jqueryui sendiri ada beberapa fungsi yang sudah bawaan dari jqueryUI itu sendiri dimana seperti kasus slider ini, gambar sebelahnya terlihat sedikit dimana slider kita jadi terlihat jelek, dan jika saya lihat itu sudah di atur di dalam fungsi jqueryUInya, jadi kita tidak bisa ngotak-atik.
ok langsung saja pertama seperti biasa kita menggunakan link CDN dari jquery dan bootstrapnya, seperti ini:
|
1 2 3 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
jika sudah karena saya menggunakan bootstrap maka tampilannya seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container mt-2"> <div class="row"> <div class="col-md-8 offset-2" id="container"> <img src="gambar_1.jpg"> <img src="gambar_2.jpg"> <img src="gambar_3.jpg"> </div> </div> <div class="row offset-2 mt-4 col-md-8"> <button id="previous" class="btn btn-primary mr-2 "><< Prev</button> <button id="next" class="btn btn-primary float-right">Next >></button> </div> </div> |
Dan silahkan masukan gambar yang teman-teman punya, dan ini adalah script yang di gunakan.
|
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 54 55 56 57 58 59 60 |
$( function() { function left( element, using ) { element.position({ my: "right middle", at: "left+25 middle", of: "#container", collision: "none", using: using }); } function right( element, using ) { element.position({ my: "left middle", at: "right-25 middle", of: "#container", collision: "none", using: using }); } function center( element, using ) { element.position({ my: "center middle", at: "center middle", of: "#container", using: using }); } left( $( "img:eq(0)" ) ); center( $( "img:eq(1)" ) ); right( $( "img:eq(2)" ) ); function animate( to ) { $( this ).stop( true, false ).animate( to ); } function next( event ) { event.preventDefault(); center( $( "img:eq(2)" ), animate ); left( $( "img:eq(1)" ), animate ); right( $( "img:eq(0)" ).appendTo( "#container" ) ); } function previous( event ) { event.preventDefault(); center( $( "img:eq(0)" ), animate ); right( $( "img:eq(1)" ), animate ); left( $( "img:eq(2)" ).prependTo( "#container" ) ); } $( "#previous" ).on( "click", previous ); $( "#next" ).on( "click", next ); $( "img" ).on( "click", function( event ) { $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).on( "resize", function() { left( $( "img:eq(0)" ), animate ); center( $( "img:eq(1)" ), animate ); right( $( "img:eq(2)" ), animate ); }); } ); |
jika sudah maka hasilnya akan seperti ini:
silahkan teman-teman silde dengan menekan tombolnya ya, dan jika berhasil akan menampilkan gambar lainya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat gambar slider menggunakan posistion jQueryUI, semoga bermanfaat dan sampai jumpa pada arikel berikutnya terimakasih.