i have the following logic problem im not being able to solve. i have an image slider that has 3 slides and 1 in the middle (checked == true). I need a logic that handles the following example:
(i=image,s=slide)
I start with:
s0i0/s1i1/s2i2
If i click slide 2 means it needs to move every slide one position to the left, handling the fourth image correctly, in this case:
s1i1/s2i2/s0i3
If from s0i0/s1i1/s2i2 i would have clicked slide 0 it would move every slide one position to the right, in this case it should be:
s2i3/s0i0/s1i1.
And this is my current Svelte code:
<script>
let index = 0;
let indexChecked = 0;
const products = [
{ "alt": "", "src": "/images/home/products/example1" },
{ "alt": "", "src": "/images/home/products/example2" },
{ "alt": "", "src": "/images/home/products/example3" },
{ "alt": "", "src": "/images/home/products/example4" }
]
function moveSlide(slideClicked: number) {
}
</script>
<div class= "bg-gray-100 px-8">
<div style="padding-bottom: 120px; padding-top: 20px">
<section id="slider">
<input type="radio" name="slider" id="s1" checked={indexChecked === 1}>
<input type="radio" name="slider" id="s2" checked={indexChecked === 2}>
<input type="radio" name="slider" id="s3" checked={indexChecked === 3}>
<label for="s1" id="slide1" style="background-repeat: no-repeat; background-size: cover; background-image: url('{products[].src}')" on:click={() => moveSlide(0)}></label>
<label for="s2" id="slide2" style="background-repeat: no-repeat; background-size: cover; background-image: url('{products[].src}')" on:click={() => moveSlide(1)}></label>
<label for="s3" id="slide3" style="background-repeat: no-repeat; background-size: cover; background-image: url('{products[].src}')" on:click={() => moveSlide(2)}></label>
</section>
</div>
</div>
Thank you
The logic i tried before was not letting me show the 4 image correctly as i was not able to handle left and right movements correctly
Iñigo Blanco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.