'Problem with my slider, it does not appear

I'm trying to make a slider for my website, but the slider I created is not rendering.

I attempted to write only the slider's markup, which worked, however, it is not working on my webpage.

Here is the code:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("custom-slider");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}
.custom-slider { 
    display: none; 
}
.slide-container {
    max-width: 800px;
    position: relative;
    margin: 50px auto;
}
.prev, .next {
    cursor: pointer;
    position: absolute;        
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 30px;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.6s ease;
}
.prev{ 
    left: 15px; 
}
.next { 
    right: 15px; 
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.5);
}
.slide-text {
    position: absolute;
    color: #ffffff;
    font-size: 15px;
    padding: 15px;
    bottom: 15px;
    width: 100%;
    text-align: center;
}
.slide-img{ 
    width: 100%; 
    height: 500px;
    object-fit: cover;
    object-position: center;
}
<div class="section3">
        <h1 class="titre" id="realisations">REALISATIONS</h1>
        <div class="slide-container">
            <div class="custom-slider fade">
              <img class="slide-img" src="imgr/Batiment.jpg">
              <div class="slide-text">text1</div>
            </div>
            <div class="custom-slider fade">
              <img class="slide-img" src="imgr/emmanchement2.jpg">
              <div class="slide-text">text2</div>
            </div>
            <div class="custom-slider fade">
              <img class="slide-img" src="imgr/Emmanchement_goupilles.jpg">
              <div class="slide-text">text3</div>
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
          </div>
            
    </div>

If I change the display on the custom-slider, the slider appears, but with an image above, and an image below. When I click the button for swap pic, the display works as expected.

javascripthtmlcss


Solution 1:[1]

Here are some notes that may help:

  • CSS can be added to the <head> section by wrapping the css in <style> tags

  • The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load

In your case... Your Javascript file needs to get some informations from your html document. Like this : var slides = document.getElementsByClassName("custom-slider"); so your html should be ready before your js codes. When you include your js in <head> , your html document wont load compeletly . So your js file have nothing to get the information that it needs.

You can also read this : script doesnt load when on head

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions