Interactive image rotator featuring navigation buttons for next and previous slides

I recently followed a tutorial from W3Schools

Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself

Here is what I aim to accomplish:

https://i.sstatic.net/qH1PQ.png

Below is the code snippet that I have been working on:

example

OR

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
#indi {
  width: 200px;
  float:left;
}
<body>

<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">

  <div class="w3-row-padding w3-section">
    <div  id="indi" class="w3-col s4">
      <img  class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div id="indi" class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)">
    </div>
    <div id="indi" class="w3-col s4">
      <img  class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
    </div>
  </div>
</div>

</body>

Your assistance is greatly appreciated. Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

Subsequent:

$("#next").click(function () {
$("#container div:eq(" + index + ")").slideUp(450);
index = (index + 1) % 4;
$("#container div:eq(" + index + ")").fadeIn(450);
});

Prior:

$("#last").click(function () {
$("#container div:eq(" + index + ")").slideUp(450);
index = 4;
$("#container div:eq(" + index + ")").fadeIn(450);
});

This query has already been addressed - How do I add buttons to my Javascript/Jquery Slider?

If you require further assistance, feel free to ask.

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 decrease the font size of every element in the DOM?

Is there a way to decrease the size of all DOM elements by a specific amount? Currently, I am using Bootstrap styles where h5 is set at 14px and I need it to be 12px, and h1 is at 36px when I want it to be 34px, and so forth. I have considered two option ...

csstwitter-bootstrapcross-browser

What method was used to incorporate a 2 pixel margin between the th elements on this website?

I've been analyzing the code thoroughly, but I am still unable to decipher how they managed to create a 2px margin between the th elements: The website in question is: Does anyone have any insights on this? ...

htmlcssspacehtml-table

Animating an SVG in a circular motion starting from its central point with either CSS or XML

I've been grappling with the challenge of getting a part of my personal logo to rotate. My logo consists of "SB" and an asterisk, denoted as "st1," which is what I'm attempting to animate. Despite my attempts using XML and CSS, I've encounte ...

cssxmlanimationsvgcss-animations

Transforming a d3 line chart into a bar chart

Beginner in D3 seeking assistance. I have successfully created a line chart that meets my requirements. Below is the code I used, with some modifications, mostly inspired by this source: <!DOCTYPE html> <meta charset="utf-8"> <sty ...

javascriptd3.js

Which language is better for refreshing web pages: PHP or Javascript?

May I seek your opinion on this matter? I have the ability to refresh my page using two different methods, but I am uncertain of any potential drawbacks. Can you advise me on which one I should utilize? Edit: Specifically, I am referring to the use of he ...

javascriptphprefresh

Unable to assign a value to the HTMLInputElement's property: The input field can only be set to a filename or an empty string programmatically

When attempting to upload an image, I encountered the error message listed in the question title: This is my template <input type="file" formControlName="avatar" accept=".jpg, .jpeg .svg" #fileInput (change)="uploa ...

javascripthtmlcssangulartypescript

Regular expression for parsing any CSS font properties

Does anyone have a reliable regex to break down a css font string into its individual components? 12px arial italic bold sans-serif 12px/50px verdana etc ...

javascriptregex

Retrieving and storing successful response data in Angular JS using the $http service caching

My dataFactory is set up to retrieve posts in a simple manner: dataFactory.getPosts = function () { if (this.httpPostsData == null) { this.httpPostsData = $http.get("http://localhost/matImms/wp-json/posts?type=journey&filter[posts_per_page ...

javascriptangularjsionic-framework

Should I serialize a 2D array in JSON format and send it as two separate arrays, or is

When it comes to sending a 2-dimensional array (along with several other variables) to PHP using jQuery.ajax(), I have a couple of options in mind: One option is to serialize to json using JSON-js Another option would be to send both arrays as csv string ...

phpjavascriptjqueryajaxjson

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea... I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this ...

csshoverz-indextransparenttransition

What is the process for extracting information from a middleware within a Next.js framework?

I have been working on developing an authentication system using JWT in Next.js. In order to achieve this, I created a middleware that can validate the JWT token and establish an authentication process as shown below: export default function middleware(req ...

javascriptreactjsnext.js

Determining if a user is already logged in from a different device using express-session

After a user logs in, I assign the username to their session with the code: req.session.username = "...."; This identifies the session with a username, but now I need to figure out how to detect if this same username is already logged in from another dev ...

javascriptnode.jsexpressexpress-session

The Vue component fails to respond to updates in plugin data

I am currently working on implementing a feature where a component reacts to data changes in a custom Vue plugin. To achieve this, the plugin creates a new instance of a Vue object in its constructor: this._vm = new Vue({ data: { obj: null, stat ...

javascriptvue.jsvuejs2watch

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...

htmlangulartypescript

Is it possible to dynamically insert one module into another module?

Let's say I have 2 modules in two separate files: The first one is for everyone, let's call it myApp: var myApp = angular.module('myApp', ['dependency.one', 'dependency.one']); In another file named admin.js, I ha ...

javascriptangularjs

Is there a way to prevent cards in a carousel slide from wrapping onto two lines?

Currently, I am utilizing Bootstrap 5 to develop a website and an accompanying carousel. My objective is to align all the items in the carousel vertically. Unfortunately, I am encountering some difficulties in achieving this layout. Can anyone provide assi ...

htmlcssvisual-studiofrontendbootstrap-5

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Having trouble using the firefox selenium plugin and sending the enter key after pasting text? The ENTER key press should not interact with any other element on the page, just a simple 'dumb' ENTER key press. error [error] Element name=code not ...

javascripthtmlseleniumweb-scrapingelement

CSS outline not displaying correctly in latest version of Internet Explorer

Currently delving into the UI of my web design project. I have come across an issue where the outlined feature in a specific div is not displaying properly in IEv11. Below is a snippet of the CSS code causing the problem... .samp-banner:focus, #samp- ...

htmlcssinternet-explorerfocusoutline

Chrome browser is currently blocking the ASPX API

$.ajax({ type: "GET", url: "http://<api URL>/xml_full_new_york.aspx", contentType: "application/xml; charset=utf-8", dataType: "xml", async: true, error: function (jqXHR, textSta ...

jqueryajaxxmlapijquery-ajaxq