In my Angular application, I've successfully implemented an image slider. However, I am looking to tweak its behavior specifically when navigating between non-adjacent slides using the circular navigation buttons located below the slider.
Currently, when transitioning from one image to another (for example, from the 4th image to the 2nd image), all intermediate images are displayed during the transition. What I want is for the slider to smoothly glide directly from the current image to the target image, showing only these two images during the transition.
Is there a way to achieve this?
Check out the Stackblitz Demo for reference.
html
<div class="slider-container">
<div class="slider">
<div
class="slide"
*ngFor="let image of images; let i = index"
[ngClass]="{'active': i === currentIndex, 'prev': i === (currentIndex - 1 + images.length) % images.length}"
>
<img [src]="image" alt="Image {{ i + 1 }}" />
</div>
<div class="nav prev" (click)="prevSlide()">❮</div>
<div class="nav next" (click)="nextSlide()">❯</div>
</div>
<div class="indicators">
<span
class="dot"
*ngFor="let image of images; let i = index"
[ngClass]="{'active': i === currentIndex}"
(click)="goToSlide(i)"
></span>
</div>
</div>
css
.slider-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
/* Add your CSS styles here */
ts
// Add your component logic here