Picture goes missing from slideshow

I am currently using a CSS + Javascript slideshow on my website, inspired by an example from the W3Schools website.

Here is the code I have adapted for my web application:

$(document).ready(function() {
  var slideIndex = 1;

  function showSlides(n) {
    var slides = $(".mySlides");
    var i;

    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";
  }

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

});
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
.slideshow-container {
  position: relative;
  margin: auto;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 1.6s ease;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img class="img-responsive" src="pic1.jpg" alt='Entrada'>
    <div class="text">1</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img class="img-responsive" src="pic2.jpg">
    <div class="text">2</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img class="img-responsive" src="pic3.jpg">
    <div class="text">3</div>
  </div>

  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>

Although the page loads correctly, the pictures disappear after a brief moment. How can I resolve this issue?

javascriptjqueryhtmlcssslideshow

Answer №1

I ran into a similar problem some time ago and managed to resolve it by including animation-fill-mode: forwards;.

Typically, animations play and then revert back to the original style.

By using animation-fill-mode, you can modify this behavior. With forwards, the outcome of the animation will persist after it finishes.

Refer to the end of the CSS excerpt for the actual implementation.

$(document).ready(function() {
  var slideIndex = 1;

  function showSlides(n) {
    var slides = $(".mySlides");
    var i;

    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";
  }

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

});
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
.slideshow-container {
  position: relative;
  margin: auto;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 1.6s ease;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards; 
  animation-name: fade;
  animation-duration: 1.5s;
  animation-fill-mode: forwards; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150" alt='Entrada'>
    <div class="text">1</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150">
    <div class="text">2</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img class="img-responsive" src="http://placehold.it/350x150">
    <div class="text">3</div>
  </div>

  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>

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

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js

Encountering an Error when Integrating Pusher (real-time data library) with Next.js: PusherRequestError - Unexpected status code 400

I encountered an issue while trying to integrate Pusher into my Next.js application due to Vercel's restriction on websockets in their serverless functions. The error message I keep receiving after running the program with Pusher is: error - unhandled ...

javascriptwebsocketnext.jspushervercel

Differences in CSS between IE10 and Chrome are causing compatibility issues

Website in question: What is causing the difference in display between IE 10 and other browsers? The website appears to function correctly on Chrome: IE 10: ...

cssinternet-explorerinternet-explorer-10

In JavaScript, is it possible to manually trigger a DOM update during consecutive prompts?

My goal is to create a program that transitions between prompts and updates on a page in a cyclical manner. However, when I simplify the issue to just two append calls and two prompts, I notice that the page only visually updates after the second prompt ca ...

javascriptdomprompt

"Exploring the Latest Features of NextJS 13: Enhancing Server

Currently, I am in the process of familiarizing myself with NextJS 13 and its new APP folder structure. I am facing a challenge in updating data on server components without needing to reload the page or the app. My HomePage server component fetches a list ...

javascriptreactjsnext.jsnext.js13

Best practices for implementing JavaScript in JSP pages

After researching various sources, I have come across conflicting opinions on the topic which has left me feeling a bit confused. As someone new to web programming using java EE, I am looking to integrate javascript functions into my code. It appears that ...

javascriptjqueryjsp

Make the height of the input element equal to 100% of its parent

I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on ha ...

htmlcssinputhtml-table

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

Tips on setting the default sorting order in AngularJS

I have implemented a custom order function in my controller with the following code: $scope.customOrder = function (item) { var empStatus = item.empState; switch (empStatus) { case 'Working': return 1; case & ...

javascriptjqueryhtmlangularjs

Generate code in Yii2 using the active form

This is the code I am using in Yii2: <?= $form->field($model, 'username')->label(false); ?> <?= $form->field($model, 'password')->label(false); ?> It produces the following output: <div class="form-group fi ...

phphtmlformsyii

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

htmlcssbootstrap-5

Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...

htmlcssresponsive-design

Implementing Object.somefunction() in ngFor with Angular

In my Angular project, I am using an ngFor loop to iterate over keys generated by Object.keys() in the following code snippet: <ul id='nav-tablist' class='tabrows'> <li *ngFor="let tab of obj.keys(tabList)"> ...

javascriptangular

Leveraging the power of Auth0 and Prisma in aggregating user data

In my current project, I am developing a Next.js application with Auth0 as the authentication system. Users are authenticated using the standard middleware: import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge'; export default wi ...

javascriptauthenticationnext.jsprismaauth0

Alter the colors of all Divs inside a container with each click

Hey everyone, I'm just starting to learn JavaScript. I'm working on a project where I want to change the color of all the divs in a container every time they are clicked. For example, on the first click, I want all the divs to turn red. Then, on ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to effectively apply a mask within a PixiJS container so that its color does not display upon page refresh?

After implementing the code snippet below to add a mask in a container, I encountered an issue where upon clicking the refresh button on the page (chrome), the pixi stage would turn completely white until the refreshing process is completed. Can anyone p ...

javascripthtmlgoogle-chromepixi.js

Ways to customize the appearance of an iframe's content from a separate domain

I am facing a challenge with my widget and multiple websites. The widget is hosted on one domain, but the websites use an iframe to display it. Unfortunately, because of the Same Origin Policy, I cannot style the content of the iframe from the parent websi ...

javascripthtmlcssiframe

Retrieving the counter input's value and displaying it in the corresponding span element

Today, I am working on a seemingly simple task. My goal is to retrieve the content from an input counter and showcase it within a <span>. I have successfully implemented similar functionality in other sections of my website, but for some reason, it ...

jqueryhtml

I'm curious about the origin of this.on event handler. Is it part of a particular library or framework?

While casually perusing through the application.js file in the express source code, I stumbled upon this interesting piece of code. I'm curious about the origin of this '.on' event. Is it part of vanilla JavaScript or is it a feature provid ...

javascriptexpress

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss