JavaScript button triggering image slider display

I am having difficulty with a slider containing URL links inside an Array. Can anyone help me figure out how to make this code run properly? Here is the link to the code: https://codepen.io/konradszymanski/pen/VwvLgYG?editors=0110

Below is the HTML:

<script src='https://kit.fontawesome.com/a076d05399.js'></script>
  <div class="container">
    <button class="left" onclick="" ><i class='fas fa-angle-left'></i></button>
    <button class="right" onclick="next()"><i class='fas fa-angle-right'></i></button>
  </div>

And here is the JavaScript code:

 var images = [
{ img: "https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg" },
{ img: "https:upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg" }
];
var x = images;
var element = document.getElementById("container");
element.innerHTML = x;
next();
function next() {
element.innerHTML = x;
};

Answer №1

 let pictures  = [{img: "https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg"},{img: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg"}];
let container = document.getElementById("gallery");
function switchPicture(direction){
  let index= container.dataset.index;
  if(direction=="right"){index++;}else{index--}
  if(index>pictures.length-1){index=0;}
  if(index<0){index=pictures.length-1;}
  container.dataset.index=index;
  container.style.backgroundImage  ="url('"+ pictures[index].img +"')";
};
*{
}
body{
  background-color: #3a4a63;
}
 img{
    min-width: 500px;
    height: 400px;  
  }
.container{
  min-width: 500px;
  height: 400px;
  margin: 0 auto;
  background-color:#363537;
  display: flex;
  justify-content:space-between;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 7px solid #fff;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg);
  background-size: cover;
  background-position:center center;
  background-repeat:no-repeat
}
button{
  font-size: 50px;
  padding: 5px 10px;
  background-color: #3a4a63;
  border: 4px solid #fff;
  border-radius: 10px;
}
.fa-angle-left,
.fa-angle-right{
  color: #fff;
}
.left{
  position: relative;
  left: -25px;
}
.right{
  position: relative;
  left: 25px;
}
*/
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
  <div class="container"id="gallery"data-index="0">
    <button class="left"  onclick="switchPicture('left')"><i class='fas fa-angle-left'></i></button>
    <button class="right" onclick="switchPicture('right')"><i class='fas fa-angle-right'></i></button>
  </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

How can I effectively update my Vue.js component for optimal performance?

I have a search page with a text box and search button. I implemented a facet using Vue.js. Initially, everything works fine when I search for something. However, after typing a new text and searching again, the facet does not update with the new values. ...

Invoke a function from within its own callback

Is it possible for my NodeJS application to face a stack overflow if my C++ application, which it runs and monitors, gets killed too many times? If the scenario of repeatedly killing the C++ application happens multiple times over several days, could it po ...

Mastering the art of managing button toggles with a wrapper

Currently, I am in the process of developing a Toggle Button that has specific requirements. According to the specifications, a group of Toggle Buttons should exhibit behavior that allows for both single click (see example) and multiple clicks (see example ...

Is a shifting background image possible?

Can anyone shed some light on how the dynamic background image on this website is created? Is it a JavaScript plugin, a simple .gif, or something else entirely? Appreciate any insights! ...

Search for documents in MongoDB that have a key that exists and the value is set to true

I'm currently working on developing a customized ACL for my application. The structure of my data is shown below: { _id: ObjectId("345sdf345dsf"), allowedResources: { "GET /auth": true, "POST /verify": false ...

Encountered a problem - "Parameter 'myCtrl' is not a valid function, received undefined"

Having trouble pinpointing my mistake. I tried following this guide with no success - How to find a reason AngularJS "Argument 'MyCtrl' is not a function, got undefined" Below is the content of my index.html file - <!DOCTYPE> & ...

Most efficient method for implementing a recursive function while looping through elements in an array

Let's consider a scenario where we have an array of letters: const letters = ['a','b','c','d']; In addition, we have a function that requires a string argument letter and generates a concatenated output of that ...

Is there a way to automatically redirect the main html page to a different html page upon logging in?

I have created a main page in HTML with a login box that displays a message saying "Login successful" or "Login failed" based on whether the password entered is 8 characters or more. The validation function for this works correctly, but after successfully ...

Encountering a '[BABEL] Cannot find module' error message after setting up a new PC

Recently, I configured my development environment on a fresh operating system. When I navigated to my project folder and executed the commands: npm install npm run serve I encountered the following error message: Module build failed (from ./node_modules ...

Having trouble signing out in Nextjs?

As a newcomer to Reactjs and Nextjs, I am currently working on developing an admin panel. To handle the login functionality, I have implemented the following code in my index.js/login page using session storage: const data = { name: email, password: pa ...

Steps for rotating around the x-axis followed by the y-axis with quaternions

Is there a way to rotate an object around its x-axis by 90 degrees and then around its y-axis by another 90 degrees in three.js? I experimented with the following code: mesh.rotation.x = Math.PI * 0.5; mesh.rotation.y = Math.PI * 0.5; However, the objec ...

Running Functions Out of Order in JavaScript - An exploration of Asynchronous Execution

I've been working on understanding how to manage the execution order of my script using asynchronous functions and promises. Despite going through numerous resources, I'm still struggling with getting it to work as expected: My approach involves ...

Cordova's Dynamic Scrolling Feature for iOS Overflowing Elements

When using the Safari iOS browser, listening to scroll events triggers the console message every time, even during momentum. However, in the Cordova built app, the message is only triggered when the scroll has stopped. el-with-webkit-overflow-scrolling-to ...

Creating an extension of a Vue.js component from a third-party library

I'm currently using the ElDatepicker component from element-ui and I am looking to customize its template and event handler method. I have attempted to achieve this within a single file component: import Vue from 'vue'; import ElDatePicker ...

AngularJS function failing to run JavaScript code

I encountered an issue when attempting to execute a JavaScript function within an Angular function. The error I am facing specifically mentions that the indexof and search functions are not functioning properly. <select class="form-control input-sm in ...

What is the most accurate way to obtain the current timestamp?

Currently, I am working towards my backend certificate at freecodecamp and one of the tasks involve returning a JSON response with the current time using chained middleware and handlers. Here is the code I have written: app.get("/now", (req,res,next)=>{ ...

Steps to extract data from a table with identical class names and combine them:1. Identify the table

I have created a table showcasing team names and scores. To view the demo, you can check it out here Upon clicking the Submit button, only the output of one match is displayed (Team A and B), excluding the other matches. Given that they all share the sam ...

"When using `app.use(express.static`, it appears that the functionality is not working properly when the app is a sub

I attempted to implement something similar to this: var main = express(); main.use(express.static(path.resolve('./asset'))); main.route('someroute', someHandle); var app = express(); app.use(express.static(path.resolve('./asset&ap ...

javascript - The onmessage event will not trigger when using a Java server

I have encountered an issue with my Java server and JavaScript websocket client. Despite trying various solutions from this site, I am still unable to resolve the problem. So, I decided to share my code here in hopes of getting some assistance. The proble ...

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...