Experiencing difficulties replicating two auto-scrolling divs

I have implemented a script to automatically slide two different divs. Here is the code I am using:

The HTML:

<div id="gallery">
  <div id="slider" style="width: 6000px; left: -500px;">
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
  </div>
  <span id="prev"></span>
  <span id="next"></span>
</div>


<div id="galleryTwo">
  <div id="sliderTwo" style="width: 6000px; left: -500px;">
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     .............................................

The CSS:

/* Scolling review starts */
#gallery{
  position:relative;
  margin: 0 auto;
..................................................

The Script:

var $gal = $('#gallery'),
............................................................

The fiddle link:

Fiddle link

The Issue:

While implementing an autosliding div feature with two separate ids #gallery and #galleryTwo, I encountered a problem where hovering over one of the divs stopped the automatic slide for the other duplicated div. I need assistance in ensuring that both divs continue to auto slide regardless of hover events.

javascriptjqueryhtmlcss

Answer №1

The global variable intv is assigned to the interval set for the second slider. When hovering over either of the sliders, the code snippet below executes:

$('#gallery').hover(function( e ){
 return e.type=='mouseenter'?clearInterval(intv):auto();
});

$('#galleryTwo').hover(function( e ){
 return e.type=='mouseenter'?clearInterval(intv):auto();
});

This action clears the interval associated with intv, causing the second slider to stop moving. To control each slider independently, create separate variables for their intervals.

If hover behavior is not needed for slider control, you can simply remove these hover event listeners :)

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

Enhance user experience with a dynamic Bootstrap combo box that updates based on

I am currently facing an issue with the bootstrap combobox plugin. I am having trouble changing the selection and sending that information from the view to the controller. $('#MyCombo').on('change', function () { var data = $(this) ...

javascriptjqueryasp.net-mvctwitter-bootstrap

What is the best way to customize Node.js configuration when it is executed through npm?

Check out this documentation on node config: node myapp.js --NODE_CONFIG='{"Customer":{"dbConfig":{"host":"customerdb.prod"}}}' However, if I run a npm script, all parameters will be passed to npm instead of nodejs, right? How can I pass the -- ...

javascriptnode.jsnpmnpm-config

Tips for making an image box with a rollover effect

I need help figuring out how to create a unique user experience within a container that is 500px wide and 800px tall. The container currently has an image as a background, and I want to add a "sign up" button in the middle. When this button is clicked, I w ...

javascriptimagehtmlwidgetrollover-effect

Error in Next.js: The element type is not valid. Please make sure it is either a string (for built-in components) or a class/function (for composite components) and not undefined

I've encountered an issue while working on my Next.js project where I am trying to import the Layout component into my _app.js file. The error message I received is as follows: Error: Element type is invalid: expected a string (for built-in componen ...

javascriptreactjsnext.js

The impact of angles on drop shadows in CSS3

Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...

css

Show information from the console logger

I'm currently working on displaying data from a database in an HTML page. While the data is showing up in my console, I'm struggling to figure out how to present it in an HTML table format. I'm unsure about the specific function that needs t ...

phpjqueryhtml

Manage and maintain database structure with synchronization capabilities

I am tasked with creating a web application that can function offline using Local Storage or IndexedDB. Currently, my server has schema v2 which includes additions such as new tables or fields, while my local app is using schema v1. I am looking for a so ...

javascriptjsonlocal-storageindexeddb

Master the Art of Creating Responsive Table Rows

Can someone please help me with making my table of rows and columns mobile responsive? I have inserted data from the database, but it doesn't adapt well for mobile devices. I have used element1 and content1 id for the background of the elements, but h ...

htmlcssresponsive

Node-fetch enables dynamic requests

Seeking to retrieve real-time data from a fast-updating API has posed a challenge for me. The issue lies in my code constantly returning the same value. I've experimented with two approaches: var fetch = require("node-fetch"); for(let i=0; i<5; i+ ...

javascriptnode.jsnpmfetch

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

javascriptphphtmlwordpress

Anticipating the arrival of an external JavaScript file in the child component

I am facing an issue with my parent component that dynamically loads an external js file (similar to what is explained here). The child component needs a variable inside the js file, but it throws an error every time the page is loaded because the child c ...

javascriptvue.js

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

javascriptcssimageanimationnext.js

Increasing a value within HTML using TypeScript in Angular

I'm working with Angular and I have a TypeScript variable initialized to 0. However, when trying to increment it using *ngFor in my .ts file, the increment is not happening (even though the loop is running correctly). my-page.html <div *ngFor=&quo ...

javascriptangulartypescriptngforstring-interpolation

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

What are the steps to incorporate metrics middleware for Socket IO notifications, specifically monitoring both emitted events and listener activity?

I am currently working on a project that involves tracking all socket.io notification transactions initiated by the server, resembling an API request/response counter to validate subscription validation. Our team is utilizing an express middleware to moni ...

javascriptnode.jssocketsexpressloopback

Encountering a problem with Vue when running the node-rdkafka package

I added node-rdkafka to my project using the command npm install node-rdkafka. Then, I included it in my code like this: import Kafka from 'node-rdkafka'; created() { console.log(Kafka.features); } An error occurred when running npm r ...

javascriptvue.jsapache-kafkakafka-consumer-api

Prevent selection of future dates in HTML input using PHP exclusively

I am looking for a way to limit the date input on my form using PHP and HTML. <?php echo '<input type="date" name="doc" value="' . date("d-m-Y") . '" min="11-05-2014" max="' . date("d-m-Y") . '"/>'; ?> While rese ...

phphtml

Can flex-basis be used with percentage in IE11?

Encountering an issue with flexbox and IE10/11. Trying to utilize min-width/max-width values, but IE11 is not cooperating. Discovered flex-basis and used a percentage value, which functions as intended in Chrome but fails in IE11. Experimented with adding ...

htmlcssflexbox

Why is the Jquery console not displaying any values?

Hey everyone, I need some help with a small issue in my project. For some reason, the console.log() function in my project is not returning any values. <script> $('#search-box<?=$x;?>').blur(function() { var val = $("#search ...

javascriptphpjqueryconsole.log

IntelliJ Community offers comprehensive support for React.js development

Looking for a free React.js plugin with features like syntax highlighting and autocomplete that can be used in IntelliJ Community edition. Considering migrating from Ultimate license to Community edition. Found some answers on stackoverflow but none were ...

javascriptreactjsintellij-idea