Card Sets Carousel

Responsive carousels are used for displaying categories, products and articles.

Component Props

Section Properties

Text / Background Color Theme `[COLOR_THEME]`

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

View in new window for full preview

Section Modifier `[MODIFIER]`

Optionally add an overall modifier class to the component.

Section Vertical Spacing `[SPACING]`

Optional: Adds top and bottom padding to section.

none: No spacing applied to element
.sec-spacing: Adds top and bottom spacing to section
.sec-spacing-sm: Adds a small amount top and bottom spacing to section
.sec-spacing-lg: Adds a large amount top and bottom spacing to section

Container Modifier `[CONTAINER]`

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container: Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl: Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid: Full width section contrainer. Container runs from edge to egde of the viewport
.container-no-gutter-end: Container stretches only on right side past largest breakpoint.
.container-no-gutter-start: Container stretches only on left side past largest breakpoint.

Carousel Properties

Auto Play Carousel `[AUTOPLAY]`

Data attribute to control carousel autoplay feature.

data-autoplay="0": Disable autoplay feature.
data-autoplay="[INTEGER]": Change slides after a specified interval. Set in milliseconds. 0 by default.

Animation Duration `[ANIM_DURATION]`

Data attribute to control carousel animation duration between slides.

data-animdur="[ANIM_DURATION]": Integer. Set in milliseconds. 500 by default.

Responsive Slides Per View `[PREVIEW_XXL] [PREVIEW_XL] [PREVIEW_LG]`

Data attribute to control the number of slides to show at a specific breakpoint.

data-perview-xxl="[PREVIEW_XXL]": Integer. 4 by default. Set number of slides to show at the largest $xxl breakpoint.
data-perview-xl="[PREVIEW_XL]": Integer. 3 by default. Set number of slides to show at the extra large $xl breakpoint.
data-perview-lg="[PREVIEW_LG]": Integer. 2 by default. Set number of slides to show at the large $xl breakpoint.

Peak Slide `[PEAK_SLIDES]`

Data attribute to control how previous and next slides show.

data-peak-slides="none": No extra slides with show beyond set slide per view number.
data-peak-slides="l": This will peak a slide out from the left edge of the carousel.
data-peak-slides="r": This will peak a slide out from the right edge of the carousel.
data-peak-slides="lr": This will peak a slide out from the left and right edges of the carousel.

Carousel template

    
        <section class="csl-sec [COLOR_THEME] [SPACING] [MODIFIER]">
          <!-- Optional section heading -->
          <div class="container">
            <div class="row">
              <div class="col-12 sec-heading">
                <[HEADING_LVL]>
                  [HEADONG_TEXT]
                </[HEADING_LVL]>
              </div>
            </div>
          </div>

          <!-- Carousel container -->
          <div class="[CONTAINER]">
            <div class="row">
              <!-- Carousel -->
              <div id="[ID]"
                class="glide kb-crl"
                data-perview-xxl="[PREVIEW_XXL]"
                data-perview-xl="[PREVIEW_XL]"
                data-perview-lg="[PREVIEW_LG]"
                data-autoplay="[AUTOPLAY]"
                data-animdur="[ANIM_DURATION]"
                data-peak-slides="[PEAK_SLIDES]"
              >
                <!-- Carousel slides -->
                <div class="glide__track" data-glide-el="track">
                  <ul class="glide__slides">
                    <!-- Each carousel slide -->
                    <li class="glide__slide">
                      ...
                    </li>
                  </ul>
                </div>

                <!-- Bullets -->
                <div class="glide__bullets" data-glide-el="controls[nav]">
                  <!-- Each carousel slide -->
                  <button class="glide__bullet" data-glide-dir="=1" aria-label="View slide 1"></button>
                  <button class="glide__bullet" data-glide-dir="=2" aria-label="View slide 2"></button>
                </div>

                <!-- Navigation -->
                <div class="glide__arrows" data-glide-el="controls">
                  <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                    <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                    <span class="visually-hidden">Previous Item</span>
                  </button>
                  <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    <span class="visually-hidden">Next Item</span>
                  </button>
                </div>

              </div>
            </div>
          </div>
        </section>

Base Carousel

View in new window

View in new window for full preview

      
        <section class="csl-sec text-bg-none sec-spacing">
    <div class="container">
      <div class="row">
        <div class="col">
          <div id="exampleCarousel"
            class="glide kb-crl"
            data-perview-xxl="3"
            data-perview-xl="2"
            data-perview-lg="1"
            data-peak-slides="r"
          >
  
            <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Sed felis eget velit</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Article Title</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Sed felis eget velit</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Article Title</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Sed felis eget velit</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
                <li class="glide__slide">
                 <div class="card dyn-crd-atv">
                  
                <figure class="figure">
                    <img
                      srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                              ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                      sizes="(max-width: 576px) 480px,
                             (max-width: 768px) 720px,"
                      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                      alt="Image description"
                      class="card-img-top img-ar8-5"
                    >
                </figure>
                
                
                  <div class="card-body">
                    <h3 class="card-title">Article Title</h3>
                    <p class="card-date">Month 00, 2024</p>
                    <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
                    <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
                  </div>
                </div>
                </li>
              </ul>
            </div>
  
            <div class="glide__bullets" data-glide-el="controls[nav]">
              <button class="glide__bullet" data-glide-dir="=0" aria-label="View slide 1"></button>
              <button class="glide__bullet" data-glide-dir="=1" aria-label="View slide 2"></button>
              <button class="glide__bullet" data-glide-dir="=2" aria-label="View slide 3"></button>
              <button class="glide__bullet" data-glide-dir="=3" aria-label="View slide 4"></button>
              <button class="glide__bullet" data-glide-dir="=4" aria-label="View slide 5"></button>
              <button class="glide__bullet" data-glide-dir="=5" aria-label="View slide 6"></button>
            </div>
  
            <div class="glide__arrows" data-glide-el="controls">
              <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                <span class="visually-hidden">Previous Item</span>
              </button>
              <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                <span class="visually-hidden">Next Item</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Carousel No right container gutter

View in new window

View in new window for full preview

      
        <section class="csl-sec text-bg-none sec-spacing">
    <div class="container">
      <div class="row">
        <div class="col-12 sec-heading">
          <h2>
            Section Heading
          </h2>
        </div>
      </div>
    </div>
    <div class="container-no-gutter-end">
      <div class="row">
        <div class="col">
          <div id="exampleCarousel"
            class="glide kb-crl"
            data-autoplay="5000"
            data-animdur="1000"
            data-perview-xxl="4"
            data-perview-xl="3"
            data-perview-lg="2"
          >
  
            <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Sed felis eget velit</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Article Title</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Sed felis eget velit</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Article Title</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Sed felis eget velit</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Enim sed faucibus turpis in eu mi bibendum neque. Varius duis at consectetur lorem donec. Turpis massa sed elementum tempus egestas sed sed. Blandit libero volutpat sed cras.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-atv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                alt="Image description"
                class="card-img-top img-ar8-5"
              >
          </figure>
          
          
            <div class="card-body">
              <h3 class="card-title">Article Title</h3>
              <p class="card-date">Month 00, 2024</p>
              <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
              <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
            </div>
          </div>
                </li>
              </ul>
            </div>
  
            <div class="glide__bullets" data-glide-el="controls[nav]">
              <button class="glide__bullet" data-glide-dir="=0" aria-label="View slide 1"></button>
              <button class="glide__bullet" data-glide-dir="=1" aria-label="View slide 2"></button>
              <button class="glide__bullet" data-glide-dir="=2" aria-label="View slide 3"></button>
              <button class="glide__bullet" data-glide-dir="=3" aria-label="View slide 4"></button>
              <button class="glide__bullet" data-glide-dir="=4" aria-label="View slide 5"></button>
              <button class="glide__bullet" data-glide-dir="=5" aria-label="View slide 6"></button>
            </div>
  
            <div class="glide__arrows" data-glide-el="controls">
              <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                <span class="visually-hidden">Previous Item</span>
              </button>
              <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                <span class="visually-hidden">Next Item</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Events Carousel

View in new window

View in new window for full preview

      
        <section class="csl-sec text-bg-none sec-spacing">
    <div class="container">
      <div class="row">
        <div class="col">
          <div id="exampleEventsCarousel"
            class="glide kb-crl"
            data-perview-xxl="3"
            data-perview-xl="2"
            data-perview-lg="1"
            data-peak-slides="r"
          >
  
            <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">12</span>
                  <span class="card-date-month">Apr</span>
                </p>
                <h3 class="card-title">Enim sed faucibus turpis in eu mi bibendum</h3>
              </div>
              <p class="card-description">Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Condimentum mattis pellentesque id nibh tortor id aliquet lectus.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">28</span>
                  <span class="card-date-month">Feb</span>
                </p>
                <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
              </div>
              <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">12</span>
                  <span class="card-date-month">Apr</span>
                </p>
                <h3 class="card-title">Enim sed faucibus turpis in eu mi bibendum</h3>
              </div>
              <p class="card-description">Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Condimentum mattis pellentesque id nibh tortor id aliquet lectus.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">28</span>
                  <span class="card-date-month">Feb</span>
                </p>
                <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
              </div>
              <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">12</span>
                  <span class="card-date-month">Apr</span>
                </p>
                <h3 class="card-title">Enim sed faucibus turpis in eu mi bibendum</h3>
              </div>
              <p class="card-description">Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Condimentum mattis pellentesque id nibh tortor id aliquet lectus.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
                <li class="glide__slide">
           <div class="card dyn-crd-etv">
            
          <figure class="figure">
              <img
                srcset="../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w,
                        ../../../../assets/img//fpo/fpo-16-9@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                alt="Image description"
                class="card-img-top img-ar16-9"
              >
          </figure>
          
          
            <div class="card-body">
              <div class="card-date-title">
                <p class="card-date">
                  <span class="card-date-day">28</span>
                  <span class="card-date-month">Feb</span>
                </p>
                <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
              </div>
              <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
              <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
              <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
            </div>
          </div>
                </li>
              </ul>
            </div>
  
            <div class="glide__bullets" data-glide-el="controls[nav]">
              <button class="glide__bullet" data-glide-dir="=0" aria-label="View slide 1"></button>
              <button class="glide__bullet" data-glide-dir="=1" aria-label="View slide 2"></button>
              <button class="glide__bullet" data-glide-dir="=2" aria-label="View slide 3"></button>
              <button class="glide__bullet" data-glide-dir="=3" aria-label="View slide 4"></button>
              <button class="glide__bullet" data-glide-dir="=4" aria-label="View slide 5"></button>
              <button class="glide__bullet" data-glide-dir="=5" aria-label="View slide 6"></button>
            </div>
  
            <div class="glide__arrows" data-glide-el="controls">
              <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                <span class="visually-hidden">Previous Item</span>
              </button>
              <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                <span class="visually-hidden">Next Item</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Image Carousel

View in new window

View in new window for full preview

      
        
  <section class="csl-sec text-bg-none sec-spacing">
    <div class="container">
      <div class="row">
        <div class="col">
          <div id="exampleCarousel"
            class="glide kb-crl"
            data-perview-xxl="5"
            data-perview-xl="3"
            data-perview-lg="2"
          >
  
            <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
                <li class="glide__slide">
      <div class="card dyn-crd-img">
        
          
      <figure class="figure">
          <img
            srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w,
                    ../../../../assets/img//fpo/fpo-3-2@md.jpg 720w,"
            sizes="(max-width: 576px) 480px,
                   (max-width: 768px) 720px,"
            src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
            alt="Image description to show in lightbox"
            class="card-img-top img-ar3-2"
          >
      </figure>
      
      
        
      </div>
                </li>
              </ul>
            </div>
  
            <div class="glide__bullets" data-glide-el="controls[nav]">
              <button class="glide__bullet" data-glide-dir="=0" aria-label="View slide 1"></button>
              <button class="glide__bullet" data-glide-dir="=1" aria-label="View slide 2"></button>
              <button class="glide__bullet" data-glide-dir="=2" aria-label="View slide 3"></button>
              <button class="glide__bullet" data-glide-dir="=3" aria-label="View slide 4"></button>
              <button class="glide__bullet" data-glide-dir="=4" aria-label="View slide 5"></button>
              <button class="glide__bullet" data-glide-dir="=5" aria-label="View slide 6"></button>
            </div>
  
            <div class="glide__arrows" data-glide-el="controls">
              <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                <span class="visually-hidden">Previous Item</span>
              </button>
              <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                <span class="visually-hidden">Next Item</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Card Sets Carousel

Component Props

Section Properties

Text / Background Color Theme [COLOR_THEME]

Section Modifier [MODIFIER]

Section Vertical Spacing [SPACING]

Container Modifier [CONTAINER]

Carousel Properties

Auto Play Carousel [AUTOPLAY]

Animation Duration [ANIM_DURATION]

Responsive Slides Per View [PREVIEW_XXL] [PREVIEW_XL] [PREVIEW_LG]

Peak Slide [PEAK_SLIDES]

Carousel template

Base Carousel

Carousel No right container gutter

Events Carousel

Image Carousel

Text / Background Color Theme `[COLOR_THEME]`

Section Modifier `[MODIFIER]`

Section Vertical Spacing `[SPACING]`

Container Modifier `[CONTAINER]`

Auto Play Carousel `[AUTOPLAY]`

Animation Duration `[ANIM_DURATION]`

Responsive Slides Per View `[PREVIEW_XXL] [PREVIEW_XL] [PREVIEW_LG]`

Peak Slide `[PEAK_SLIDES]`