react-product-glider
Version:
A customizable responsive product slider for React
177 lines (176 loc) • 4.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
require("./App.css");
var _ProductSlider = _interopRequireDefault(require("./ProductSlider"));
var _fa = require("react-icons/fa");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var products = [{
id: 1,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 2,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 3,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 4,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 5,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 6,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 7,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 8,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 9,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 10,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 11,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 12,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 13,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 14,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 15,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 16,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 17,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 18,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 19,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 20,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 21,
title: "Wireless Headphones",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1999
}, {
id: 22,
title: "Smart Watch",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 2999
}, {
id: 23,
title: "Bluetooth Speaker",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1499
}, {
id: 24,
title: "Fitness Band",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 999
}, {
id: 25,
title: "Earbuds",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1299
}, {
id: 26,
title: "Earbuds",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1299
}, {
id: 27,
title: "Earbuds",
image: "https://i.postimg.cc/KvJRL4qG/offer-2.jpg",
price: 1299
}];
var App = function App() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ProductSlider["default"], {
visibleSlides: 5,
autoPlay: true,
autoPlaySpeed: 3000,
showArrows: true,
showDots: false,
leftArrowIcon: /*#__PURE__*/_react["default"].createElement(_fa.FaChevronLeft, {
size: 20
}),
rightArrowIcon: /*#__PURE__*/_react["default"].createElement(_fa.FaChevronRight, {
size: 20
}),
responsive: {
768: 1,
1024: 2,
1440: 3,
1920: 5
}
}, products.map(function (p) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "product-card",
key: p.id
}, /*#__PURE__*/_react["default"].createElement("img", {
src: p.image,
alt: p.title
}), /*#__PURE__*/_react["default"].createElement("h3", null, p.title), /*#__PURE__*/_react["default"].createElement("p", null, "Price: \u20B9", p.price));
})));
};
var _default = exports["default"] = App;