-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
JayeshW
committed
Sep 6, 2023
1 parent
31ebde2
commit 3a2b2d5
Showing
2 changed files
with
116 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,59 @@ | ||
| import React from 'react' | ||
| import './Carousel.scss' | ||
| import React from "react"; | ||
| import "./Carousel.scss"; | ||
| import "slick-carousel/slick/slick.css"; | ||
| import "slick-carousel/slick/slick-theme.css"; | ||
| import Slider from "react-slick"; | ||
|
|
||
| function Carousel() { | ||
| let settings = { | ||
| infinite: true, | ||
| speed: 1000, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| autoplay: true | ||
| } | ||
| let settings = { | ||
| infinite: true, | ||
| speed: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| autoplay: true, | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='carousel'> | ||
| <Slider {...settings} className='carousel-slider'> | ||
| <div><img className='carousel-slide-img' src='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/51O45Sl0WLL._SX3000_.jpg' alt='Amazon.in image'/></div> | ||
| <div><img className='carousel-slide-img' src='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/61O759bS39L._SX3000_.jpg' alt='Amazon.in image'/></div> | ||
| <div><img className='carousel-slide-img' src='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/51ovs76vmtL._SX3000_.jpg' alt='Amazon.in image'/></div> | ||
| <div><img className='carousel-slide-img' src='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/61tjBFsRL+L._SX3000_.jpg' alt='Amazon.in image'/></div> | ||
| <div><img className='carousel-slide-img' src='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/61JkX-1tN9L._SX3000_.jpg' alt='Amazon.in image'/></div> | ||
| </Slider> | ||
| <div className="carousel"> | ||
| <Slider {...settings} className="carousel-slider"> | ||
| <div> | ||
| <img | ||
| className="carousel-slide-img" | ||
| src="https://m.media-amazon.com/images/I/61zAjw4bqPL._SX3000_.jpg" | ||
| alt="Amazon.in image" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| className="carousel-slide-img" | ||
| src="https://m.media-amazon.com/images/I/71QRxZvKnGL._SX3000_.jpg" | ||
| alt="Amazon.in image" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| className="carousel-slide-img" | ||
| src="https://m.media-amazon.com/images/I/61lwJy4B8PL._SX3000_.jpg" | ||
| alt="Amazon.in image" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| className="carousel-slide-img" | ||
| src="https://m.media-amazon.com/images/I/71Ie3JXGfVL._SX3000_.jpg" | ||
| alt="Amazon.in image" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| className="carousel-slide-img" | ||
| src="https://m.media-amazon.com/images/I/71U-Q+N7PXL._SX3000_.jpg" | ||
| alt="Amazon.in image" | ||
| /> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Carousel | ||
| export default Carousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,80 @@ | ||
| import React from 'react'; | ||
| import './Home.scss'; | ||
| import Carousel from '../Carousel/Carousel'; | ||
| import Product from '../Product/Product'; | ||
| import React from "react"; | ||
| import "./Home.scss"; | ||
| import Carousel from "../Carousel/Carousel"; | ||
| import Product from "../Product/Product"; | ||
|
|
||
| function Home() { | ||
| return ( | ||
| <div className='Home'> | ||
| <Carousel className='carousel-main'/> | ||
| <div className='home-products'> | ||
| <div className='home-row'> | ||
| <Product | ||
| id='123456' | ||
| title='Sony WH-CH720NHB Over-Ear Noise Cancellation(Black)' | ||
| price={9990} | ||
| rating='★★☆☆☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/51rpbVmi9XL._SX522_.jpg' | ||
| /> | ||
| <Product | ||
| id='456789' | ||
| title='boAt Wave Call Smart Watch, Smart Talk(Active Black)' | ||
| price={1999} | ||
| rating='★★★★☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/614AipEWSIL._SX522_.jpg' | ||
| /> | ||
| <Product | ||
| id='447891' | ||
| title='OnePlus 10R 5G (Black, 8GB RAM, 128GB Storage)' | ||
| <div className="Home"> | ||
| <Carousel className="carousel-main" /> | ||
| <div className="home-products"> | ||
| <div className="home-row"> | ||
| <Product | ||
| id="123456" | ||
| title="Sony WH-CH720NHB Over-Ear Noise Cancellation(Black)" | ||
| price={9990} | ||
| rating="★★☆☆☆" | ||
| image="https://m.media-amazon.com/images/I/51rpbVmi9XL._SL1200_.jpg" | ||
| /> | ||
| <Product | ||
| id="456789" | ||
| title="boAt Wave Call Smart Watch, Smart Talk(Active Black)" | ||
| price={1999} | ||
| rating="★★★★☆" | ||
| image="https://m.media-amazon.com/images/I/61H5PEqBBAL._SL1500_.jpg" | ||
| /> | ||
| <Product | ||
| id="447891" | ||
| title="OnePlus 10R 5G (Black, 8GB RAM, 128GB Storage)" | ||
| price={31999} | ||
| rating='★★★★☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/41o3CoW58tL._SX300_SY300_QL70_FMwebp_.jpg' | ||
| /> | ||
| <Product | ||
| id='227856' | ||
| title='JBL Cinema SB241, Dolby Digital Soundbar ' | ||
| rating="★★★★☆" | ||
| image="https://m.media-amazon.com/images/I/71BoiXkrEmL._SL1500_.jpg" | ||
| /> | ||
| <Product | ||
| id="227856" | ||
| title="JBL Cinema SB241, Dolby Digital Soundbar" | ||
| price={10999} | ||
| rating='★★★☆☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/61i28yZlsdL._SX522_.jpg' | ||
| /> | ||
| </div> | ||
| rating="★★★☆☆" | ||
| image="https://m.media-amazon.com/images/I/61i28yZlsdL._SL1500_.jpg" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className='home-row'> | ||
| <Product | ||
| id='551247' | ||
| title='God Of War Ragnarok | Standard Edition | PS5 Game (PlayStation 5)' | ||
| price={4488} | ||
| rating='★★★★★' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/81f3ZmXx3cL._SY500_.jpg' | ||
| /> | ||
| <Product | ||
| id='474715' | ||
| title='Sony Marvel Spider-Man: Miles Morales | PS5 Game (PlayStation 5)' | ||
| price={2649} | ||
| rating='★★★☆☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/81wXH8IqhKL._SY500_.jpg' | ||
| /> | ||
| <Product | ||
| id='714855' | ||
| title='Xbox Series X – Forza Horizon 5 Bundle' | ||
| <div className="home-row"> | ||
| <Product | ||
| id="551247" | ||
| title="God Of War Ragnarok | Standard Edition | PS5 Game (PlayStation 5)" | ||
| price={4488} | ||
| rating="★★★★★" | ||
| image="https://m.media-amazon.com/images/I/81f3ZmXx3cL._SL1500_.jpg" | ||
| /> | ||
| <Product | ||
| id="474715" | ||
| title="Sony Marvel Spider-Man: Miles Morales | PS5 Game (PlayStation 5)" | ||
| price={2649} | ||
| rating="★★★☆☆" | ||
| image="https://m.media-amazon.com/images/I/717s4q9FuiL._SL1500_.jpg" | ||
| /> | ||
| <Product | ||
| id="714855" | ||
| title="Xbox Series X – Forza Horizon 5 Bundle" | ||
| price={59990} | ||
| rating='★★☆☆☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/61rSOfp1U1L._SX522_.jpg' | ||
| /> | ||
| </div> | ||
| rating="★★☆☆☆" | ||
| image="https://m.media-amazon.com/images/I/71AbYCAvr-L._SL1500_.jpg" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className='home-row'> | ||
| <Product | ||
| id='235147' | ||
| title='Samsung 34-inch(86.4cm) LED 3440 x 1440 Pixels 2K WQHD, Curved Monitor, 21:9 Ultrawide, PBP, PIP, 100Hz, QLED, Thunderbolt 3 Port (LC34J791WTWXXL, Gray)' | ||
| <div className="home-row"> | ||
| <Product | ||
| id="235147" | ||
| title="Samsung 34-inch(86.4cm) LED 3440 x 1440 Pixels 2K WQHD, Curved Monitor, 21:9 Ultrawide, PBP, PIP, 100Hz, QLED, Thunderbolt 3 Port (LC34J791WTWXXL, Gray)" | ||
| price={76299} | ||
| rating='★★★☆☆' | ||
| image='https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T2/images/I/91pi34PiUPL._SX522_.jpg' | ||
| /> | ||
| </div> | ||
| rating="★★★☆☆" | ||
| image="https://m.media-amazon.com/images/I/81oADRhNq2L._AC_SL1500_.jpg" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Home | ||
| export default Home; |