WrenchBoard/WrenchBoardMainSite2025
2
0
Fork 0
Code Issues Pull Requests Releases Activity

missing com added

Browse Source
This commit was merged in pull request #18.
This commit is contained in:
victorAnumudu
2024-08-10 21:21:37 +01:00
parent 02119e5bad
commit fbc805e3c2
3 changed files with 161 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/FeaturedScreenTwo.js
+145
View File
@@ -0,0 +1,145 @@
"use client"
import React, {useState} from 'react'
import Carousel from 'react-simply-carousel';
import Image from 'next/image'
export default function FeaturedScreenTwo() {
const [activeSlide, setActiveSlide] = useState(0);
const handleSlideIndexChange = () => {
setActiveSlideIndex(2)
}
return (
<div className='carousel pt-5'>
<Carousel
activeSlideIndex={activeSlide}
onRequestChange={setActiveSlide}
itemsToShow={1}
itemsToScroll={1}
infinite={true}
autoplay={true}
// delay={3000}
autoplayDelay={5000}
speed={3000}
easing="linear"
centerMode
preventScrollOnSwipe
swipeTreshold={60}
updateOnItemClick={true}
activeSlideProps={{
style: {
transform: 'scale(1)'
}
}}
containerProps={{
style: {
width: "100%",
justifyContent: "space-between",
userSelect: "none"
}
}}
forwardBtnProps={{
//here you can also pass className, or any other button element attributes
style: {
alignSelf: 'center',
background: 'black',
border: 'none',
borderRadius: '50%',
color: 'white',
cursor: 'pointer',
fontSize: '20px',
height: 30,
lineHeight: 1,
textAlign: 'center',
width: 30,
display: 'none'
},
children: <span>{`>`}</span>,
}}
backwardBtnProps={{
//here you can also pass className, or any other button element attributes
style: {
alignSelf: 'center',
background: 'black',
border: 'none',
borderRadius: '50%',
color: 'white',
cursor: 'pointer',
fontSize: '20px',
height: 30,
lineHeight: 1,
textAlign: 'center',
width: 30,
display: 'none'
},
children: <span>{`<`}</span>,
}}
dotsNav={{
show: true,
itemBtnProps: {
style: {
height: 16,
width: 16,
borderRadius: "50%",
border: 0
}
},
activeItemBtnProps: {
style: {
height: 16,
width: 16,
borderRadius: "50%",
border: 0,
background: "black"
}
}
}}
responsiveProps={[
{
itemsToShow: 1,
itemsToScroll: 1,
minWidth: 0,
},
{
itemsToShow: 3,
itemsToScroll: 1,
minWidth: 568,
},
{
itemsToShow: 5,
itemsToScroll: 1,
minWidth: 992,
},
{
itemsToShow: 7,
itemsToScroll: 1,
minWidth: 1440,
},
]}
>
{/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
</div>
<div className='slider' style={{ background: 'transparent' }}>
<img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
</div>
</Carousel>
</div>
);
}