Recently Viewed Products

Responsive carousel displaying product cards for recently visited product pages.

    
      secTitle: [string] - Section main title
      carousel:
        id: [string] - Required carousel ID
        perView: [number] - Number of slides to display on desktop viewport widths. Defaults to 4.
        autoplay: [boolean|number] - Optional: Time (in milliseconds) to wait between each slide. Defaults to false.
        slides: [array] - List of slides to include
          - title: [string] - Display text for card
            subtitle: [string] - Optional
            description: [string] - Optional
            source: [string] - Image source
    
  

  	
  		 <section class="rbn-section-space">
    <div class="container-xxl">
      <div class="row mb-4 mb-lg-6">
        <div class="col text-center text-uppercase">
          <h2 class="h3 text-uppercase">Recently Viewed</h2>
        </div>
      </div>
    </div>
      <div class="container-fluid container-no-right-gutter">
        <div class="row">
          <div class="col">
  <div id="recentExample" class="glide rbnSlider" data-perview="4">
  
    <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="">
                  <div class="card-body">
                    <h3 class="card-title"><a href="#" class="stretched-link">[Collection Name]</a></h3>
                    <p class="card-text small text-muted mb-3">Starting at price</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="">
                  <div class="card-body">
                    <h3 class="card-title"><a href="#" class="stretched-link">[Collection Name]</a></h3>
                    <p class="card-text small text-muted mb-3">Starting at price</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="">
                  <div class="card-body">
                    <h3 class="card-title"><a href="#" class="stretched-link">[Collection Name]</a></h3>
                    <p class="card-text small text-muted mb-3">Starting at price</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="">
                  <div class="card-body">
                    <h3 class="card-title"><a href="#" class="stretched-link">[Collection Name]</a></h3>
                    <p class="card-text small text-muted mb-3">Starting at price</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="">
                  <div class="card-body">
                    <h3 class="card-title"><a href="#" class="stretched-link">[Collection Name]</a></h3>
                    <p class="card-text small text-muted mb-3">Starting at price</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>
  
      <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>