// jshint esversion:6
import { Divider } from '@mui/material';
import React from 'react';
import Carousel from 'react-multi-carousel';
import "react-multi-carousel/lib/styles.css";
import { products } from './productdata';
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};
const Slide = ({title, products}) => {
return (
<div className='products_section'>
<div className="products_deal">
<h3>{title}</h3>
<button className='view_btn'> View All</button>
</div>
<Divider/>
<Carousel
responsive={responsive}
infinite={true}
draggable={false}
swipeable={true}
showDots={false}
centerMode={true}
autoPlay={true}
autoPlaySpeed={4000}
keyBoardControl={true}
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
containerClass="carousel_container"
>
{
products.map((product) =>
{
return (
<div className='products_items'>
<div className="product_img">
<img src={product.url} alt="productitem" />
</div>
<p className='products_name'>{product.title.shortTitle}</p>
<p className='products_offer'>{product.discount}</p>
<p className='products_explore'>{product.tagline}</p>
</div>
)
})
}
</Carousel>
</div>
)
}
export default SlideThe localhost:3000 is not rendering the webpage, it's showing a blank page. Above is a code for the file which possibly contains the error. I had a look at this which has the same error, but I am not doing that mistake here.
This is the products file:
//jshint esversion:6
export const products = [
{
id: 'product1',
url: 'https://rukminim1.flixcart.com/image/150/150/kapoo7k0/electric-kettle/p/6/s/pigeon-favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kapoo7k0/electric-kettle/p/6/s/pigeon-favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
title: {
shortTitle: 'Home & Kitchen',
longTitle: 'Pigeon FAVOURITE Electric Kettle (1.5 L, Silver, Black)'
},
price: {
mrp: 1195,
cost: 625,
discount: '47%'
},
description: 'This electric kettle from Pigeon will soon become a travelers best friend, a hostelite saviour and an answer to all the midnight cravings. With this handy appliance, you can boil water and use it to make instant noodles, packet soup, coffee and green tea.',
discount: 'Extra 10% Off',
tagline: 'Deal of the day'
},
{
id: 'product2',
url: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-maker/8/r/d/sandwich-01-flipkart-smartbuy-original-imagydds4zthxt8z.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-maker/8/r/d/sandwich-01-flipkart-smartbuy-original-imagydds4zthxt8z.jpeg?q=70',
title: {
shortTitle: 'Sandwich Makers',
longTitle: 'Flipkart SmartBuy Sandwich 01 Grill (Black)'
},
price: {
mrp: 1499,
cost: 899,
discount: '40%'
},
description: 'This non-stick sandwich toaster .easy to use and very handy. Directly hold over flame to make tasty toasts and toasted sandwiches. Specially designed by keeping your needs in mind, the sandwich maker makes whatever youre doing simpler, smarter and better',
discount: 'From 99+5% Off',
tagline: 'Pestige, Nova & more'
},
{
id: 'product3',
url: 'https://rukminim1.flixcart.com/image/150/150/kohigsw0/resistance-tube/c/s/e/new-adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-imag2xg88mhmwxz5.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kohigsw0/resistance-tube/c/s/e/new-adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-imag2xg88mhmwxz5.jpeg?q=70',
title: {
shortTitle: 'Fitness Gear',
longTitle: 'AJRO DEAL New Adjustable Single Resistance Tube (Multicolor) Resistance Tube (Multicolor)'
},
price: {
mrp: 499,
cost: 166,
discount: '66%'
},
description: 'This unique product can tone your back muscles, reduce belly fat, improve blood circulation and also improves your body posture. It increases the stamina, energy and vitality of the body. The elastic resistance of the rubber training rope can be used to train and exercise in whichever way you want, according to your physical needs.',
discount: 'Upto 70% Off',
tagline: 'Deal of the Day'
},
{
id: 'product4',
url: 'https://rukminim1.flixcart.com/image/300/300/kll7bm80/smartwatch/c/1/n/43-mo-sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kll7bm80/smartwatch/c/1/n/43-mo-sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
title: {
shortTitle: 'Smart Watches',
longTitle: 'Molife Sense 500 Smartwatch (Black Strap, Freesize)',
},
price: {
mrp: 6999,
cost: 4049,
discount: '42%'
},
description: 'The Molife Sense 500, a brilliant smartwatch with a beautiful large display. Say hello to the infinity 1.7-inch display with 2.5D curved edges. Thanks to seamless Bluetooth 5.0 connectivity, you wont have to keep waiting. Bring a change to your outfit every day with changeable straps. A splash of color every day keeps the boredom away.',
discount: 'Grab Now',
tagline: 'Best Seller'
},
{
id: 'product5',
url: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-2800-w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-2800-w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
title: {
shortTitle: 'Trimmers, Dryers & more',
longTitle: 'Nova Professional NHP 8220 Hair Dryer (1800 W, Multicolor)'
},
price: {
mrp: 1899,
cost: 1124,
discount: '40%'
},
description: '',
discount: 'From ₹499',
tagline: 'Kubra, Nova & more'
}
];This is the snapshot of the console:
I can't understand what's causing the error. Please help!
