@extends('layouts.simple.master') @section('title', 'Owl Carousel') @section('css') @endsection @section('main_content')
The active class needs to be added to one of
the slides otherwise the carousel will not be visible. d-block and
w-100 on carousel images to prevent browser default image
alignment.
Use carousel-control-prev &
carousel-control-next through previous and next controls. We
recommend using <button> elements, but you can also use
<a> elements with role="button".
Use carousel-indicators through carousel
indicates.
Add captions to your slides easily with
the carousel-caption element within any carousel-item.
Add carousel-fade to your carousel to animate
slides with a fade transition instead of a slide. Depending on your carousel
content.
Add data-bs-interval="" to
a carousel-item to change the amount of time to delay between
automatically cycling to the next item.
Carousels support swiping left/right on touchscreen
devices to move between slides. This can be disabled using the
data-bs-touch attribute.
Add carousel-dark to the
carousel for darker controls, indicators, and captions.
Height of image can be set by adding
vertical-sweeper & sweeper-h classes and images will
be swept vertically.
Height of image can be set by adding
nested-horizontal-swiper & sweeper-h classes and
images will be swept vertically & horizontally.
Height of image can be set by adding
mouseweel-swiper & sweeper-h classes and images will
be swept through mouseweel.
Height of image can be set by adding
autoplay-swiper & sweeper-h classes and images will be
swept autoplay.
Height of image can be set by adding
coverflow-slider class and images will be swept 3D way.