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