5546 sujets

Sémantique web et HTML

[Résolu] Impossible de placer un lien hypertexte sur mon slider

Bonjour, je viens tout juste de créer un slider (carrousel) pour un projet. J'aimerais qu'un lien hypertexte me renvoie sur une autre page web lorsque je clique dessus. Cependant, je n'arrive pas à faire fonctionner la balise <a>. Le problème est spécifique à mon slider. De plus, lorsque j'applique l'élément <a> sur le texte de mon slider, celui-ci se colorise mais n'est pas cliquable. Merci d'avance pour votre aide.

Voici mon projet : 
<body>
    <div class="slider">

        <a href="https://www.youtube.com/"><div class="slide active">
            <div class="slide_text"></div>
        </div></a>

        <div class="slide">
            <div class="slide_text"></div>
        </div>

        <div class="slide">
            <div class="slide_text"></div>
        </div>

        <button id="prev"><i class="fa-solid fa-chevron-left"></i></button>
        <button id="next"><i class="fa-solid fa-chevron-right"></i></button>

        <div class="slider_navigation">
            <button class="slider_btn active"></button>
            <button class="slider_btn"></button>
            <button class="slider_btn"></button>
    </div>

    <a href="https://www.youtube.com/"><div class="test"></div></a>

</body>


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.slider {
    position: relative;
    height: 50vh;
}

.slide {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 100%;
    background-image: url(./image/paysage2.jpg);
    background-size: cover;
    overflow: hidden;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s;
}

.slider .active {
    opacity: 1;
}

.slide_text {
    width: 500px;
    height: 100%;
    background-color: black;
    color: white;
    padding: 5%;
}

#prev, #next {
    position: absolute;
    top : 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    font-size: 2rem;
    border: none;
    cursor: pointer;
    z-index: 5;
}

#prev {
    left: 13.5%;
}

#next {
    right: 13.5%;
}

.slider_navigation {
    position: absolute;
    top : 95%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.slider_btn {
    width: 100px;
    height: 5px;
    margin: 5px;
    border: 1px solid white;
    opacity: 0.5;
    cursor: pointer;
}

.slider_navigation button.active {
    opacity: 1;
}

.test {
    position: absolute;
    top: 700px;
    background-color: black;
    width: 100%;
    height: 100px;
    margin-top: 50px;
}


let slides = document.getElementsByClassName('slide')
let previous = document.getElementById('prev')
let next = document.getElementById('next')
let buttons = document.getElementsByClassName('slider_btn')
let sliderPosition = 0
let sliderLength = slides.length

function timerSwapSlide() {
    sliderPosition++
    if(sliderPosition >= sliderLength) {
        sliderPosition = 0
    }
    removeActiveSlide()
    slides[sliderPosition].classList.add('active')
    buttons[sliderPosition].classList.add('active')
}

let timer = setInterval(timerSwapSlide, 5000)

function removeActiveSlide() {
    for(let i = 0; i < sliderLength; i++) {
        slides[i].classList.remove('active')
        buttons[i].classList.remove('active')
        clearInterval(timer)
        timer = setInterval(timerSwapSlide, 5000)
    }
}

previous.addEventListener('click', function() {
    sliderPosition--
    if(sliderPosition < 0) {
        sliderPosition = sliderLength - 1
    }
    removeActiveSlide()
    slides[sliderPosition].classList.add('active')
    buttons[sliderPosition].classList.add('active')
})

next.addEventListener('click', function() {
    sliderPosition++
    if(sliderPosition >= sliderLength) {
        sliderPosition = 0
    }
    removeActiveSlide()
    slides[sliderPosition].classList.add('active')
    buttons[sliderPosition].classList.add('active')
})

for(let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        sliderPosition = i
        removeActiveSlide()
        slides[sliderPosition].classList.add('active')
        buttons[sliderPosition].classList.add('active')
    })
}

// ------------------------------------------------------------

 document.addEventListener('click', e => {
    console.log(e.target)
 })

Modifié par Yuuno (18 Jun 2022 - 21:08)
Modérateur
Bonsoir,

rapidement,

si <a> contient un élément en absolute (hors du flux) , alors il a vraisemblablement une taille de 0 x 0 , la logique voudrait que le <a> remplace le <div class="slide"> au lieu de l'englober et de lui appliquer la class slide

Cdt

edit en regardant moins rapidement, il y a aussi un z-index sur #prev #next et leur taille qui a aussi à voir sur les zones clickables
Modifié par gcyrillus (18 Jun 2022 - 21:45)
Meilleure solution
Merci du message, mais j'avais déjà essayer cette méthode. Le problème que j'ai avec celle-ci c'est que l'affichage prend du temps. Mais c'est passible que j'ai mal fait la chose Smiley sweatdrop
Modérateur
gcyrillus a écrit :


edit en regardant moins rapidement, il y a aussi un z-index sur #prev #next et leur taille qui a aussi à voir sur les zones clickables
Votre première solution état la bonne. Lorsque j'avais essayer de mon coté, j'avais tout simplement fais une petite erreur. Merci beaucoup de votre aide.
Modifié par Yuuno (18 Jun 2022 - 22:19)
Prévenir un modérateur
Répondre au sujet
Aller à