I'm building my website/portfolio, so I made a slider of 3 images representing each of my 3 projects to present on my website. In the middle of the page I have a "Learn more" button, but I don't know how to make the button link change depending on the slide I'm on. How can I fix this?
const slideContainer = document.querySelector(".slider")
const sliderText = document.querySelector(".slider--text")
const btnLeft = document.querySelector(".slider__btn-left")
const btnRight = document.querySelector(".slider__btn-right")
const sliderImages = [{
src: "https://images.unsplash.com/photo-1526726538690-5cbf956ae2fd?auto=format&fit=crop&q=80&w=1740&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "L'équipe de Nathan",
},
{
src: "https://images.unsplash.com/photo-1517672651691-24622a91b550?auto=format&fit=crop&q=80&w=1932&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "Nathan's Darts",
},
{
src: "https://images.unsplash.com/photo-1534093607318-f025413f49cb?auto=format&fit=crop&q=80&w=1740&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "E-commerce",
},
]
let slideCounter = 0
const startSlider = () => {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`
sliderText.innerHTML = sliderImages[0].text
}
btnRight.addEventListener("click", function() {
if (slideCounter === sliderImages.length - 1) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`
sliderText.innerHTML = sliderImages[0].text
slideCounter = -1
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter + 1].src})`
sliderText.innerHTML = sliderImages[slideCounter + 1].text
slideCounter++
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
})
btnLeft.addEventListener("click", function() {
if (slideCounter === 0) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[sliderImages.length - 1].src})`
sliderText.innerHTML = sliderImages[sliderImages.length - 1].text
slideCounter = sliderImages.length
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter - 1].src})`
sliderText.innerHTML = sliderImages[slideCounter - 1].text
slideCounter--
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
})
startSlider().slider {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
.slider--content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.slider--feature {
text-align: center;
}
.slider--title {
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
.slider--text {
font-size: 1rem;
color: #fff;
text-transform: uppercase;
margin: 0.5rem 0;
}
.slider__btn-right,
.slider__btn-left {
background: transparent;
border: none;
outline: none;
font-size: 4rem;
color: #eee;
padding: 0 1rem;
cursor: pointer;
transition: transform 0.1s ease-in-out;
}
.slider--btn {
background: #fff;
text-transform: uppercase;
border: none;
color: #444;
border: 1px solid #444;
outline: none;
font-weight: 700;
padding: 0.8rem 2rem;
cursor: pointer;
}
.slider__btn-left:hover,
.slider__btn-right:hover {
transform: scale(0.95);
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 1s;
}<main>
<div class="slider">
<div class="slider--content">
<button class="slider__btn-left">
<i class="fas fa-angle-left"></i>
</button>
<div class="slider--feature">
<h1 class="slider--title">mes projets</h1>
<p class="slider--text"></p>
<a href="/projets/lequipe-de-nathan/lequipe-de-nathan.html" class="slider--btn">En savoir plus</a>
</div>
<button class="slider__btn-right">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</main>You could make the following changes: In your HTML, for your learn more button, you could give an id and remove the href:
<a id="learn_more_href" class="slider--btn">En savoir plus</a>
In your JavaScript File, you can target this element and set the href dynamically, for that:
const sliderImages = [
{
src: "https://images.unsplash.com/photo-1526726538690-5cbf956ae2fd?auto=format&fit=crop&q=80&w=1740&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "One",
link: "https://www.google.com",
},
{
src: "https://images.unsplash.com/photo-1517672651691-24622a91b550?auto=format&fit=crop&q=80&w=1932&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "Two",
link: "https://www.instagram.com",
},
{
src: "https://images.unsplash.com/photo-1534093607318-f025413f49cb?auto=format&fit=crop&q=80&w=1740&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
text: "E-commerce",
link: "https://www.facebook.com",
},
];
const learnMoreButton = document.getElementById("learn_more_href");
Add these lines at the end of your functions:
learnMoreButton.setAttribute("href", sliderImages[0].link);
learnMoreButton.setAttribute("href", sliderImages[slideCounter].link);
Hope you find this helpful.