Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Plugin Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="assets/libs/owl-carousel/dist/js/owl.carousel.min.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy

<link rel="stylesheet" href="assets/libs/owl-carousel/dist/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/libs/owl-carousel/dist/css/owl.theme.default.min.css">

Initialization

Add the below init function before the closing </body> tag, to enable it.

copy

<script>
    $(document).ready(function() {
        $(".owl-carousel").owlCarousel();
    });
</script>

Examples

Walmart Inc (WMT) 1,740.05
Chevron Corp (CVX) 217.90
Alphabet Inc (GOOGL) 270.97
Microsoft Corp (MSFT) 3,218.51
General Motors (GM) 735.11
Apple Inc (AAPL) 1,740.05
copy

<div class="owl-carousel owl-theme markets text-center py-4 bg-dark mb-3">
                            
    <div>
        <span class="text-white small">Walmart Inc (WMT)</span>
        <span class="badge bg-success ms-2"><i class="fas fa-caret-up me-2"></i> 1,740.05</span>
    </div>

    <div>
        <span class="text-white small">Chevron Corp (CVX)</span>
        <span class="badge bg-success ms-2"><i class="fas fa-caret-up me-2"></i> 217.90</span>
    </div>

    <div>
        <span class="text-white small">Alphabet Inc (GOOGL)</span>
        <span class="badge bg-danger ms-2"><i class="fas fa-caret-down me-2"></i> 270.97</span>
    </div>

    <div>
        <span class="text-white small">Microsoft Corp (MSFT)</span>
        <span class="badge bg-success ms-2"><i class="fas fa-caret-up me-2"></i> 3,218.51</span>
    </div>

    <div>
        <span class="text-white small">General Motors (GM)</span>
        <span class="badge bg-danger ms-2"><i class="fas fa-caret-down me-2"></i> 735.11</span>
    </div>

    <div>
        <span class="text-white small">Apple Inc (AAPL)</span>
        <span class="badge bg-success ms-2"><i class="fas fa-caret-up me-2"></i> 1,740.05</span>
    </div>

</div>