18
Янв
2022

Что нужно добавить в код, чтобы при нажатии на карусель с фотографией менялся контент (сейчас меняется при клике на стрелочки)

const preweusSlider = document.getElementById('preweusSlider')
    const nextSlider = document.getElementById('nextSlider')
    let index = 0
    
    const sliderContainer = document.querySelector('.people-slider')
    
    preweusSlider.addEventListener('click', function(){
        sliderContainer.children[index].hidden = true
        index --
        if( index < 0){
            index = sliderContainer.children.length -1
        }
        sliderContainer.children[index].hidden = false
    })
    
    nextSlider.addEventListener('click', function(){
        sliderContainer.children[index].hidden = true
         
        if( index === sliderContainer.children.length -1){
            index = 0 
            // console.log(index)
        } else {
            index ++
        }
        sliderContainer.children[index].hidden = false
        
    })
<div class="slider container">
                        <div class="people-slider">
                            <div class="slider_info" data-content-slider="designer" >
                                <p class="slider_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, eligendi natus explicabo perferendis exercitationem suscipit odio debitis voluptatum! Suscipit eos laborum magnam, libero et odit nam quo ad doloribus vitae?</p>
                                <h2 class="slider_fio">Hasan Ali</h2>
                                <h2 class="slider_position">UX Designer</h2>
                                <img class="slider_foto" src="./images/designer.png" alt="foto-designer">
                            </div>
                            <div class="slider_info" data-content-slider="marketer" hidden>
                                <p class="slider_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quam cum repellat dignissimos maiores, nesciunt dolorum praesentium voluptate soluta quasi vero eius recusandae officia laudantium labore fugit expedita, ex vitae!</p>
                                <h2 class="slider_fio">Marine Orel</h2>
                                <h2 class="slider_position">Marketer</h2>
                                <img class="slider_foto" src="./images/marketer.png" alt="foto-marketer">
                            </div>
                            <div class="slider_info" data-content-slider="analitycs" hidden>
                                <p class="slider_text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, doloremque sequi. Deleniti quasi odit ipsam adipisci, neque possimus non ad architecto a distinctio amet saepe veritatis, aliquid quia similique accusamus.</p>
                                <h2 class="slider_fio">Ruslan Tay</h2>
                                <h2 class="slider_position">Analitycs</h2>
                                <img class="slider_foto" src="./images/analitycs.png" alt="foto-analitycs">
                            </div>
                            <div class="slider_info" data-content-slider="developer" hidden>
                                <p class="slider_text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit consequatur neque fuga enim alias! Vitae eius veniam sint beatae quis. Provident, commodi doloremque. Illo tenetur repellat ut unde. Quas, voluptates.</p>
                                <h2 class="slider_fio">Olena Vinogradova</h2>
                                <h2 class="slider_position">Developer</h2>
                                <img class="slider_foto" src="./images/developer.png" alt="foto-developer">
                            </div>
                        </div>
                    </div>  
       <div class="people_slider container">
                    <div class="people_bottom_slider"> <div class="previous_slider_link" id="preweusSlider"></div>
                                <div class="people_item">
                                <img class="people_item_img" src="./images/designer.png" alt="foto-designer" data-title-people="designer">
                            </div>
                            <div class="people_item">
                                <img class="people_item_img" src="./images/marketer.png" alt="foto-marketer" data-title-people="marketer">
                            </div>
                            <div class="people_item">
                                <img class="people_item_img" src="./images/analitycs.png" alt="foto-analitycs" data-title-people="analitycs">
                            </div>
                            <div class="people_item">
                                <img class="people_item_img people_item_img_active" src="./images/developer.png" alt="foto-developer" data-title-people="developer">
                            </div>
                        <div class="next_slider_link" id="nextSlider"></div> 
                    </div>    
                </div>

Источник: https://ru.stackoverflow.com/questions/1372710/%D0%A7%D1%82%D0%BE-%D0%BD%D1%83%D0%B6%D0%BD%D0%BE-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%B2-%D0%BA%D0%BE%D0%B4-%D1%87%D1%82%D0%BE%D0%B1%D1%8B-%D0%BF%D1%80%D0%B8-%D0%BD%D0%B0%D0%B6%D0%B0%D1%82%D0%B8%D0%B8-%D0%BD%D0%B0-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D1%81-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%B5%D0%B9-%D0%BC%D0%B5%D0%BD%D1%8F%D0%BB%D1%81%D1%8F-%D0%BA%D0%BE

Тебе может это понравится...

Добавить комментарий