Skip to main content
Y
Yaël5E15
Known Participant
June 3, 2021
Question

Slideshow HTML website click and next

  • June 3, 2021
  • 2 replies
  • 1813 views

Hello, 

My personal website always worked that way that when you click on a picture it jumped to the next; like a slideshow. However, since a few weeks it doesn’t work that way any longer and all images popped up at the same time instead. I've adjusted it right now so you can at least scroll down, but my knowledge in HTML is very outdated unfortunately.  Does anyone you’ve got any idea what goes wrong initally and how to fix it? 
Any help is appreciated.

Thanks!
Y

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    June 3, 2021

    1. jQuery Cycle is outdated.

    2. You never should have referenced the script on GitHub because that's not a recognized CDN. 

    3. Rebuild your slideshow with jQuery Cycle 2.  Download scripts directly from the source and upload them to your server.  See link below.

    https://jquery.malsup.com/cycle2/

     

    Nancy O'Shea— Product User & Community Expert
      Y
      Yaël5E15Author
      Known Participant
      June 3, 2021

      Thank you. That sounds pretty far from my bed. I need to dig into this! Y

       

        BenPleysier
        BenPleysier
        Community Expert
        June 6, 2021

        Thanks for your help, but it's not my cup of tea I guess. I don't understand what I've got to copy/replace were in my original website in order to make it work again...  

         


        Replace what you have now with the code below.

         

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- made by www.metatags.org -->
            <meta name="description" content="an Amsterdam based Visual Creative using photography as his medium" />
            <meta name="keywords"
                content="Yaël Temminck, Yael Temminck, Amsterdam, photographer, photography, art, visual creative, image maker, film, zoo magazine, l'officiel hommes, glamcult, l'officiel, Wolf Alice, Theu Boermans, Eliphant, The Drums, The Garden, Michel Gondry, Kate Boy, Moderat, Slaves, Eliot Sumner, Trentemøler, Wende, Sandor Lubbe, Perfume Genius, lofficiel, fashion, LP, thomas azier, portraitphotographer, portrait, black and white, melancholic, John Cale, Johnny Marr, Skunk Anansie, Borns, Indie music, House of Orange, Art Director, Numero, Numero Homme, Numero Netherlands, Savages, La Femme, Paris Music, Rock musician, Portrait photographer, Music photographer, New Talent, Unseen, Marlon Magnee, independent, editorial, advertorial, high-end, chique, clean, dutch, anton corbijn, numero, new talent, newspaper photographer, portrait photographer, artist portrait" />
            <meta name="robots" content="index, follow">
            <meta name="revisit-after" content="3 month">
            <title>Yaël Temminck</title>
            <!-- Visual Creative, Photographer, Amsterdam -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
            <script>
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).pusharguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.rc=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-98744424-1', 'auto');ga('send', 'pageview');
            </script>
        </head>
        <body>
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col">
                        <a href="mailto:info@yaeltemminck.com" class="btn">info[at]yaeltemminck.com</a>
                    </div>
                    <div class="col text-end">
                        <a href="http://www.instagram.com/yaeltemminck" class="btn">instagram</a>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-6 offset-3">
                        <div id="carousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="images/yaeltemminck01.jpg" class="d-block w-100" alt="image 1">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck02.jpg" class="d-block w-100" alt="image 2">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck03.jpg" class="d-block w-100" alt="image 3">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck04.jpg" class="d-block w-100" alt="image 4">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck05.jpg" class="d-block w-100" alt="image 5">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck06.jpg" class="d-block w-100" alt="image 6">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck07.jpg" class="d-block w-100" alt="image 7">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck08.jpg" class="d-block w-100" alt="image 8">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck09.jpg" class="d-block w-100" alt="image 9">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck10.jpg" class="d-block w-100" alt="image 10">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck11.jpg" class="d-block w-100" alt="image 11">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck12.jpg" class="d-block w-100" alt="image 12">
                                </div>
                                <div class="carousel-item">
                                    <img src="images/yaeltemminck13.jpg" class="d-block w-100" alt="image 13">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
        </body>
        </html>
         
        You will need to add the other images yourself.
         
        Wat een prachtige auto. een Mercedes 450SL 6.9
        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          B
          Ben M
          Community Expert
          June 3, 2021

          It appears your slideshow script was deleted from the server. But it appears to be from a server different than your own so it's possible you may need to find a replacement if the script you previously used is no longer being hosted.

           

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices