Button-controlled automated presentation

I have devised a method to create an automatic slideshow using JavaScript. However, I am looking to incorporate manual control buttons as well.

After adding manual control code, the slideshow seems to be malfunctioning. The provided code below is used for creating an automatic slideshow. How can I modify it to function with button controls?

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, 8000); // Change image every 8 seconds
}
#slide{
width:96%;
}

* {
box-sizing: border-box
}

.mySlides {
display: none
}

.slideshow-container {
width: 1200px;
position: relative;
margin: -10px;

}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 2s;
}
@-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 id="slide">
  <div class="slideshow-container">
    <div class="mySlides fade"> <img src="../Images/girl.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="../Images/bride.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="../Images/academy.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="../Images/makeup.jpg" style="width:100%"> </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>
  <br>
  <div style="text-align:center"> 
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
   </div>

javascripthtmlcssslideshow

Answer №1

There were no functions declared to move the slider on button click,

I have included some instructions that enable the slider to work with both dots and left-right buttons. Please refer to the snippet below, and make sure to run it in full screen mode.

var slideIndex = 0;
showSlides();
var slides,dots;

function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlides");
    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, 8000); // Change image every 8 seconds
}

function plusSlides(position) {
    slideIndex +=position;
    if (slideIndex> slides.length) {slideIndex = 1}
    else if(slideIndex<1){slideIndex = 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[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
}

function currentSlide(index) {
    if (index> slides.length) {index = 1}
    else if(index<1){index = 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[index-1].style.display = "block";  
    dots[index-1].className += " active";
}
#slide{
width:96%;
}

* {
box-sizing: border-box
}

.mySlides {
display: none
}

.slideshow-container {
width: 1200px;
position: relative;
margin: -10px;

}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 2s;
}
@-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 id="slide">
  <div class="slideshow-container">
    <div class="mySlides fade"> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div>
    <div class="mySlides fade"> <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"> </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>
  <br>
  <div style="text-align:center"> 
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
   </div>

Answer №2

The indicator dots were not showing correctly. To fix this issue, I made a small adjustment to the Javascript code by adding a few brackets. Here's the updated code:

<script>

var slideIndex = 0;
showSlides();
var slides,dots;

function plusSlides(position) {
    slideIndex += position;
    if (slideIndex > slides.length) {slideIndex = 1}
    else if(slideIndex < 1){slideIndex = 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[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
    }

function currentSlide(index) {
    if (index > slides.length) {index = 1}
    else if(index < 1){index = 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[index-1].style.display = "block";  
        dots[index-1].className += " active";
    }

function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlides");
    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, 3000); // Change image every 3 seconds
}

</script>

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

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

javascriptpythonhtmlseleniumselenium-webdriver

Utilizing the Chinese Remainder Theorem within JavaScript Programming

Attempting to tackle the challenge presented in part 2 of Advent of Code 2020 day 13, I came across discussions referencing the intriguing concept known as the Chinese Remainder Theorem. Various approaches were explored, including utilizing an older implem ...

javascripttypescriptalgorithmcrt

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

Pass the array data stored in React state over to Node/Express

I have been exploring ways to transfer an array from my react front end to my node/express back end. Initially, I attempted the following method. In React: saveUpdates = (clickEvent) => { var list = []; var length = this.props.title.length; ...

javascriptarraysnode.jsreactjsexpress

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

javascriptjqueryhtmlcsscss-float

To interact with a specific cell in a table using Protractor, simply click

I have a dataset containing various elements such as images, text, and numbers. I am struggling to click on a specific text within the dataset. As someone new to e2e testing with Protractor, any assistance would be greatly appreciated. I specifically need ...

javascriptangularjsautomationprotractorautomated-tests

Issue with dropdown list functionality in Internet Explorer not functioning correctly

I am experiencing an issue with my dropdown lists. When selecting an item from the first dropdown list, it should not be available in the second dropdown list. To achieve this functionality, I have implemented jQuery code like the following: $(document).r ...

javascriptjquery

Mobile devices offer a seamless vertical scrolling experience

Here is the HTML structure I am working with: <div> <a>..</a> <i>..</i> <a>..</a> <i>..</i> <a>..</a> <i>..</i> </div> On larger screens, all elements are dis ...

htmlcsssass

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

I am facing an issue in my Laravel project where I have implemented a method in the Vue instance to validate resource availability upon form submission. The validation is done through an AJAX call using axios, and if any resources are unavailable, I receiv ...

javascriptformsvue.jsaxios

Assign Attribute to a Different Data Transfer Object

I have a query regarding my nestjs project - is it possible to assign a value Attribute to another Dto? Specifically, I'm looking to assign idData to the id in IsUniqueValidator. I attempted the following code but it resulted in 'undefined&apos ...

javascriptnode.jsnestjsclass-validator

Organize data in a Vue.js table

Currently facing an issue with sorting my table in vue.js. Looking to organize the table so that campaigns with the highest spend are displayed at the top in descending order. Here is the code I'm working with: <template> <div class=" ...

javascripthtmlvue.js

Creating a standalone script using npm JS package for exporting

I'm currently utilizing the npm package manager in my latest project. Within my package.json file, I have a dependency specified: "dependencies": { "litepicker": "^2.0.11" }, The dependency is on litepicker, which i ...

javascriptnode.jsnpm

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

How can you make the second block element in a pair stretch to fill the parent element?

I'm currently struggling to make the "rightcol" in the "wrapper" of my data-entry form fill the remaining space next to the second column. Despite successfully displaying the child elements properly, whenever I use the border-bottom attribute, the bor ...

htmlcss

Incorporating Bootstrap content directories into ASP.NET website projects

I've been experimenting with Bootstrap for website design, but I'm facing an issue with adding files to my project. When creating a project in Visual Studio 2015 using File/New/Web Site..., I'm able to simply Copy/Paste the css, fonts, js fo ...

c#cssasp.netweb-applicationsbootstrap-4

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss

Is it possible to configure Webpack/NextJs to handle a recurring import path mapping?

Exploring ways to streamline imports in my NextJs Project (v14.1.3), I'm interested in finding a method to modify the import statement below: import foo from 'path/to/foo/foo' To possibly simplify it to: import foo from 'path/to/foo&ap ...

javascriptwebpacknext.js

What is the best way to manage a JSON feed that does not provide any results?

Excuse my lack of experience as I pose my first question. Using FullCalendar 5.10.1, I am working on retrieving events dynamically associated with Festivals. I have followed the 'events (as a json feed)' pattern from the documentation. When ther ...

javascriptjsonajaxfullcalendarfullcalendar-5

Flowing vertically and horizontally while adjusting line height within the <small> HTML tag

While working on the typography for my new website, I encountered an unusual issue with the <small> tag. It seems to be messing up the line-height, unlike other elements like heading tags and paragraphs. Here's a visual representation of the pr ...

htmltagsvertical-alignmentcss

My goal is to create collapsible and expandable rows within this table

Discover the code snippet here, without pasting the entire content... As an illustration, let's utilize this example: <head> </head> <body> <table> <tr> <th></th> < ...

htmlcsshtml-table