Как сделать переключение фотографий по кнопкам?

Question

[barakuda1]

Здравствуйте!

<div class="container">
                    <ul class="services_nav">
                        <li class="services_button"><a href="#" class="main-button">Кнопка 1</a></li>
                        <li class="services_button"><a href="#" class="main-button">Кнопка 2</a></li>
                        <li class="services_button"><a href="#" class="main-button">Кнопка 3</a></li>
                        <li class="services_button"><a href="#" class="main-button">Кнопка 4</a></li>
                        <li class="services_button"><a href="#" class="main-button">Кнопка 5</a></li>
                    </ul>
            </div>
            <div class="container">
                <div class="services_slider">
                    <img class="service_slider_img" src="assets/images/services-1.png" alt="slider">
                </div>
            </div>

У меня есть такой код на текущий момент, как вообще правильно реализовывать переключение фотографий?
На каждую кнопку своя фотография.

Как один из вариантов, который я считаю "костыльным" - это повесить на все кнопки id и через jquery отлавливать, какая кнопка была нажата, после чего, в services_slider менять html код с нужной фотографией.

Answer 1

[vıtalıyırtlach]

Я вижу здесь два варианта:
1. Навесить id (к примеру image-1) и по нажатию на li проверять этот параметр и ставить нужную картинку
2. По тексту в кнопке тоже по нажатию (вот это костыльный вариант)

Comments

[barakuda1]

Попробовал сейчас на примере слайдера сделать, но что-то не работает и в консоль ошибку не отдает.
Изображения не переключает.

.my-slider-item { display: none; }

<div class="container">
                    <ul class="services_nav">
                        <li class="services_button"><a href="#" class="main-button" onclick="currentSlide(1)">Кнопка 1</a></li>
                        <li class="services_button"><a href="#" class="main-button" onclick="currentSlide(2)">Кнопка 2</a></li>
                        <li class="services_button"><a href="#" class="main-button" onclick="currentSlide(3)">Кнопка 3</a></li>
                        <li class="services_button"><a href="#" class="main-button" onclick="currentSlide(4)">Кнопка 4</a></li>
                        <li class="services_button"><a href="#" class="main-button" onclick="currentSlide(5)">Кнопка 5</a></li>
                    </ul>
            </div>
            <div class="container">
                <div class="services_slider">
                    <div class="my-slider-item">
                        <img class="service_slider_img" src="assets/images/services-4.png" alt="slider">
                    </div>
                    <div class="my-slider-item">
                        <img class="service_slider_img" src="assets/images/services-3.png" alt="slider">
                    </div>
                    <div class="my-slider-item">
                        <img class="service_slider_img" src="assets/images/services-5.png" alt="slider">
                    </div>
                    <div class="my-slider-item">
                        <img class="service_slider_img" src="assets/images/services-1.png" alt="slider">
                    </div>
                    <div class="my-slider-item">
                        <img class="service_slider_img" src="assets/images/services-2.png" alt="slider">
                    </div>
                    <a href="#" class="start-button">Попробовать</a>
                </div>

<script>
        var slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        // Thumbnail image controls
        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("my-slider-item");
            // var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            // for (i = 0; i < dots.length; i++) {
            //     dots[i].className = dots[i].className.replace(" active", "");
            // }
            slides[slideIndex-1].style.display = "block";
            // dots[slideIndex-1].className += " active";
        }
    </script>

Answer 2

[Semantic.Moscow]

можно прямо из href отлавливать нужное вам место в слайдере

document.addEventListener(
	'click',function(e){
		if(e.target.tagName==='A'){
			let h=new URL(e.target.href).hash;
			if(h !=''){
				e.preventDefault();
				let b=document.getElementById(h.replace('#',''));
				........}}});