Please wait...
Page is loading

Carousel

BS4 theme Carousel is an enhancement of BS Carousel .

Getting started

To use BS4 alerts simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

RTL

BS4 theme Carousel fully supports RTL, no extra work needed!

.row
  .col
    #carouselExampleCaptions.carousel.slide
      %ol.carousel-indicators
        %li.active{'data-target': "#carouselExampleCaptions", 'data-slide-to': '0'}
        %li{'data-target': "#carouselExampleCaptions", 'data-slide-to': '1'}
        %li{'data-target': "#carouselExampleCaptions", 'data-slide-to': '2'}
      .carousel-inner
        .carousel-item.active
          :plain
            PlaceholderFirst slide
          .carousel-caption.d-none.d-md-block
            %h5='First slide label'
            %p='Nulla vitae elit libero, a pharetra augue mollis interdum.'
        .carousel-item
          :plain
            PlaceholderSecond slide
          .carousel-caption.d-none.d-md-block
            %h5='Second slide label'
            %p='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        .carousel-item
          :plain
            PlaceholderThird slide
          .carousel-caption.d-none.d-md-block
            %h5='Third slide label'
            %p='Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
      =link_to '#carouselExampleCaptions', role: "button", 'data-slide': "prev", class: "carousel-control-prev" do
        %span.carousel-control-prev-icon{'aria-hidden': "true"}
        %span.sr-only='Previous'
      =link_to '#carouselExampleCaptions', role: "button", 'data-slide': "next", class: "carousel-control-next" do
        %span.carousel-control-next-icon{'aria-hidden': "true"}
        %span.sr-only='Next'



:sass
  .carousel
    .carousel-item
      svg
        font-size: 3.5rem
        text-anchor: middle
On this page