2

I have a website on ovh web hosting. My website have a carousel in js. My carousel is working on local developpement but when I transfer my files on my online website, it's not working anymore. When I test to check if the script is executed, it doesn't, so I think that's an issue in my eventListener but I can't figure out why.

Here my function what I call in my main.js file

document.addEventListener('DOMContentLoaded', function () {
    new Carousel(document.querySelector('#carousel1'), {
        slidesToScroll: 1,
        slidesVisible: 2,
        loop: false
    })
})

and here how I call it in my index.html file :

 <script type="text/javascript" src='./js/main.js'></script>

That's my carousel in the index.html file :

<div id="carousel1" class="total-carousel mb-4">

                <!-- PROJECT 1 -->
                <div class="d-flex flex-column carousel-box">
                    <h3 class="w-100 text-center mb-0 contact-bg project-title">Transformation d'un CV en site web
                    </h3>
                    <div class="w-100 text-center project-image">
                        <img class="w-100" src="assets/images/projet2.png">
                    </div>                
                </div>


                <!-- PROJECT 2 -->
                <div class="d-flex flex-column carousel-box">
                    <h3 class="w-100 text-center mb-0 contact-bg project-title">Transformation d'un CV en site web
                    </h3>
                    <div class="w-100 text-center project-image">
                        <img class="w-100" src="assets/images/projet2.png">
                    </div>                
                </div>

<!-- PROJECT 3 -->
                <div class="d-flex flex-column carousel-box">
                    <h3 class="w-100 text-center mb-0 contact-bg project-title">Transformation d'un CV en site web
                    </h3>
                    <div class="w-100 text-center project-image">
                        <img class="w-100" src="assets/images/projet2.png">
                    </div>                
                </div>


</div>
Pauline Momot
  • 39
  • 4
  • "Not working anymore" is very vague. What happens exactly? Do you get any error message in the console? Also sharing the relevant part of your HTML might help, even though if it works on local it should work on remote... – Laurent S. Nov 17 '20 at 16:18
  • Have you checked that the script is being loaded to begin with? (Generally a failed script load will display an error in the console) – DBS Nov 17 '20 at 16:28
  • Yes I checked, the script is being loaded but not this function – Pauline Momot Nov 17 '20 at 16:31
  • I shared my carousel html part but I'm not sure that's helping – Pauline Momot Nov 17 '20 at 16:33
  • It's like if the function is not executed, so I was thinking that there was a problem with my addEventListenner – Pauline Momot Nov 17 '20 at 16:34
  • The easy test for that is to put an `alert("Working")` in the top of the function that the event triggers. But I can't see anything obviously wrong with your event listener, so I wouldn't expect it to be that. Just to confirm, there are no console error displayed? And what library/plugin are you using for this `Carousel()`? – DBS Nov 17 '20 at 16:38
  • I did it and I don't get the alert on remote but on local I get it. No I have no error in the console and I didn't use a plugin, I did it by myself – Pauline Momot Nov 17 '20 at 16:46
  • It's working now, I took off "async" from my script tag (what I add after this post) and change some name in my file. Thank you for your help ! – Pauline Momot Nov 17 '20 at 16:56

0 Answers0