Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2017
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Slideshow / carousel in website not working

    Hi

    I would like to create an automatic Slideshow / Carousel, similar to the one explained on https://www.w3schools.com/howto/howto_js_slideshow.asp; however when I enter the below test coding into my website it seems to strip away some of the <script> code so that the feature doesn't work.

    Any tips on getting around this so that I can have an interactive Slideshow / Carousel and input different URLs to take the user to different pages?

    Many thanks
    Sara

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}
    body {font-family: Verdana, sans-serif;}
    .mySlides {display: none;}
    img {vertical-align: middle;}
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    
    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active {
      background-color: #717171;
    }
    
    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
    }
    </style>
    </head>
    <body>
    
    <h2>Automatic Slideshow</h2>
    <p>Change image every 2 seconds:</p>
    
    <div class="slideshow-container">
    
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="img_nature_wide.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>
    
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="img_snow_wide.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>
    
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>
    
    </div>
    <br>
    
    <div style="text-align:center">
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
    </div>
    
    <script>
    var slideIndex = 0;
    showSlides();
    
    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
    </script>
    
    </body>
    </html>
    Last edited by VIPStephan; Oct 11th, 2018 at 08:34 PM. Reason: corrected link URL

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,782
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    Because your code works for me, the problem has to be were the images are stored. type this into your browser to see if this image exists where you think it does - in the same file as your HTML.

    BTW, your link does not work
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,121
    Thanks
    6
    Thanked 1,334 Times in 1,303 Posts
    I corrected the link; the semicolon was wrongly included in the URL.

  4. #4
    New to the CF scene
    Join Date
    Dec 2017
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks sunfighter. The image linnks are just the template one from the w3schools website, so I upload the images I use to my library and then change the location/file name in my coding to reflect this but still won't work.

    What I might do is record my activity and then post so that you can see what I mean if that will help :/

  5. #5
    New to the CF scene
    Join Date
    Dec 2017
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Whoops - thanks VIPStephan


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •