Why does the HTML and CSS slider fail to load upon page refresh, yet works perfectly when the next or previous button is clicked?

There seems to be an issue with the slider images not loading on page refresh. Oddly enough, they appear only after clicking the next button. However, upon refreshing the page again, the images disappear.

<div class="slide-banner">
            <div class="slide">
                <img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" />

        </div>
        <div class="slide">
                <img src="assets/iPhone-Text-Monitoring-on-Apple-Devices-Yes-And-So-Much-More.jpg" />

        </div>
        <div class="slide">
                <img src="assets/pexels-photo-168765.jpeg" />

        </div>
        <div class="slide">
                <img src="assets/pexels-photo-355988.jpeg" />

        </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
javascripthtmlcss

Answer №1

Kindly consider reviewing the provided snippet to potentially resolve your issue. It is advisable to utilize absolute paths instead of relative paths in the image src attributes and call the plusSlides(1) method rather than showSlides().

var slideIndex = 1;

plusSlides(1);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  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";
}

document.addEventListener("DOMContentLoaded", function(event) {
   plusSlides(1);
});
<div class="slide-banner">
  <div class="slide">
    <img src="https://dummyimage.com/600x400/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/600x400/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/500x700/000/fff" />

  </div>
  <div class="slide">
    <img src="https://dummyimage.com/100x200/000/fff" />

  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

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

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

I am currently developing a Java Swing application for managing object repositories in Selenium scripts. This application will launch a WebDriver instance and allow users to manually navigate to the desired element for inspection. My goal is to capture th ...

javascriptseleniumxpathselenium-webdriverwebdriver

"Utilizing the jQuery append method to dynamically insert an SVG element

Currently, I'm in the process of constructing a graph by utilizing svg elements and then dynamically creating rect elements for each bar in the graph through a loop. I have a query regarding how I can effectively pass the value of the "moveBar" varia ...

javascriptjquerysvgattributesappend

Selected value is not displayed in the textbox when using autocomplete feature

---Ajax---- An issue has arisen with the autocomplete feature. While typing "wi" (for example, wipro), the drop-down list appears as expected. However, if only "wi" is selected in the text box, $(document).ready(function () { $("#company_name").key ...

javascriptphpmysqlajaxcodeigniter

Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...

cssuser-interfacereactjsmaterial-ui

Two states each offering a distinct perspective

I am currently working on modularizing my application using angular-ui-router to create a website with two states: main and checkout. In the main state, I want to have multiple "section" tags defined as ui-view items. However, it seems like there is an iss ...

javascriptangularjsangular-ui-routerstate

Steps to prevent specific links from being clickable in React Native's webview component

In my React Native app, I am utilizing the react-native-webview component to display blog posts. The code I have implemented is straightforward, but my goal is to restrict the webview to only show content from the blog section of the website, preventing us ...

javascriptreact-nativewebview

What is the best way to set the page title on a server-rendered component when using the Next.js app router?

When loading a blog post from the server, I have access to details like the title of the post. However, based on the app router migration guide, this information is located outside my page. How can I update it? For more information, refer to the documenta ...

javascriptnext.js

Guide on detecting and capturing a change in location history event

My main goal is to capture router change events outside of the NextJS framework, not within it. The application I have developed using NextJS includes some code that operates independently of the NextJS context. This code needs to be able to detect navigat ...

javascriptnext.js

Can you point me in the direction of the Monaco editor autocomplete feature?

While developing PromQL language support for monaco-editor, I discovered that the languages definitions can be found in this repository: https://github.com/microsoft/monaco-languages However, I am struggling to locate where the autocompletion definitions ...

javascripttypescriptmonaco-editor

The debounced function in a React component not triggering as expected

I am facing an issue with the following React component. Even though the raiseCriteriaChange method is being called, it seems that the line this.props.onCriteriaChange(this.state.criteria) is never reached. Do you have any insights into why this.props.onC ...

javascriptreactjstypescriptlodashes6-class

Searching for and removing array elements in Angular 2 using the IndexOf method

Hey there! I'm currently in the process of trying to remove a specific item from my array while working with Angular2 and Typescript. My goal is to identify the index based on the value provided. The array I am working with is initialized as follows. ...

htmlarrayslistangularngfor

Break up the content in table cells with a new line character

How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...

css

Passing data into a different controller

In the process of building a system that involves selecting elements from a list and viewing their details, I have encountered an issue while using MEAN stack. My goal is to pass the id of the selected element to the controller of the second page. However, ...

javascriptangularjsnode.js

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

performing an AJAX request to the controller method in a Rails application

I am currently facing an issue with making an ajax call to my controller class PatientRecordController < ApplicationController def export .... end end Within my javascript file, the code snippet is as follows: $(document).ready(function(){ ...

javascriptruby-on-railsajax

The concept of nested labels: defining conditions for displaying specific sections of a label

Let's say I have a label that contains the following text: <label>This is a text. This is another text.</label> Is there a way to indicate that the second sentence should only be visible when a boolean value is true? For example: <la ...

htmlangularjs

Refreshing Vue by reloading new components and injecting them into the HTMLDOM

Is there a way to make Vue re-initialize itself after inserting a component fetched from an API into the DOM? The component looks like this: <div><My_component /></div> This component is part of a back-end snippet. When inserting it i ...

javascriptdomvue.jsrendering

Reactstrap and React-router v4 are failing to redirect when there is a partial change in the address link

Within the header of my website, <NavItem> <NavLink tag={Link} to="/template/editor">Create New Template</NavLink> </NavItem> On the routing page of my website, <BrowserRouter> <div className="container-fluid"> ...

javascriptreactjsbootstrap-4react-router-v4reactstrap

Looking to extract data from JavaScript using Scrapy 1.4.0?

Apologies for my lack of proficiency in English. As a beginner in scrapy, I am seeking guidance on an issue I encountered while trying to scrape a particular website. Below is the code for my spider: import scrapy from bs4 import BeautifulSoup as bs clas ...

javascriptscrapy

What is the best way to bundle an Express server into an Electron application?

Currently in the process of developing an Electron app using vue-cli-electron-builder. My setup includes a local MySQL database and an Express server. I am wondering how to bundle my Express server with the Electron app? The Express server is used for d ...

javascriptnode.jsexpressvue.jselectron