Slider navigation click change content

[n_merciano]

Hi Guys,

I am facing some issues i have a category menu like this:

    <div class="slider__navigation">
        <ul>
            <li><a href="#">Beurzen &amp; events</a></li>
            <li><a href="#">Wellness</a></li>
            <li><a href="#">Musea</a></li>
            <li><a href="#">Musicals</a></li>
            <li><a href="#">Theater &amp; Show</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Pretparken</a></li>
        </ul>
    </div>

And my content:

    <div class="slider__wrapper">
        <div class="content" data-for="musicals">
            <div class="content__item content__item--small">
                <div class="content__bg content__bg--small"  style="background-image: url('@themeImages/kid.jpg');">

                    <!-- Price Tag -->
                    <div class="price">
                        <div class="price__tag">
                            <div class="price__content">
                                <p class="price__content--total">&euro;20</p>
                                <p class="price__content--info">Korting</p>
                            </div>
                        </div>
                    </div>

                    <!-- Content Info -->
                    <div class="content__info">
                        <p class="label"><span>Dagjes uit</span> Dierentuinen</p>
                        <h2>Lorem ipsum dolor sit amet dierentuin</h2>
                         <div class="price">
                            <div class="price__overview">
                                <p class="price__overview--old">&euro;58<span class="price__overview--cents">,50</span></p>
                                <p class="price__overview--new">&euro;38<span class="price__overview--cents">,50</span></p>
                            </div>
                        </div>
                    </div>

                    <!-- Read More -->
                     <div class="read__more">
                        <a href="#" class="btn btn--arrow"></a>
                    </div>
                </div>
            </div>

            <div class="content__item content__item--large">
                <div class="content__bg content__bg--large"  style="background-image: url('@themeImages/photo-3.jpg');">

                    <!-- Price Tag -->
                    <div class="price">
                        <div class="price__tag">
                            <div class="price__content">
                                <p class="price__content--total">&euro;20</p>
                                <p class="price__content--info">Korting</p>
                            </div>
                        </div>
                    </div>

                    <!-- Content Info -->
                    <div class="content__info">
                        <p class="label"><span>Dagjes uit</span> Dierentuinen</p>
                        <h2>Lorem ipsum dolor sit amet dierentuin</h2>
                         <div class="price">
                            <div class="price__overview">
                                <p class="price__overview--old">&euro;58<span class="price__overview--cents">,50</span></p>
                                <p class="price__overview--new">&euro;38<span class="price__overview--cents">,50</span></p>
                            </div>
                        </div>
                    </div>

                    <!-- Read More -->
                     <div class="read__more">
                        <a href="#" class="btn btn--arrow"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

What i want is when you click on one “LI” menu item to change the background image and the content DIV like fade in fade out.

But i have no clue how…

this is my Javascript:

(() => {

    let slider = document.querySelector('.slider'),
        sliderNavigation = slider.querySelector('.slider__navigation');

        if(sliderNavigation) {
            let sliderCategories = sliderNavigation.querySelectorAll('li'),
                sliderItems = slider.querySelectorAll('.content__item');

            [].forEach.call(sliderCategories, (sliderCategory) => {
                sliderCategory.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log(sliderCategory.textContent);
                });
            });
        }
})();

When you click on a list item it should toggle the “content” data-for=“musicals”.

How can i do this?

Thanks

[m3g4p0p]

You might wrap the slides in a container with overflow: hidden; then all you need to to is translate the content based on the container width × the index of the nav item clicked. You don’t even have to cross-reference any elements with data-* attributes or the like – here’s a pen: