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="="></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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar8-5">
                
                  <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"></button>
              <button class="glide__bullet" data-glide-dir="=1"></button>
              <button class="glide__bullet" data-glide-dir="=2"></button>
              <button class="glide__bullet" data-glide-dir="=3"></button>
              <button class="glide__bullet" data-glide-dir="=4"></button>
              <button class="glide__bullet" data-glide-dir="=5"></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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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">
            <img
            srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
            sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
            src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
            alt="Image description"
            class="card-img-top img-ar8-5">
          
            <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"></button>
              <button class="glide__bullet" data-glide-dir="=1"></button>
              <button class="glide__bullet" data-glide-dir="=2"></button>
              <button class="glide__bullet" data-glide-dir="=3"></button>
              <button class="glide__bullet" data-glide-dir="=4"></button>
              <button class="glide__bullet" data-glide-dir="=5"></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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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">
                  <img
                  srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
                  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
                  src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
                  alt="Image description"
                  class="card-img-top img-ar16-9">
                
                  <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"></button>
              <button class="glide__bullet" data-glide-dir="=1"></button>
              <button class="glide__bullet" data-glide-dir="=2"></button>
              <button class="glide__bullet" data-glide-dir="=3"></button>
              <button class="glide__bullet" data-glide-dir="=4"></button>
              <button class="glide__bullet" data-glide-dir="=5"></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

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]`