What is causing the slideshows to suddenly stop functioning?

I've successfully implemented a slideshow in my project, as discussed in my previous inquiry.

Although I attempted to add more slideshows using the same code and design, they are not functioning properly. Even the original slideshow has stopped working, resulting in static images being displayed.

If anyone can provide guidance on how to troubleshoot these issues and get all the slideshows working again, it would be greatly appreciated.

Below is the code snippet:

HTML

        <!-- Featured ad 1 -->
        <div id="SlideshowFeaturedAd1">
            <div>
                <img src="Img4.jpg" height="150px" width="75px">
              </div>
              <div>
                <img src="Img5.jpg" height="150px" width="75px">
              </div>
              <div>
                 <img src="Img6.jpg"  height="150px" width="75px">
              </div>
         </div>

        <!-- Featured ad 2 -->
        <div id="SlideshowFeaturedAd2">
            <div>
                <img src="Img7.jpg" height="150px" width="75px">
              </div>
              <div>
                <img src="Img8.jpg" height="150px" width="75px">
              </div>
              <div>
                 <img src="Img9.jpg"  height="150px" width="75px">
              </div>
         </div>

        <!-- Featured ad 3 -->
        <div id="SlideshowFeaturedAd3">
            <div>
              <img src="Img10.jpg" height="150px" width="75px">
            </div>
            <div>
              <img src="Img11.jpg" height="150px" width="75px">
            </div>
            <div>
               <img src="Img12.jpg"  height="150px" width="75px">
            </div>
         </div>`

CSS

/* CSS styles */ 
body {
    font-family: helvetica;
}

* {
    font-size: 100%;
    font-family: helvetica;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

/* Starring ads */
/* Styles for starring ads */

#SlideshowStarringAds {
    /* Slideshow styles */
}

/* Featured ad 1 */
/* Styling for featured ad 1 */

#SlideshowFeaturedAd1 {
    /* Styles for featured ad 1 */
}
  
/* Featured ad 2 */
/* Styling for featured ad 2 */

#SlideshowFeaturedAd2 {
    /* Styles for featured ad 2 */
}
  
/* Featured ad 3 */
/* Styling for featured ad 3 */

#SlideshowFeaturedAd3 {
    /* Styles for featured ad 3 */
}

Javascript in HTML Head

        <!-- JavaScript code for slide transitions -->
        <script src="jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {
        
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);
        });
        </script>
        <!-- End of Java script -->

JavaScript File Download available at OneDrive

javascripthtmlcssimageslideshow

Answer №1

If you want to create multiple slideshows in your javascript, you can include the following code:

var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);

var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);

var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);

function plusSlides(n, slideshow) {
  showSlides(slideshow.currentSlideIndex += n, slideshow);
}

function currentSlide(n, slideshow) {
  showSlides(slideshow.currentSlideIndex = n, slideshow);
}

function showSlides(n, slideshow) {
  var i;
  var slides = slideshow.getElementsByClassName("mySlides");
  var dots = slideshow.getElementsByClassName("dot");
  if (n > slides.length) {slideshow.currentSlideIndex = 1}    
  if (n < 1) {slideshow.currentSlideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideshow.currentSlideIndex-1].style.display = "block";  
  dots[slideshow.currentSlideIndex-1].className += " active";
}

To style these slideshows in your CSS, you can add the following styles:

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Styles for slideshow container */
.slideshow-container {
   max-width: 1000px;
   position: relative;
   margin: auto;
}
// Rest of the CSS code here

In your HTML, you can structure each slideshow like this:

<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
   // Slideshow content goes here
</div>

<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
   // Slideshow content goes here
</div>

<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
   // Slideshow content goes here
</div>

For further information on creating multiple slideshows, you can refer to a similar question on Stack Overflow, which provides additional insights into this topic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to append characters to the end of a value if it is already present?

I have a functionality in place where clicking the post button inserts a random value into the database. It also displays an error if the same value already exists in the database, which is working fine. Now, I want to further enhance this by adding 2/3 c ...

javascriptphpjquery

Jade: utilizing a Jade block within a Mixin by passing it as a string

I have come across a Jade template that includes a call to a mixin at a specific point. One of the parameters passed to this mixin is a lengthy HTML string which the mixin then prints using != The code looks like this: +createHTML({firstSection:'< ...

javascriptnode.jspug

Getting dynamic variables in the `getStaticProps` function of NextJS can greatly enhance

I am working on utilizing getStaticProps in order to fetch data based on a variable. Here is a sample code snippet: export async function getStaticProps() { const res = await fetch(localWordpressUrl, { method: 'POST', headers: { 'C ...

javascriptreactjsgraphqlnext.js

Is there a way to eliminate this pesky margin?

please check out this: https://jsfiddle.net/desytec/73qdtejg/1/#&togetherjs=w3lvLQi0v6 This displays the following table definition: <table id="semana" class="table table-striped dt-responsive table-bordered display ...

cssbootstrap-4

Database Submission of Newsletter Information

I recently grabbed the following code snippet from a YouTube tutorial (shoutout to pbj746). Everything appears to be functioning correctly except for one crucial issue - the submitted data isn't showing up in the database! I've thoroughly checked ...

phpjavascriptmysqlajaxdatabase

Vue components are failing to appear in the live environment, however they function perfectly in the development environment

My Laravel Vue project runs smoothly in development, but on the live shared hosting server, the vue components are not displaying. However, the Laravel views function correctly with no errors in the console. I have already run npm run production to minif ...

javascriptvue.jsvue-componentlaravel-vue

Creating a custom filter: How to establish seamless interaction between a script and a node application

I am currently working on implementing a filter feature for a blog using a node express/ MongoDB/Mongoose setup. My goal is to add the 'active' class when a filter is clicked, and then add that filter to an array (filterArray). I want to compare ...

javascriptnode.jsmongodbexpressmongoose

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...

htmlcssgoogle-chrome

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jqueryhtmlcsstwitter-bootstrap-3

The HTML5 video will continue playing indefinitely as long as its readyState remains at 4

In my efforts to develop a personalized HTML5 video player that can handle live streaming, recording of live streams, and playing regular video files, I have run into an issue with creating a custom seeking bar. To achieve this, I implemented the following ...

javascripthtml5-video

Deleting an element from a reference array in Mongoose

In my code, I have a User model that contains an array of references to other users: friends : [ { type: Schema.Types.ObjectId, ref: 'User' } ] I am currently struggling with removing an item from this list. Here is what I have attempt ...

javascriptnode.jsmongodb

Objects for requesting and responding

When utilizing express.js, middlewares have the ability to modify both the request object and the response object. This raises the question: what exactly do these request and response objects represent, and what information do they hold? ...

javascriptnode.jsexpress

Why won't my AngularJS Google Maps marker trigger any events?

My issue is with the marker event not working on a UI Google Map. I am using this link. Here is my view setup: <ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'" events="mapRe ...

javascriptangularjs

Form layout disrupted by grid template areas

I'm in the process of creating a contact form for my website. I've utilized grid-template-areas to organize the form input fields. However, upon adding the grid area to the form input, all the form fields disappear except for the last one. Could ...

htmlcsssass

Implementing key strokes in an HTML input field within a geckoWebBrowser

I am currently using the "geckoWebBrowser1" component to navigate to a URL that displays a login textbox with the ID: login-email Although I have successfully inserted "[email protected]" into the aforementioned textbox, it is essential to simulate k ...

javascriptjqueryhtmlkeyeventgecko

When using a custom AJAX function, make sure that bindings are functioning properly when setting properties within a callback in Ember

I've encountered some unexpected behavior while trying to set an Ember property inside a custom AJAX function callback. The AJAX function is triggered in the route, as seen in the code snippet below. The success callback updates the 'session.aja ...

javascriptajaxember.js

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

In a scenario where I have a component that takes an element, such as <input />, and I need to update its value programmatically after 15 seconds. Initially, I had the following approach in mind: const MyComponent = (myInput: JSX.Element) => { ...

javascriptreactjstypescriptreact-hook-form

Issue with JavaScript: Flag set to false does not halt the simple animation

My goal is to initiate animations when the mouse is pressed down and then immediately halt them once the mouse is released. Upon pressing the mouse, I set a flag to true which triggers the animation of the corresponding button that was clicked. However, t ...

javascripthtml5-canvas