Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Bootstrap 4Laravel 6VueJs

Laravel 6 vue bootstrap owl carousel working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Laravel 6 vue bootstrap owl carousel working example.

Vue Laravel Bootstrap Owl Carousel Working Example

Here are the basics steps and coding and please use this carefully:

1. Before using Laravel, make sure you have Composer installed on your machine.

2. Now run below command to download laravel installer:

composer global require laravel/installer

 

3. Here are the basics command to install fresh laravel 6 setup on your machine:

composer create-project --prefer-dist laravel/laravel vuelaraveowlcarousel

cd vuelaraveowlcarousel // go inside laravel 6 setup
npm install // for node setup

 

4. Now, you need to add below code into resources\js\app.js file:

...

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

...

 

5. Now, you need to add below code into 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>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

 

6. Now, you need to add below code into resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

 

7. Finally, you need to run below command into your terminal and you will see working full calendar example:

//In first terminal run
npm run watch

//In second terminal run
php artisan serve

 

And you will see working bootstrap owl carousel in laravel 6 vue and if you have any query regarding to this post then please do comment below.

Jassa Jatt

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.