Selanjutnya yuk kita belajar bersama kami kursus web design akan mencoba membuat sebuah slider, slider sendiri adalah sebuah gambar yang lebih dari satu tetapi gambar tersebut di tampilkan satu persatu, lalu gambar selanjutnya akan di tampilkan secara otomatis tergantung dari pengaturan seberapa lama gambar yang akan tampil, oke jadi seperti apa cara cara membuat slider di Bootstrap Vue, simak terus ya teman-teman.
Jika teman-teman pernah membuat sebuah slider ini dari bootstrap caranya hampir sama ya teman-teman keuntunganya adalah dari pada kita menggunakan plugin yang lain alangkah enaknya kita gunakan langsung dari bootstrap vuenya, disamping kita tidak banyak menginstall plugin-plugin di website kita, jadi website kita tidak berat, oke langsung saja, caranya teman-teman bisa pilih component lalu pilih carousel, dan disini saya akan mencontohkan satu ya
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<template> <div> <b-carousel id="carousel-1" v-model="slide" :interval="4000" controls indicators background="#ababab" img-width="1024" img-height="480" style="text-shadow: 1px 1px 2px #333;" @sliding-start="onSlideStart" @sliding-end="onSlideEnd" > <!-- Text slides with image --> <b-carousel-slide caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img-src="https://picsum.photos/1024/480/?image=52" ></b-carousel-slide> <!-- Slides with custom text --> <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54"> <h1>Hello world!</h1> </b-carousel-slide> <!-- Slides with image only --> <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide> <!-- Slides with img slot --> <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment --> <b-carousel-slide> <template v-slot:img> <img class="d-block img-fluid w-100" width="1024" height="480" src="https://picsum.photos/1024/480/?image=55" alt="image slot" > </template> </b-carousel-slide> <!-- Slide with blank fluid image to maintain slide aspect ratio --> <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum. </p> </b-carousel-slide> </b-carousel> <p class="mt-4"> Slide #: {{ slide }}<br> Sliding: {{ sliding }} </p> </div> </template> <script> export default { data() { return { slide: 0, sliding: null } }, methods: { onSlideStart(slide) { this.sliding = true }, onSlideEnd(slide) { this.sliding = false } } } </script> |
oke contohnya ini saya masih menggunakan dari bootstrap ya teman-teman kursus web design jakarta, caranya cukup mudah ya, teman-teman tinggal memasukan sebuah file gambarnya di img ya, bisa teman-teman lihat cara membuat sebuah slider atau carosule di bootstrap dan bootstrap vue itu berbeda ya, karena jika di bootstrap sendiri kita tinggal memasukan sebuah gambarnya saja, tetapi jika di bootstrap vue sendiri untuk memasukan gambar ada di sebuah attributenya. oke langsung saja ya untuk hasilnya:
silahkan teman-teman coba sendiri, jika teman-teman coba caranya cukup simple ko, yang penting jangan lupa install bootstrap vuenya dulu ya. Oke kami dari kursus web design jakarta rasa cukup sampai disini belajar kita tentang cara membuat slider di Bootstrap Vue semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.