Lost in the process of designing a carousel

I am attempting to create a customized carousel using the basic example provided on w3schools.

In addition to that, I have created an extra div and inserted my content inside it. Below is the JavaScript code I used:

<script>
        var slideIndex = 1;
        showDivs(slideIndex);

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

        function showDivs(n) {
            var i;
            var x = document.getElementsByTagName("table")
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "block";
        }
    </script>

You can view a working example in this fiddle: http://jsfiddle.net/h9sa7Lgw/

I am facing two issues:

  1. I would like to place the navigation arrows inside my mainDiv.
  2. The previous arrow (<) does not seem to work. In the fiddle, even the next arrow (>) is not functioning, but it works locally.

This query relates to the functionality of my actual code rather than the fiddle. When running the code, it fails to execute. Can anyone point out where I might be making mistakes and suggest a solution?

Thank you.

javascripthtmlcss

Answer №1

If you're having trouble debugging, try opening your developer tools and pressing the F12 key. The console can display error messages that may help identify the issue, and the elements tab will highlight your elements.

  1. I'm trying to move the arrows inside my mainDiv.
    They are already located within your mainDiv.

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

  1. The previous arrow (<) doesn't appear to be functioning. In the fiddle, even the > is not working, although it works on my local machine.

There seem to be several errors here. Firstly, your script is being executed onload of the body, so it should have "No wrap - in body" selected (refer to this answer for more information: jsFiddle onload and no-wrap in body). Additionally, there is a mistake in the onclick attribute of the left button, where it says nclick instead of onclick. After making these corrections, everything should function properly. Here is the updated fiddle link: http://jsfiddle.net/h9sa7Lgw/

Answer №2

Ensure the mainDiv is positioned relative to its parent element.

.mainDiv {
    border: 1px solid black;
    width: 50%;
    margin-left: 10%;
    position: relative;
}

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

Tips for transforming JSO into JSON data format

Here is an example: var info = [{"name":"john","age":"30"},{"name":"smith","age":"28"}] I am looking to convert the above json object to a format like this result: [{name:"john",age:30},{name:"smith",age:28}] Any suggestions on how to achieve this? ...

javascriptjson

Handling Errors with Symfony 5 JSON Responses and VueJS Using Axios for Customized Error Messages

I need to show a personalized error message when my JSON response throws an error. Some of my services trigger an error like this: if (count($recipients) === 0) { throw new TransportException($this->carrierService::ERROR_NO_MAIL_ADDRESSES); } The ...

javascriptphpvue.jssymfonyaxios

Check for duplicates within 2 arrays by implementing a filtering process

I am trying to figure out how to compare two arrays to determine if there are any duplicates within them. const result = this.specialRange.filter(d => !dayMonth.includes(d)); What I have attempted so far just returns the entire array back to me, but I ...

javascripttypescript

Are there any solutions to refresh a page by clicking a button in next.js?

I am currently learning how to work with next.js and I'm facing an issue where I need to reload my page to make a new API request. As a beginner, I'm not sure how to achieve this. I've tried a few methods but none of them seem to work. Below ...

javascriptreactjstypescriptnext.js

Showing various SQL data fields within a single HTML column

I am facing a challenge with displaying multiple checkboxes from different columns in a database as a single column on a webpage. Here is the HTML form structure: <div class="form-group"> <label class="col-md-2 control-label">R-1 ...

phphtmlsql

Is it possible to create a "text carousel" using HTML, CSS, and JavaScript?

Currently, I am in the process of building a 'text carousel' on my own, without seeking assistance. The progress so far can be viewed here (please stretch it out, as it is not responsive yet). Specifically, I am aiming to replicate the text carou ...

javascriptjqueryhtmlcsscarousel

Guide to implementing a fadeInUp animation on a slider's text when the next-slide button is clicked using HTML, CSS, and JavaScript

I am looking to add a fadeInUp animation effect to the text in my slider. Currently, I have a slider in place and want the next slide text to run the fadeInUp animation when the user clicks on the next slide button. I tried using animate.style (), but it o ...

javascripthtmljquerycssslider

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

csssasscss-animationsclip-path

Trigger functions when the window is scrolled, resized, or when the document is fully loaded

I have a few functions that need to be executed under specific conditions: window.scroll window.resize document.ready For example: <script> function myFunction1(data){ /*code*/ } function myFunction2(data){ /*code*/ } ...

javascriptjquery

The value of the input field in jQuery is not defined

I am encountering an issue with an error: jQuery input val() is undefined. I have 3 inputs that are all referencing one item. When I add a new row, I can create a new item (3 rows). All of these rows need to be organized in an array to be sent to a PHP f ...

javascripthtmljquery

Is it possible to create a single code that can be used for various buttons that perform the same function?

Whenever I click the right button, the left button appears and when I reach the last page, the right button disappears. However, this behavior is affecting both sections. Is there a way to write separate code for each section? I managed to make it work by ...

javascriptjqueryhtmlcss

What is the process for transforming a method into a computed property?

Good day, I created a calendar and now I am attempting to showcase events from a JSON file. I understand that in order to display a list with certain conditions, I need to utilize a computed property. However, I am facing difficulties passing parameters to ...

javascriptvue.js

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

Guide on implementing socket.write within a function

var net = require('net'); var server = net.createServer(function(connection) { console.log('client connected'); connection.on('end', function() { console.log('closed'); }); // connection.write(&apos ...

javascriptnode.js.netsockets

Exploring the plane intersection within a 3D object using Three.js

I attempted to create an animation using Three.js to display the intersection plane on a 3D object with the following code snippet: import React, { useRef, useEffect, useState } from 'react'; import * as THREE from 'three'; export cons ...

javascriptreactjsthree.jsjsx

Tips on maintaining the consistent color of an active link until selecting a different link

Is it possible to make a link change color when clicked, and have that color stay until another link is clicked? How can I achieve this using the "active" attribute? I attempted it, but the link reverts back to its original color after clicking. &l ...

htmlcss

AngularJS Integration with Spring MVC for File Upload

After completing the AngularJS part of the file upload, I encountered an error when trying to send the uploaded file to my controller. The error message indicated that the URL was not valid: The code for my controller is as follows: @RestController @Requ ...

javascriptjavaangularjsspring

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

jquerycssslideshow

Is it possible to incorporate an HTML file using PHP?

I'm looking to add an external HTML file containing my navigation bars to all pages. I attempted using: <?php htmlentities(file_get_contents("include/navigation.html")); ?> However, nothing is displaying on the page. I've searched other ...

phphtml

Error in jQuery ajax request when passing multiple variables to php script

When I use ajax to send two variables to PHP, the second variable is received correctly, but the first variable is always reported as NULL by PHP. I checked the JavaScript variable before sending it and confirmed that it contains an array of strings. I&apo ...

javascriptphpjqueryajax