0
233
ViewsAdding Alpinejs Transition Effect after updating "x-text" value
I am trying to build a simple slider with alpinejs and tailwindcss. We have a very simple code which slide in two array values (I am going to make it a product slider):
Later its gonna be like:
<div x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5], text: ['a', 'b', 'c', 'd', 'e'] }">
previous item
<div x-text="text[activeSlide-2] ? text[activeSlide-2] : text[slides.length-1]"></div>
<div class="my-5 border border-black">
current item
<div class="font-bold" x-text="activeSlide"></div>
<div class="font-bold" x-text="text[activeSlide-1]"></div>
</div>
next item
<div x-text="text[activeSlide] ? text[activeSlide] : text[0]"></div>
<div class="mt-5">
<button x-on:click='activeSlide= activeSlide === 1 ? slides.length : activeSlide - 1'>Prev</button>
<button x-on:click='activeSlide= activeSlide === slides.length ? 1 : activeSlide + 1'>Next</button>
</div>
</div>
The problem is I want to add some transition effect when updating x-text values (when changing slides) and x-transition is for x-show or ... not for updating the x-text value.
Could you please guide me, how can I add some effects when changing the values of x-text? later its gonna be images src and I want to kind of refresh the whole card (slide)
Many thanks in advance
1 answers
Answer question0
I think I should do something like
<div x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5], text: ['a', 'b', 'c', 'd', 'e'] }">
<template x-for="slide in slides" :key="slide">
<div x-show="activeSlide === slide">
...
And it must be okay to use x-transition because x-show is changing...
First example that I found was this way, but I wanted to avoid duplication (It will render everything nth time! and I think its not good). I wanted to avoid Rendering All the cards and hide them, I wanted to just pass and change the data so I came up with the code in the question.
So if anyone has a way to use the code in the question and add transition to it, I will appreciate it!
Thanks again