- var page_Title = 'Owl Carousel';
- var theme_customizer      = true;
- var owlcarousel           = true;
- var swiper                = true;
- var custom_swiper         = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Owl Carousel
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    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
            h4.mb-3.mt-sm-5.mt-3.common-title Swiper Sliders
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Vertical Slider
                    p.f-m-light.mt-1
                      | Height of image can be set by adding 
                      code vertical-sweeper 
                      | & 
                      code sweeper-h 
                      | classes and images will be swept vertically.
                  .card-body  
                    .swiper.vertical-swiper.swiper-h
                      .swiper-wrapper 
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/1.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/2.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/3.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/4.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/5.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/6.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/7.jpg", alt="")
                      .swiper-pagination
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Nested Swiper
                    p.f-m-light.mt-1
                      | Height of image can be set by adding 
                      code nested-horizontal-swiper 
                      |  & 
                      code sweeper-h 
                      | classes and images will be swept vertically & horizontally.
                  .card-body  
                    .swiper.nested-horizontal-swiper.swiper-h
                      .swiper-wrapper
                        .swiper-slide 
                            img.max-w-full.h-auto(src="../assets/images/slider/7.jpg", alt="")
                        .swiper-slide
                          .swiper.nested-vertical-swiper
                            .swiper-wrapper
                              .swiper-slide 
                                img.max-w-full.h-auto(src="../assets/images/slider/8.jpg", alt="")
                              .swiper-slide
                                img.max-w-full.h-auto(src="../assets/images/slider/10.jpg", alt="")
                              .swiper-slide 
                                img.max-w-full.h-auto(src="../assets/images/slider/11.jpg", alt="")
                              .swiper-slide
                                img.max-w-full.h-auto(src="../assets/images/slider/1.jpg", alt="")
                              .swiper-slide
                                img.max-w-full.h-auto(src="../assets/images/slider/2.jpg", alt="")
                            .swiper-pagination
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/3.jpg", alt="")
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/4.jpg", alt="")
                      .swiper-pagination
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Mouse Wheel Variant
                    p.f-m-light.mt-1
                      | Height of image can be set by adding 
                      code mouseweel-swiper 
                      |  & 
                      code sweeper-h 
                      | classes and images will be swept through mouseweel.
                  .card-body  
                    .swiper.mouseweel-swiper.swiper-h
                      .swiper-wrapper
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/3.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/4.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/5.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/6.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/7.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/8.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/9.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/10.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/11.jpg", alt="")
                      .swiper-pagination
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Auto Play Variant
                    p.f-m-light.mt-1
                      | Height of image can be set by adding 
                      code autoplay-swiper 
                      | & 
                      code sweeper-h 
                      | classes and images will be swept autoplay.
                  .card-body  
                    .swiper.autoplay-swiper.swiper-h
                      .swiper-wrapper
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/11.jpg", alt="")
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/2.jpg", alt="")
                        .swiper-slide 
                          img.max-w-full.h-auto(src="../assets/images/slider/3.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/4.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/5.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/6.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/7.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/8.jpg", alt="")
                        .swiper-slide
                          img.max-w-full.h-auto(src="../assets/images/slider/10.jpg", alt="")
                      .swiper-button-next
                      .swiper-button-prev
                      .swiper-pagination
              div(class="col-span-12")
                  .card
                    .card-header
                      h5 Effect Coverflow
                      p.f-m-light.mt-1
                        | Height of image can be set by adding 
                        code coverflow-slider 
                        | class and images will be swept 3D way.
                    .card-body
                      .swiper.coverflow-slider
                        .swiper-wrapper
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/2.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/3.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/4.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/5.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/6.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/7.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/8.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/9.jpg", alt="")
                          .swiper-slide
                            img.max-w-full.h-auto(src="../assets/images/slider/10.jpg", alt="")
                        .swiper-pagination
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
