Owl Carousel Docs

Documentation can be found here
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/

Add font awesome as well because font awesome is awesome.

wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css'); 

It get’s used in this project 😉

Lib CDN’s can be found here
CDN’s https://cdnjs.com/libraries/OwlCarousel2
Scripts and Styles for “wp-enqueu”

// Version 1.3.3
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'); 
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'); 
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js');
// Version 2.0.0-beta
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js');

The library is also inside the Libs folder on the server if you need it. Or you can just download it from the first link above.

<div class="owl-carousel owl-theme" id="about-banner">
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
</div>
.inner-block .icon {
     color: #f44336;
     text-align: center;
     padding: 10px;
     font-size: 70px;
}
 .inner-block-header {
     text-align: center;
}
 .inner-block-text {
     text-align: center;
}
 #about-banner .inner-block {
     margin: 35px;
     border-top: 1px solid #f44336;
     border-bottom: 1px solid #f44336;
}
#about-banner {
     margin: 25px;
}
$("#about-banner").owlCarousel({
    items: 3,
    itemsDesktop: [1000, 2],
    itemsDesktopSmall: [980, 1],
    itemsTablet: [768, 1],
    pagination: true,
    navigation: false,
    navigationText: ["", ""],
    autoPlay: true
})
Laravel Route With Null-able Parameter

When making a route you can set a null-able parameter, this will save you in terms of routing like doing an if, and if the parameter is there or not you can then perform your actions based on those parameter rules.

You would write is like so.

Not null-able does not have a Question Mark

Route::get('home'/{action}, function($action){
     return $action;
});

Null-able does have a Question Mark

Route::get('home'/{action?}, function($action){
     return $action;
});
Laravel Same Time Create Model and Controller

————————————–
To create your model and controller together you can do this.
Method 1 : Does not set controllers as resource items.
php artisan make:controller CustomersController –model=Customer

Method 2 : Sets controllers as resource items.
php artisan make:model Todo -mcr

————————————–
-m, –migration Create a new migration file for the model.
-c, –controller Create a new controller for the model.
-r, –resource Indicates if the generated controller should be a resource controller

————————————–
For reference sake this is the method where you manually create each method for Model and Controller

The –resource sets up by default the controllers crud functionalities

php artisan make:model Customer
php artisan make:controller CustomersController --resource

https://stackoverflow.com/questions/43187735/laravel-5-4-create-model-controller-and-migration-in-single-artisan-command

The below is an example from Laravel.

php artisan make:model Flight --factory
php artisan make:model Flight -f

php artisan make:model Flight --seed
php artisan make:model Flight -s

php artisan make:model Flight --controller
php artisan make:model Flight -c

php artisan make:model Flight -mfsc

Search

Your Favourite Posts

  • Your favorites will be here.

Latest Content

© Garth Baker 2025 All rights reserved.

Pin It on Pinterest

Share This