Javascript issue with unresponsive buttons

I've been experimenting with animations on a webpage, particularly with turning a circle into a carousel to display more information. I was inspired by CodingNepal's infinite carousel idea. Everything looks good except the buttons (i tag) are not functioning as they should. In his original work, the buttons work perfectly, but I can't seem to figure out why they're not working on my version. Any suggestions or help would be greatly appreciated!

Here is the HTML:

<section class="container-fluid" id="container-services">
      <div class="service-container">
        <div class="service-canva">
          <div class="rotating-circle"></div>
          <div class="icons" >
            <div class="imgBx" style="--i:1;" id="imgService1">
              <button><img src="images/nails-service2.jpg"></button>
            </div>
            <div class="imgBx" style="--i:2;" id="imgService2">
              <button><img src="images/nails-service2.jpg"></button>
            </div>
            <div class="imgBx" style="--i:3;" id="imgService3">
              <button><img src="images/nails-service2.jpg"></button>
            </div>
          </div>
          <div class="caro_canva">
            <i id="left" class="fa-solid fa-angle-left"></i>
            <ul class="caro">
              <li class="card">
                <div class="img"><img src="images/nails-service2.jpg" alt="img" draggable="false"></div>
                <h2>Blanche Pearson</h2>
                <span>Sales Manager</span>
              </li>
              <li class="card">
                <div class="img"><img src="images/img-2.jpg" alt="img" draggable="false"></div>
                <h2>Joenas Brauers</h2>
                <span>Web Developer</span>
              </li>
                // more li elements here
            </ul>
            <i id="right" class="fa-solid fa-angle-right"></i>
          </div>
          </div>
        </div>
      </div>
    </section>

Here is the CSS:

And here is the Javascript:

I've also used bootstrap for some additional styling.

You can view the live version here.

However, I'm having trouble getting the buttons to work properly. Any insight or assistance would be greatly appreciated.

Answer №1

After much trial and error, I managed to crack the code. The culprit was the sneaky display:none hiding within the .caro_canva class. I'm still unsure of the mechanics behind this interaction, but rest assured, if I do figure it out, I'll be sure to share it with you all. In the meantime, I've updated the code on CodePen for those curious souls who want to take a peek.

Here's to hoping this tidbit of information proves useful to someone out there!

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

Finding out the specific row that was clicked in a Jquery Mobile listview

I've searched everywhere and can't find a solution. How can I retrieve the value of a row tapped in a listview? This could be anything from the name to the index within the object. Currently, I have a function handling the tap event. I need to pa ...

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

Can components be designed in a way that includes elements such as buttons or text areas in the code, but allows for them to be excluded when the component is used?

I have a custom form component that I designed. Depending on certain cases, I want the form to display either a button or a text field instead of the input field as currently coded. function FormTypeOne(props) { return ( <form className={classes.f ...

IE8 triggers automatic download upon receiving JSON response using jQuery

Can you help me make IE8 compatible with this code using jQuery to handle an ajax request that returns data as JSON? $.ajax({ url: formAction, type: 'post', dataType: 'json', data: form, success: ...

Lazy loading images in a grid using React's react-lazy-load component

In my React application, I have a grid of images. To show these images in the div grid, I am utilizing sprites where each set of 10 divs uses a single URL to display the thumbnail. With approximately 16000 thumbnails to showcase, I decided to implement rea ...

Converting form input to JSON and then parsing it into an object

I'm currently working on converting form data to update a JSON object upon submission. Here's my progress so far: var app = { slidePreviews: "", selectedTheme: "", slideDuration: 7000, slides: [] }; $(document).ready(function() ...

CSS: Adjusting the top margin of a font

I admit, the title of this question may not be the most creative, but I've hit a wall in my search for answers. It seems like I must be missing something fundamental in CSS, or perhaps my search terms are just off. Here's the issue: I have a con ...

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

Nextjs exposes a bug in react-bootstrap's navbar component

After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected, https://i.stack.imgur.com/R9guE.png but upon refreshing the page, CS ...

Include CakePHP named parameters in the URL when selecting from a list

If I have a selection list like the one below: <select name='languages'> <option value='german'>German</option> <option value='english'>English</option> </select> How can I use Jav ...

Upgrade to Jquery 2.x for improved performance and utilize the latest ajax code enhancements from previous versions

We are encountering a minor issue with Jquery while loading numerous ajax files in our system. Currently, we are using Jquery 2.x and need to be able to operate offline on IE 9+. Previously, when working with Jquery 1.x, we were able to load ajax files fro ...

Sluggish Performance of Material UI Table

Hey there! I've been working with Material-UI for a large data table, but I've noticed it's quite slow. Before reaching out on Github, I wanted to see if other users have any tips or workarounds to help improve performance. Here is the code ...

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

Enhancing ASP.NET MVC 5 Application with jQuery Validate: Implementing Submit Button Click Events

In the process of developing an ASP.NET MVC 5 application, I find myself faced with a dilemma. The current setup involves using the jQuery Validate plug-in that comes packaged with MVC applications. Upon clicking the "submit" button, jQuery Validate kicks ...

Attempting to modify text using the header parameter has proven to be ineffective

pages/_middleware.ts import { NextRequest, NextResponse } from 'next/server'; const isMobile = (userAgent: string) => /iPhone|iPad|iPod|Android/i.test(userAgent); const propName = 'x-rewrite'; enum Device { desktop = 'no& ...

Tips for organizing data when parsing JSON in Javascript

I am facing a challenge with maintaining the order of JSON data that I am parsing using Javascript and displaying in an HTML SELECT element. The incoming data is already sorted, but I am encountering issues sustaining this order after decoding the JSON str ...

Having issues with AngularJS ng-if when implemented within a Form

Is there a way to hide my form after it has been submitted using ng-if? I am facing an issue where clicking the 'See' button toggles the form on and off, but the same functionality does not work with the 'Add' button. Any insights on wh ...

Ways to access and delete the canvas using ref steps?

Having a canvas in a react component, I utilized react refs to access the node and implemented a destroy() method. However, I encountered an error: TypeError: canvasRef.current.destroy is not a function How can we properly access the node (canvas) using r ...

Angular findIndex troubleshooting: solutions and tips

INFORMATION = { code: 'no1', name: 'Room 1', room: { id: 'num1', class: 'school 1' } }; DATABASE = [{ code: 'no1', name: 'Room 1', room: { id: 'num1', ...

Checking for offline status in a Cordova app using Angular

I have implemented the following code to determine whether my Cordova application is online or offline. var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown'; states[Connection.ETHERNET] = ' ...