{{-- mainLayouts extends --}} @extends('layouts.contentLayoutMaster') {{-- Page title --}} @section('title', 'Carousel') {{-- main page content --}} @section('content')

Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience. It is touch enabled making it especially smooth to use on mobile.

Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.

jQuery Plugin Options

Option Name Description
duration Transition duration in milliseconds. (Default: 200)
dist Perspective zoom. If 0, all items are the same size. (Default: -100)
shift Set the spacing of the center item. (Default: 0)
padding Set the padding between non center items. (Default: 0)
fullWidth Make the carousel a full width slider like the second example. (Default: false)
indicators Set to true to show indicators. (Default: false)
noWrap Don't wrap around and cycle through items. (Default: false)

jQuery Plugin Methods

We have methods to pause, start, move to next and move to previous slide.


// Next slide
$('.carousel').carousel('next');
$('.carousel').carousel('next', 3); // Move next n times.
// Previous slide
$('.carousel').carousel('prev');
$('.carousel').carousel('prev', 4); // Move prev n times.
// Set to nth slide
$('.carousel').carousel('set', 4);
// Destroy carousel
$('.carousel').carousel('destroy');
          
@endsection {{-- page scripts --}} @section('page-script') @endsection