@upendradevsingh/webcore
Version:
UI Core Components for web
300 lines (299 loc) • 15.6 kB
JavaScript
import React, {Component} from 'react';
import { ResponsiveCarousel } from '../../../../src/Carousel';
export default class ResponsiveCarouselComponent extends Component {
render() {
return (
<div class="carousel-responsive">
<ResponsiveCarousel>
<div class="slide product-tile slick-slide slick-active">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="UN573MA58DKNINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
1499</span>
<span class="product-price">
<span class="rupee"></span>
1275</span>
<span class="discount">(-15%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide slick-active">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="AN012WA68BWTINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide2.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
2799</span>
<span class="product-price">
<span class="rupee"></span>
1400</span>
<span class="discount">(-50%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide slick-active">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="TO348MA03TCQINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="product-price">
<span class="rupee"></span>
6999
</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide slick-active">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="NE988WA34BZDINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
4490</span>
<span class="product-price">
<span class="rupee"></span>
3368</span>
<span class="discount">(-25%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide slick-active">
<a href="#" class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="SW222HO59ODKINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
1299</span>
<span class="product-price">
<span class="rupee"></span>
948</span>
<span class="discount">(-27%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide">
<a href="#" class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="SW222HO58ODLINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide2.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
1299</span>
<span class="product-price">
<span class="rupee"></span>
948</span>
<span class="discount">(-27%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="AR049JW22YGBINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide2.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="product-price">
<span class="rupee"></span>
13995
</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="HI065BG26UFTINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide2.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
1895</span>
<span class="product-price">
<span class="rupee"></span>
1137</span>
<span class="discount">(-40%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="DO102WA35WUDINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="prev-price">
<span class="rupee"></span>
2390</span>
<span class="product-price">
<span class="rupee"></span>
1912</span>
<span class="discount">(-20%)</span>
</div>
</div>
</a>
</div>
<div class="slide product-tile slick-slide">
<a
href="#"
class="white-hover">
<figure>
<div class="wishlist">
<span data-sku="SA038WA66YHGINDFAS" class="wishlist-icon "></span>
<span class="tool-tip">Add To Wishlist</span>
</div>
<span class="overlay"></span>
<img
src="/prod_slide1.jpg"
class="thumb loaded"
alt=""/></figure>
<div class="product-info">
<h4>Product Brand
<span>Product Display Name</span>
</h4>
<div class="price">
<span class="product-price">
<span class="rupee"></span>
3499
</span>
</div>
</div>
</a>
</div>
</ResponsiveCarousel>
</div>
);
}
}