@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.