A workable strategy for a slightly complex info slider

[saleemepoch]

Hi folks,

I am still pretty new to alpine.js and coming from jQuery world, so I am still trying to get my head around it. I would like some help/insight in how to use alpine.js to create an info slider that looks like this.

<div id="slider"  x-data="infoSlider()">
        <!-- main image -->
        <div id="left-div" style="background-image: url('main_image.jpg'; ?>');">

            <ul>
                <li @click="toggle($event)">
                    Item 1                    
                    <div class="w-full" ></div>
                </li>
                <li @click="toggle($event)">
                    Item 2                    
                    <div ></div>
                </li>
                <li @click="toggle($event)">
                    Item 3                    
                    <div ></div>
                </li>
            </ul>
        </div>

        <!-- info -->
        <div id="right-div">
            <div class="info-slides w-3/5 mx-auto mt-20">
                <div class="info-slide">
                    Info about the 1st item
                </div>
                <div class="info-slide">
                    Info about the 2nd item
                </div>
                <div class="info-slide">
                    Info about the 3rd item
                </div>
            </div>
        </div>

        <!-- bottom images -->
            <div id="bottom-images">
                <img src="bottom-image-1.jpg">
                <img src="bottom-image-2.jpg">
                <img src="bottom-image-3.jpg">
            </div>
    </div>

The idea is when the user clicks on item 1:

a) it animates the div inside li by adding w-full class and removing w-full from all other _li_s

b) it uses the index of the clicked li to target the right info-slide class and animates it to show while hiding others

c) it targets bottom images and changes them.

I have started with something like this:

window.infoSlider = function () {
    return {
        selected: false,
        toggle(e) {
            const li = e.target.parentElement;
            const ul = li.parentElement;
            const index = [...ul.children].indexOf(li);
            console.log(index);
        }
    };
};

As you can see, I have managed to get the index of the li clicked, but I am lost on how to target the div inside the clicked li and animate by adding w-full class.

I also want to target the right info-slide div to make it appear and hide others.

How can I achieve this?