Product Slider

By Kevin

F6
#
ecommerce product slider product listing
How do I use This?

Product Slider for an eCommerce site that can be used to highlight many products.

HTML
<div class="ecommerce-product-slider orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <div class="row small-up-2 medium-up-4 large-up-5 align-center">
        <div class="column">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column hide-for-small-only">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column show-for-large">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column show-for-large">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="is-active orbit-slide">
      <div class="row small-up-2 medium-up-4 large-up-5 align-center">
        <div class="column">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column hide-for-small-only">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column show-for-large">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
        <div class="column show-for-large">
          <div class="product-card">
            <div class="product-card-thumbnail">
              <a href="#"><img src="https://placehold.it/180x180"/></a>
            </div>
            <h2 class="product-card-title"><a href="#">Product Name</a></h2>
            <span class="product-card-desc">Product Description</span>
            <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
            <div class="product-card-colors">
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
              <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
            </div>
          </div>
        </div>
      </div>
    </li>
 </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
  </nav>
</div>


.ecommerce-product-slider {
  .orbit-previous,
  .orbit-next {
    color: $medium-gray;
  }

  .orbit-bullets button {
    height: 0.65rem;
    width: 0.65rem;
  }

  .product-card {
    background-color: $white;
    border: 1px solid $light-gray;
    padding: 1rem;
    margin-bottom: 1.5rem;  
  }

  .product-card-thumbnail {
    display: block;
    position: relative;
  }

  .product-card-title {
    font-family: 'Open sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45rem;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .product-card-desc {
    color: $dark-gray;
    display: block;
    font-family: 'Open sans', sans-serif;
    font-size: 0.85rem;
  }

  .product-card-price {
    color: darken($dark-gray,30%);
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.8rem;
  }

  .product-card-sale {
    color: $medium-gray;
    display: inline-block;
    font-size: 0.85rem;
    margin-left: 0.3rem;
    text-decoration: line-through;
  }

  .product-card-colors {
    display: block;
    margin-top: 0.8rem;
  }

  .product-card-color-option {
    display: inline-block;
    height: 25px;
    width: 25px;
  }
}



.ecommerce-product-slider .orbit-previous,
.ecommerce-product-slider .orbit-next {
  color: #cacaca;
}

.ecommerce-product-slider .orbit-bullets button {
  height: 0.65rem;
  width: 0.65rem;
}

.ecommerce-product-slider .product-card {
  background-color: #fefefe;
  border: 1px solid #e6e6e6;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.ecommerce-product-slider .product-card-thumbnail {
  display: block;
  position: relative;
}

.ecommerce-product-slider .product-card-title {
  font-family: 'Open sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.ecommerce-product-slider .product-card-desc {
  color: #8a8a8a;
  display: block;
  font-family: 'Open sans', sans-serif;
  font-size: 0.85rem;
}

.ecommerce-product-slider .product-card-price {
  color: #3e3e3e;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.8rem;
}

.ecommerce-product-slider .product-card-sale {
  color: #cacaca;
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.3rem;
  text-decoration: line-through;
}

.ecommerce-product-slider .product-card-colors {
  display: block;
  margin-top: 0.8rem;
}

.ecommerce-product-slider .product-card-color-option {
  display: inline-block;
  height: 25px;
  width: 25px;
}
JS

Similar Building Blocks

container

Featured posts panel

F6
by Abdullah Salem
container

Promo Hero

F6
by Kevin
container

Product Hero Slider - Small

F6
by Kevin