Unduh Owl Carousel:
Lakukan pengunduhan melalui situs resmi Owl Carousel : https://owlcarousel2.github.io/OwlCarousel2/
Ekstrak dan Tempatkan file dilokasi direktori projek:
Cari file dengan nama owl.js dan owl.css (skrip js dan kode css) lalu tempatkan dua file tersebut berdasarkan direktori seharusnya. Dalam kasus saya, public/assets/frontend/js/owl.js dan public/assets/frontend/css/owl.css
Modifikasi file tampilan:
Tambahkan kode dibawah ini pada file blade/tampilan projek anda:
//Tag title
<link rel="stylesheet" href="{{ asset('vendor/owlcarousel/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/owlcarousel/owl.theme.default.min.css') }}">
//PenutupTag title
//Tag body
<div class="owl-carousel">
<div class="item"><img src="{{ asset('images/image1.jpg') }}" alt=""></div>
<div class="item"><img src="{{ asset('images/image2.jpg') }}" alt=""></div>
<!-- Tambahkan gambar lainnya -->
</div>
<script src="{{ asset('vendor/owlcarousel/owl.carousel.min.js') }}"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
});
</script>
//Penutup tag body
Pastikan jQuery Tersedia:
Pastikan jQuery sudah di-load sebelum file Owl Carousel di markup HTML Anda. Anda dapat menggunakan jQuery yang sudah disediakan oleh Laravel secara default atau menggunakan versi lain jika diperlukan.
Akses Halaman:
Buka halaman di browser Anda dan pastikan slider Owl Carousel muncul dengan benar.
