- var theme_customizer      = true;
- var owlcarousel           = true;
- var page_owlcarousel      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Owl Carousel
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Owl Carousel
          // Container-fluid starts
          .container-fluid
            .row
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 Slides Only 
                    p.f-m-light.mt-1
                      | The 
                      code .active
                      |  class needs to be added to one of the slides otherwise the carousel will not be visible.
                      code .d-block
                      |  and 
                      code .w-100 
                      |  on carousel images to prevent browser default image alignment.
                  .card-body
                    #carouselExampleSlidesOnly.carousel.slide(data-bs-ride='carousel')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/11.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/9.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/6.jpg' alt='drawing-room')
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 With Controls
                    p.f-m-light.mt-1
                      | Use the 
                      code .carousel-control-prev
                      |  & 
                      code .carousel-control-next
                      |  through previous and next controls. We recommend using 
                      code &lt;button&gt;
                      |  elements, but you can also use 
                      code &lt;a&gt;
                      |  elements with 
                      code role="button".
                  .card-body
                    #carouselExampleControls.carousel.slide(data-bs-ride='carousel')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/6.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/7.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/10.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/4.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/1.jpg' alt='drawing-room')
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleControls' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleControls' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 Auto Play Variant
                    p.f-m-light.mt-1
                      | Use the 
                      code .owl-carousel 
                      | through slides.
                  .card-body
                    #owl-carousel-13.owl-carousel.owl-theme
                      .item
                        img(src='../assets/images/slider/1.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/2.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/3.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/4.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/5.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/7.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/8.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/9.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/10.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/11.jpg', alt='Drawing-room')
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 Mouse Wheel Variant
                    p.f-m-light.mt-1
                      | Use the 
                      code .owl-carousel 
                      | through slides.
                  .card-body
                    #owl-carousel-15.owl-carousel.owl-theme.mouse-wheel
                      .item
                        img(src='../assets/images/slider/1.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/2.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/3.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/4.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/5.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/7.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/8.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/9.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/10.jpg', alt='Drawing-room')
                      .item
                        img(src='../assets/images/slider/11.jpg', alt='Drawing-room')
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 With Indicators
                    p.f-m-light.mt-1
                      | Use the 
                      code .carousel-indicators
                      |  through carousel indicates.
                  .card-body
                    #carouselExampleIndicators.carousel.slide(data-bs-ride='true')
                      .carousel-indicators
                        button.active(type='button' data-bs-target='#carouselExampleIndicators' data-bs-slide-to='0' aria-current='true' aria-label='Slide 1')
                        button(type='button' data-bs-target='#carouselExampleIndicators' data-bs-slide-to='1' aria-label='Slide 2')
                        button(type='button' data-bs-target='#carouselExampleIndicators' data-bs-slide-to='2' aria-label='Slide 3')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/3.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/8.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/10.jpg' alt='drawing-room')
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleIndicators' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleIndicators' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card
                  .card-header
                    h4 With Captions
                    p.f-m-light.mt-1
                      | Add captions to your slides easily with the
                      code  .carousel-caption
                      |  element within any 
                      code .carousel-item
                      | .
                  .card-body
                    #carouselExampleCaptions.carousel.slide(data-bs-ride='false')
                      .carousel-indicators
                        button.active(type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='0' aria-current='true' aria-label='Slide 1')
                        button(type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='1' aria-label='Slide 2')
                        button(type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='2' aria-label='Slide 3')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/9.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block
                            h5 The area in the house that is most comfortable.
                            p  You can watch folks you wouldn't have in your house amuse you in your living room thanks to the development of television.
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/1.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block
                            h5 Drawing Room
                            p Regardless of how big or tiny your home is, think about hiring an interior designer. They give you a calm living atmosphere in addition to decorating your home.
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/2.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block
                            h5 House Interior
                            p If you want to alter your way of life, start with redesigning your house's interior.
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card.height-equal
                  .card-header
                    h4 Cross-Fade
                    p.f-m-light.mt-1
                      | Add 
                      code .carousel-fade
                      |  to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content, you may want to add
                      code  .bg-body
                      |  or some custom CSS to the .carousel-items for proper cross-fading.
                  .card-body
                    #carouselExampleFade.carousel.slide.carousel-fade(data-bs-ride='carousel')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/1.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/11.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/7.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/10.jpg' alt='drawing-room')
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleFade' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleFade' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card.height-equal
                  .card-header
                    h4 Individual Carousel-Item Interval
                    p.f-m-light.mt-1
                    | Add 
                    code data-bs-interval=""
                    |  to a
                    code  .carousel-item
                    |   to change the amount of time to delay between automatically cycling to the next item.
                  .card-body
                    #carouselExampleInterval.carousel.slide(data-bs-ride='carousel')
                      .carousel-inner
                        .carousel-item.active(data-bs-interval='10000')
                          img.d-block.w-100(src='../assets/images/slider/5.jpg' alt='drawing-room')
                        .carousel-item(data-bs-interval='2000')
                          img.d-block.w-100(src='../assets/images/slider/2.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/10.jpg' alt='drawing-room')
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleInterval' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleInterval' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card.height-equal
                  .card-header
                    h4 Disable Touch Swiping
                    p.f-m-light.mt-1
                      | Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the 
                      code data-bs-touch 
                      |  attribute.
                  .card-body
                    #carouselExampleControlsNoTouching.carousel.slide(data-bs-touch='false')
                      .carousel-inner
                        .carousel-item.active
                          img.d-block.w-100(src='../assets/images/slider/4.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/8.jpg' alt='drawing-room')
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/6.jpg' alt='drawing-room')
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleControlsNoTouching' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleControlsNoTouching' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
              .col-xl-6.col-12
                .card.height-equal
                  .card-header
                    h4 Dark Variant
                    p.f-m-light.mt-1
                      | Add 
                      code .carousel-dark
                      |   to the 
                      code .carousel
                      |   for darker controls, indicators, and captions. 
                  .card-body
                    #carouselExampleDark.carousel.carousel-dark.slide(data-bs-ride='carousel')
                      .carousel-indicators
                        button.active(type='button' data-bs-target='#carouselExampleDark' data-bs-slide-to='0' aria-current='true' aria-label='Slide 1')
                        button(type='button' data-bs-target='#carouselExampleDark' data-bs-slide-to='1' aria-label='Slide 2')
                        button(type='button' data-bs-target='#carouselExampleDark' data-bs-slide-to='2' aria-label='Slide 3')
                      .carousel-inner
                        .carousel-item.active(data-bs-interval='10000')
                          img.d-block.w-100(src='../assets/images/slider/1.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block.carousel-opacity
                            h5 We decorate our homes
                            p If you have been dreaming about bringing your living room together, our designers are here to help. Come see what we can do for your space.
                        .carousel-item(data-bs-interval='2000')
                          img.d-block.w-100(src='../assets/images/slider/3.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block.carousel-opacity
                            h5 This couch is a great topic of conversation.
                            p A sofa is the ideal spot to enjoy a movie, nod off, and wake up.
                        .carousel-item
                          img.d-block.w-100(src='../assets/images/slider/6.jpg' alt='drawing-room')
                          .carousel-caption.d-none.d-md-block.carousel-opacity
                            h5 Sometimes all you really need to unwind is a comfortable couch.
                            p A house you can create with your friends is a great place.
                      button.carousel-control-prev(type='button' data-bs-target='#carouselExampleDark' data-bs-slide='prev')
                        span.carousel-control-prev-icon(aria-hidden='true')
                        span.visually-hidden Previous
                      button.carousel-control-next(type='button' data-bs-target='#carouselExampleDark' data-bs-slide='next')
                        span.carousel-control-next-icon(aria-hidden='true')
                        span.visually-hidden Next
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
