Does this slider requires JS or pure css ok with it?
Problem is i need auto loop, and besides when moving between navigations , the page moves downwards? a bit weird
<div className='homepage__slider'>
<div className='homepage__slides'>
{slides?.map((slide, index) => {
let prevSlideId = index - 1 < 0 ? slides?.length - 1 : index - 1;
let nextSlideId = index + 1 >= slides?.length - 1 ? 0 : index + 1;
console.log(`prevSlideId: ${prevSlideId}`);
console.log(`nextSlideId: ${nextSlideId}`);
return (
<div
className='homepage__slide'
key={slide?.id}
id={`slide_${index}`}
>
<a
className='slide__prev'
title='Prev'
href={`#slide_${prevSlideId}`}
></a>
<Image
className='homepage__slide-image'
src={slide?.image_url}
alt={slide?.alt}
height='300'
width='300'
/>{' '}
<a
className='slide__next'
title='Next'
href={`#slide_${nextSlideId}`}
></a>
</div>
);
})}
</div>
</div>
<div className='homepage__slider'>
<div className='homepage__slides'>
{slides?.map((slide, index) => {
let prevSlideId = index - 1 < 0 ? slides?.length - 1 : index - 1;
let nextSlideId = index + 1 >= slides?.length - 1 ? 0 : index + 1;
console.log(`prevSlideId: ${prevSlideId}`);
console.log(`nextSlideId: ${nextSlideId}`);
return (
<div
className='homepage__slide'
key={slide?.id}
id={`slide_${index}`}
>
<a
className='slide__prev'
title='Prev'
href={`#slide_${prevSlideId}`}
></a>
<Image
className='homepage__slide-image'
src={slide?.image_url}
alt={slide?.alt}
height='300'
width='300'
/>{' '}
<a
className='slide__next'
title='Next'
href={`#slide_${nextSlideId}`}
></a>
</div>
);
})}
</div>
</div>
1 Reply
.homepage {
&__slider {
width: 100%;
max-width: 37.5rem; // 600px
height: 25rem; // 400px
margin: 1.25rem; // 20px;
text-align: center;
border-radius: 1.25rem; // 20px
position: relative;
overflow: hidden;
}
&__slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
&__slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 25rem; // 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
&-image {
position: relative;
}
a {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
}
}
.homepage {
&__slider {
width: 100%;
max-width: 37.5rem; // 600px
height: 25rem; // 400px
margin: 1.25rem; // 20px;
text-align: center;
border-radius: 1.25rem; // 20px
position: relative;
overflow: hidden;
}
&__slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
&__slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 25rem; // 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
&-image {
position: relative;
}
a {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
}
}