0

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.

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
Crykix
  • 1
  • your slider working fine. it seems that you have trouble with other css or selectors? – Maik Lowrey May 11 '22 at 20:00
  • Okey so now when I put my css script in my html file at the end of the body it works but if the script is before the body or in a js file it doesn't work, I don't understand – Crykix May 11 '22 at 22:44
  • Hey @Crykix, that comment would be good info to put into the body of the question. – guysherman May 13 '22 at 04:09

1 Answers1

0

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

Ozone
  • 11
  • 4
  • 1
    So you cant put your internal CSS at the end of the body. Whatever it works or not... Its a mistake. – Ozone May 12 '22 at 05:37
  • He didn't do that, the snippet that he is displaying is an interactive snippet that represents his three documents. `.js`, `.css` & `.html` – JΛYDΞV May 12 '22 at 05:40
  • Yeah. I was answering his comment : ‌‌‌‌‌‌‌‌‌ Okey so now when I put my css script in my html file at the end of the body it works but if the script is before the body or in a js file it doesn't work, I don't understand – Crykix – Ozone May 12 '22 at 08:00
  • Okey, it's a mistake, it works when I add the at the end of the body but it don't works when it is in the head of the html page – Crykix May 12 '22 at 10:16
  • 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 , your html document wont load compeletly . So your js file have nothing to get the information that it needs. You can also read this : https://stackoverflow.com/questions/5853787/script-does-not-work-when-on-head – Ozone May 12 '22 at 13:54
  • The clarification you put in this comment is probably worth putting in the answer, specifically that the script attempts to access elements of the page, therefore it needs to be run after the page has rendered. Your link out to more info is great. – guysherman May 13 '22 at 04:12