Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Vue Laravel 8 Bootstrap 4 Owl Carousel Working Example.
For Laravel 8 and Vue.js Lovers, please check below two links:
Friends now I proceed onwards and here is the code snippet for Vue Laravel 8 Bootstrap 4 Owl Carousel Working Example and please use this carefully to avoid the mistakes:
1. Now friends we need to add below code into our resources/js/components/ExampleComponent.vue file:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<center><h2>Vue Laravel Bootstrap Owl Carousel Working Example:</h2></center>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="carousel-item">
<img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="carousel-item">
<img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Â
2. Now friends we need to add below code into our resources/views/welcome.blade.php file to get the output on browser:
...
<body>
...
<!-- Below code will call the vue script -->
<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
...
Â
3. Finally friends, we need to run below command into your terminal and you working example:
//In first terminal run npm run watch //In second terminal run php artisan serve
Â
Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.
Guys in my next post, I will tell you, how to add images in fullcalendar events? And other demoes related to Vuejs Laravel.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post.Nothing matters if your views will good or bad.
Jassa
Thanks
