Automated HTML Slideshow Feature

I am currently working on creating an automated slideshow that spans the entire page and switches images every 4 seconds. I have set up a codepen for testing purposes, but I am encountering some issues with it. There are 5 images that I am using, and my goal is to have them change at regular intervals if possible. The project utilizes Bootstrap 3 in ASP.NET, but fortunately, it does not cause any conflicts with the slideshow.

Link to Codepen

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
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}


.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}
}
<div style="max-height: 100vh; overflow: hidden;">
        <div class="slideshow-container">

            <div class="mySlides fade">
                <img src="ImageURL1.jpg" style="width:100vw;">
            </div>

            <div class="mySlides fade">
                <img src="ImageURL2.jpg" style="width:100vw;">
            </div>

            <div class="mySlides fade">
                <img src="ImageURL3.jpg" style="width:100vw;">
            </div>
            <div class="mySlides fade">
                <img src="ImageURL4.jpg" style="width:100vw;">
            </div>
            <div class="mySlides fade">
                <img src="ImageURL5.jpg" style="width:100vw;">
            </div>
          <div class="mySlides fade">
                <img src="ImageURL6.jpg" style="width:100vw;">
            </div>

        </div>
    </div>

javascripthtmlcss

Answer №1

Your code snippet contains some unnecessary parts, such as the dot div element which is not present in your HTML code.

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}

  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}


.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}
}
<div style="max-height: 100vh; overflow: hidden;">
        <div class="slideshow-container">

            <div class="mySlides fade">
                <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;">
            </div>

            <div class="mySlides fade">
                <img src="https://i.imgur.com/a9bx26U.jpg" style="width:100vw;">
            </div>

            <div class="mySlides fade">
                <img src="https://i.imgur.com/PijASuc.jpg" style="width:100vw;">
            </div>
            <div class="mySlides fade">
                <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;">
            </div>
            <div class="mySlides fade">
                <img src="https://i.imgur.com/c8AjEXg.jpg" style="width:100vw;">
            </div>
          <div class="mySlides fade">
                <img src="https://i.imgur.com/srhebZH.jpg" style="width:100vw;">
            </div>

        </div>
  
  
    </div>

If you require any assistance, please let us know!

Happy coding!

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

Injecting a PHP file into a div upon clicking the submit button, all the while already submitting data

Hello there, I have a question regarding submitting a form and loading a relevant PHP file into a target div using the same submit button. I have attempted to do this but need some help. <form id='myForm' method="POST" action="processForm.php ...

phpjqueryhtml

Learn how to create sticky elements using jQuery or JavaScript with this helpful tutorial

I am currently searching for a useful tutorial or code snippet that demonstrates how to create a popular effect seen frequently on websites. This particular effect involves an element sticking to the top of the window when it reaches a certain point while ...

javascriptjquerycssplugins

Using a PHP classes array as the name attribute of an HTML select tag

I have a requirement to implement a similar structure in PHP as we do with structs in C. I am aware that in PHP, we use classes for this purpose. However, I need to utilize an array of these classes for naming select tags. Below is my code snippet: <?p ...

phphtml

Having trouble getting Ajax post to function properly when using Contenteditable

After successfully implementing a <textarea> that can post content to the database without needing a button or page refresh, I decided to switch to an editable <div> for design reasons. I added the attribute contenteditable="true", but encounte ...

javascriptphphtmlajax

What is the best way to generate an error message in AJAX?

It seems that I am facing an issue with throwing an error message to indicate whether an email exists in my user table. I have realized that due to the asynchronous nature of AJAX, try and catch error messages cannot be used within the complete function. E ...

javascriptjqueryajaxtry-catch

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

javascriptreactjstypescriptnext.js

What methods can I use to ensure the headline remains fixed like the table headers?

I am currently working on creating sticky table headers. Below is an example showcasing my progress and what I am aiming to accomplish. Below is the script I discovered from another source. function makeTableHeadersSticky(tableId) { var thArr = $(tableId ...

javascriptjquery

Exploring the attributes of array elements

Consider an array like the following: [ { "user": "tom", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13767653707c3d707c7e">[email protected]</a>" }, { "user": "james", "email": "<a href="/cdn- ...

javascriptmocha.js

ShadowBox not displaying Vimeo videos

I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...

javascripthtmlcssshadowbox

Retrieving images from GridFs and displaying them in an Angular application

I have been working on storing images from my angular app in MongoDB using GridFs. However, I am having trouble retrieving the images from the database to the app. I am using a custom objectId for the query. UPDATE After some changes, I managed to get t ...

javascriptangularjsnode.jsmongodbgridfs

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

My goal is to create a table displaying marks with a box around each mark that expands slightly when hovered over to indicate activity. Below is the code I am using: .container { position: absolute; width: 80%; left: 50%; transform: translateX(-5 ...

htmlcss

Comparison between AngularJS Directive once-style and the global style attribute in HTML

What are the advantages of using one method over the other, aside from needing to define the style from a function? <div once-style="{width:50%;}"/> once-style <div style="width:50%;"/> HTML Style Attribute If I have fixed styling in an An ...

htmlangularjs

I am having trouble getting JavaScript to calculate with tax, it just keeps giving

I am currently working on a program that calculates the cost of multiple products selected by the user. While the subtotal function is functioning correctly, I am facing an issue with the total cost calculation after applying taxes - it keeps returning NaN ...

javascripthtmljqueryfunctioncalculation

specialized html elements within data-ng-options

I have a code snippet where I am populating select options from a controller using data-ng-options. However, I would also like to include an icon with each option. For example, I want to append <span class="fa fa-plus"></span> at the end of e ...

javascriptjqueryhtmlangularjs

Uploading several files with Laravel and Vue JS in one go

Recently, I have been working on a project where I need to upload multiple image files using Vue JS in conjunction with Laravel on the server side. This is the snippet from my Vue template: <input type="file" id = "file" ref="f ...

javascriptlaravelvue.jsfile-upload

Tips for eliminating checkboxes from a form

function addCheckbox(){ var labels = document.form1.getElementsByTagName('label'); var lastLabel = labels[labels.length-1]; var newLabel = document.createElement('label'); newLabel.appendChild(Checkbox(labels.length)); ...

javascripthtmldomcheckbox

Remove the new line break at the top of the text and replace it with the remaining text

[text area control has a new line break that needs to be removed and replaced with the remaining string like image two][1] This image illustrates ...

javascriptjquerycssasp.net.net

Adding a unique key to every element within a JavaScript array

I am working with the array provided below which contains simple values. My goal is to add a key id before each value in the array, resulting in something like this: ["id:a", "id:b","id:c","id:d"]. Is there an easy way to achieve this? Any assistance would ...

javascript

The i18next plugin initialization does not include the implementation of 'resGetPath'

I'm having trouble setting up the resGetPath attribute in i18next to access translation.json files locally. When I initialize the plugin with the resources object, everything works fine. However, when using the resGetPath attribute, I can't seem ...

javascriptjsonpathinternationalizationi18next

Exploring the use of barcodes with node.js

Having some issues with generating a barcode using a barcode module from NPMJS called npm i barcode. I am getting an error message res is not defined even after following the instructions. Can someone please guide me in the right direction? Here is my code ...

javascriptnode.jsbarcode