Carousel Section

Responsive list carousel section allowing content to run offscreen on right side


Component Props

    
      mainTitle: [string] - Section main title
      section: [array] - Alphabetic range of glossary terms
        - secTitle: [string] - Section main title
          items: [array] - list of product literature card data
            - term: [string] - Definition term
              description: [string] - Definition description
    
  

Product Carousel Example

  	
  		<section>
    <div class="container-fluid container-no-right-gutter">
      <div class="row g-0 rbn-section-space">
        <div class="col">
          <h3 class="section-title">Section title</h3>
  <div id="productCarousel1" class="glide rbnSlider">
  
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card card-rbn-product">
            <img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
              <p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
              <p class="card-text">Product short description.</span>
            </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 class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
          <span class="visually-hidden">Previous Slide</span>
        </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
          <span class="visually-hidden">Next Slide</span>
        </button>
      </div>
    </div>
  
  </div>
        </div>
      </div>
    </div>
  </section>
  
  	
  

Article Carousel Example

  	
  		<section class="bg-primary">
    <div class="container-fluid container-no-right-gutter">
      <div class="row g-0 rbn-section-space">
        <div class="col">
          <h2 class="section-title">Section title</h2>
  <div id="articleCarousel1" class="glide rbnSlider">
  
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
           <div class="card rbn-article-card">
            <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title">
                  <span class="card-sub-title">Super Heading</span>
                  Article Title
              </h3>
              <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
              <a href="#" class="card-link stretched-link mt-auto">Read more</a>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card rbn-article-card">
            <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title">
                  <span class="card-sub-title">Super Heading</span>
                  Article Title
              </h3>
              <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
              <a href="#" class="card-link stretched-link mt-auto">Read more</a>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card rbn-article-card">
            <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title">
                  <span class="card-sub-title">Super Heading</span>
                  Article Title
              </h3>
              <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
              <a href="#" class="card-link stretched-link mt-auto">Read more</a>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card rbn-article-card">
            <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title">
                  <span class="card-sub-title">Super Heading</span>
                  Article Title
              </h3>
              <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
              <a href="#" class="card-link stretched-link mt-auto">Read more</a>
            </div>
          </div>
        </li>
        <li class="glide__slide">
           <div class="card rbn-article-card">
            <img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
            <div class="card-body">
              <h3 class="card-title">
                  <span class="card-sub-title">Super Heading</span>
                  Article Title
              </h3>
              <p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
              <a href="#" class="card-link stretched-link mt-auto">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>
  
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
          <span class="visually-hidden">Previous Slide</span>
        </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
          <span class="visually-hidden">Next Slide</span>
        </button>
      </div>
    </div>
  
  </div>
        </div>
      </div>
    </div>
  </section>