Carousel Products

Last carousel you'll ever need

Shop Products Carousel

<div class="portfolio e-shop">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 products-carousel">
        <div class="gallery portfolio-grid portfolio-animation-std products-carousel-itself">
          <div class="gallery-cell col-xs-12 col-sm-6 col-md-4 col-lg-3" data-created="2015-08-16" data-price="$25.50" data-title="Spacious T-Shirt" data-groups='["tshirts"]'>
            <figure class="gallery-item shop-item">
              <a href="/img/shop/t-shirts/t-shirt-11.png" data-size="1024x768">
                <img src="/img/shop/t-shirts/t-shirt-11.png" alt="shop item 1">
              </a>
              <div class="shop-item-description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non elementum. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus</p>
                <hr>
                <p><span>Material:</span> Cotton</p>
                <p><span>Pattern:</span> Solid</p>
                <p><span>Climate:</span> All-Weather, Indoor</p>
                <button class="button button-primary button-rounded">Close</button>
              </div>
              <div class="text-center shop-item-info">
                <a class="title" data-product-id="1" href="/features/shop/single.html">Spacious T-Shirt</a>
                
                <div class="h4 price">$25.50</div>
                <div class='rateit' data-rateit-value='4.5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                <div class="shop-item-colors">
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-11.png" class="white-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-12.png" class="black-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-13.png" class="pink-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-14.png" class="blue-color"></a>
                </div>
          
                <div class="shop-item-size">
                  <a href='#' class='size-xs'>XS</a>
                  <a href='#' class='size-s'>S</a>
                  <a href='#' class='size-m'>M</a>
                  <a href='#' class='size-l'>L</a>
                  <a href='#' class='size-xl'>XL</a>
                </div>
                <div class="shop-item-description-button">
                  <a href="#">
                    <span class="fa-stack">
                      <i class="fa fa-file-o fa-stack-2x"></i>
                      <i class="fa fa-info fa-stack-1x"></i>
                    </span>
                  </a>
                </div>
                <div class="gallery-icon add-to-cart-button">
                  <input type="text" value="1">
                  <i class="fa fa-minus-square button-less"></i>
                  <i class="fa fa-plus-square button-more"></i>
                  <a href="#"><i class='fa fa-cart-arrow-down'></i></a>
                  <i class="fa fa-check text-success cart-success"></i>
                </div>
              </div>
              <div class="figcaption gallery-item-icons">
                <div class="gallery-item-icons-cell">
                  <div class="gallery-icon trigger-image">
                    <a href="#"><i class='fa fa-search-plus'></i></a>
                  </div>
                </div>
              </div>
            </figure>
          </div>          <div class="gallery-cell col-xs-12 col-sm-6 col-md-4 col-lg-3" data-created="2015-01-14" data-price="$24.99" data-title="Fitted T-Shirt" data-groups='["tshirts"]'>
            <figure class="gallery-item shop-item">
              <a href="/img/shop/t-shirts/t-shirt-21.png" data-size="1024x768">
                <img src="/img/shop/t-shirts/t-shirt-21.png" alt="shop item 2">
              </a>
              <div class="shop-item-description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non elementum. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus</p>
                <hr>
                <p><span>Material:</span> Cotton</p>
                <p><span>Pattern:</span> Solid</p>
                <p><span>Climate:</span> All-Weather, Indoor</p>
                <button class="button button-primary button-rounded">Close</button>
              </div>
              <div class="text-center shop-item-info">
                <a class="title" data-product-id="2" href="/features/shop/single.html">Fitted T-Shirt</a>
                <span class='sale-badge'>SALE</span><div class='sale'>$35.99</div>
                <div class="h4 price">$24.99</div>
                <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                <div class="shop-item-colors">
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-21.png" class="purple-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-22.png" class="red-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-23.png" class="white-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-24.png" class="black-color"></a>
                </div>
          
                <div class="shop-item-size">
                  <a href='#' class='size-xs'>XS</a>
                  <a href='#' class='size-s'>S</a>
                  <a href='#' class='size-m'>M</a>
                  <a href='#' class='size-l'>L</a>
                  <a href='#' class='size-xl'>XL</a>
                </div>
                <div class="shop-item-description-button">
                  <a href="#">
                    <span class="fa-stack">
                      <i class="fa fa-file-o fa-stack-2x"></i>
                      <i class="fa fa-info fa-stack-1x"></i>
                    </span>
                  </a>
                </div>
                <div class="gallery-icon add-to-cart-button">
                  <input type="text" value="1">
                  <i class="fa fa-minus-square button-less"></i>
                  <i class="fa fa-plus-square button-more"></i>
                  <a href="#"><i class='fa fa-cart-arrow-down'></i></a>
                  <i class="fa fa-check text-success cart-success"></i>
                </div>
              </div>
              <div class="figcaption gallery-item-icons">
                <div class="gallery-item-icons-cell">
                  <div class="gallery-icon trigger-image">
                    <a href="#"><i class='fa fa-search-plus'></i></a>
                  </div>
                </div>
              </div>
            </figure>
          </div>          <div class="gallery-cell col-xs-12 col-sm-6 col-md-4 col-lg-3" data-created="2013-08-20" data-price="$21.99" data-title="Woman T-Shirt" data-groups='["tshirts"]'>
            <figure class="gallery-item shop-item">
              <a href="/img/shop/t-shirts/t-shirt-31.png" data-size="1024x768">
                <img src="/img/shop/t-shirts/t-shirt-31.png" alt="shop item 3">
              </a>
              <div class="shop-item-description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non elementum. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus</p>
                <hr>
                <p><span>Material:</span> Cotton</p>
                <p><span>Pattern:</span> Solid</p>
                <p><span>Climate:</span> All-Weather, Indoor</p>
                <button class="button button-primary button-rounded">Close</button>
              </div>
              <div class="text-center shop-item-info">
                <a class="title" data-product-id="3" href="/features/shop/single.html">Woman T-Shirt</a>
                
                <div class="h4 price">$21.99</div>
                <div class='rateit' data-rateit-value='4.5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                <div class="shop-item-colors">
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-31.png" class="black-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-32.png" class="teal-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-33.png" class="red-color"></a>
                    <a href="#" data-url="/img/shop/t-shirts/t-shirt-34.png" class="pink-color"></a>
                </div>
          
                <div class="shop-item-size">
                  <a href='#' class='size-xs'>XS</a>
                  <a href='#' class='size-s'>S</a>
                  <a href='#' class='size-m'>M</a>
                </div>
                <div class="shop-item-description-button">
                  <a href="#">
                    <span class="fa-stack">
                      <i class="fa fa-file-o fa-stack-2x"></i>
                      <i class="fa fa-info fa-stack-1x"></i>
                    </span>
                  </a>
                </div>
                <div class="gallery-icon add-to-cart-button">
                  <input type="text" value="1">
                  <i class="fa fa-minus-square button-less"></i>
                  <i class="fa fa-plus-square button-more"></i>
                  <a href="#"><i class='fa fa-cart-arrow-down'></i></a>
                  <i class="fa fa-check text-success cart-success"></i>
                </div>
              </div>
              <div class="figcaption gallery-item-icons">
                <div class="gallery-item-icons-cell">
                  <div class="gallery-icon trigger-image">
                    <a href="#"><i class='fa fa-search-plus'></i></a>
                  </div>
                </div>
              </div>
            </figure>
          </div>          <div class="gallery-cell col-xs-12 col-sm-6 col-md-4 col-lg-3" data-created="2014-09-14" data-price="$110.00" data-title="Runner Hoodie" data-groups='["hoodies"]'>
            <figure class="gallery-item shop-item">
              <a href="/img/shop/hoodies/11.png" data-size="1024x768">
                <img src="/img/shop/hoodies/11.png" alt="shop item 4">
              </a>
              <div class="shop-item-description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non elementum. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus</p>
                <hr>
                <p><span>Material:</span> Cotton</p>
                <p><span>Pattern:</span> Solid</p>
                <p><span>Climate:</span> All-Weather, Indoor</p>
                <button class="button button-primary button-rounded">Close</button>
              </div>
              <div class="text-center shop-item-info">
                <a class="title" data-product-id="4" href="/features/shop/single.html">Runner Hoodie</a>
                <span class='sale-badge hot-badge'>HOT</span>
                <div class="h4 price">$110.00</div>
                <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                <div class="shop-item-colors">
                    <a href="#" data-url="/img/shop/hoodies/11.png" class="black-color"></a>
                    <a href="#" data-url="/img/shop/hoodies/12.png" class="white-color"></a>
                    <a href="#" data-url="/img/shop/hoodies/13.png" class="blue-color"></a>
                    <a href="#" data-url="/img/shop/hoodies/14.png" class="red-color"></a>
                </div>
          
                <div class="shop-item-size">
                  <a href='#' class='size-xs'>XS</a>
                  <a href='#' class='size-s'>S</a>
                  <a href='#' class='size-m'>M</a>
                  <a href='#' class='size-l'>L</a>
                  <a href='#' class='size-xl'>XL</a>
                </div>
                <div class="shop-item-description-button">
                  <a href="#">
                    <span class="fa-stack">
                      <i class="fa fa-file-o fa-stack-2x"></i>
                      <i class="fa fa-info fa-stack-1x"></i>
                    </span>
                  </a>
                </div>
                <div class="gallery-icon add-to-cart-button">
                  <input type="text" value="1">
                  <i class="fa fa-minus-square button-less"></i>
                  <i class="fa fa-plus-square button-more"></i>
                  <a href="#"><i class='fa fa-cart-arrow-down'></i></a>
                  <i class="fa fa-check text-success cart-success"></i>
                </div>
              </div>
              <div class="figcaption gallery-item-icons">
                <div class="gallery-item-icons-cell">
                  <div class="gallery-icon trigger-image">
                    <a href="#"><i class='fa fa-search-plus'></i></a>
                  </div>
                </div>
              </div>
            </figure>
          </div>        </div>
      </div>
    </div>
  </div>
</div>