How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img.

My goal is to have the thumbnails scroll along with the main pictures as the user clicks on the next button. I attempted the following code:

$("#next").click(function({$(".slider_thumbnail").animate({scrollLeft: 300px})});

However, it only seems to work the first time and fails to function correctly on subsequent clicks of the 'next' button.

javascriptjqueryhtmlcss

Answer №1

It seems like there may be an issue with the scrollLeft: 300px property in your code. Instead of setting the element's scroll position to an absolute value of 300px, consider using scrollLeft: "+=300" for continuous movement. This way, when you click the next button, the element will continue to scroll by an additional 300 pixels each time. For more information, check out http://api.jquery.com/animate/

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

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

css

Discovering every row in a table's <tbody> section through the power of jQuery

I am struggling to fetch all rows from a <tbody> segment in a table, and I need guidance on the correct syntax. Below is a sample snippet of the table structure along with my latest attempt using jQuery! Table segment: <tbody> <tr> & ...

jqueryhtml-table

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

htmlcsshtml-lists

Attempting to import a npm module that is not defined

I recently released an npm package. It is working perfectly when accessed via the global variable window.Router in the browser, but I'm facing issues when trying to import it using ES modules in a Meteor application. It keeps returning undefined... ...

javascriptnode.jsmeteornpmwebpack

Error encountered while implementing Ajax in Django with XMLHttpRequest

Currently, I am developing a webpage with a form in the Django view. The form consists of input fields for an artist's name, city, and state. These values will eventually be combined to create a URL linking to a JSON file containing concert data (this ...

jquerypythonjsonajaxdjango

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

javascripthtml

Are strings in an array being truncated by Firebug console log?

I have a unique function for logging messages to the firebug console that I'd like to share: // Just having fun with names here function ninjaConsoleLog() { var slicer = Array.prototype.slice; var args = slicer.call(arguments); console.lo ...

javascriptloggingconsolefirebug

Importing JSON data into JavaScript

For the past few hours, I've been attempting to load a JSON file into JavaScript to feed map coordinates to the Google Maps service. Unfortunately, my script is incomplete and I cannot obtain any results. Here's what I have so far: <script&g ...

javascriptjson

The word "await" is a special reserved keyword used to call functions within an async

Currently utilizing async-await: Whenever the function run invokes findLateastVersion, even though run function is marked as async, an error message pops up stating await is a reserved word. The findLateastVersion method returns a promise and based on va ...

javascriptasync-await

`The font appears extremely thin when viewed on Safari and iOS devices.`

I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...

cssiosmaterial-uinext.jswebfonts

The Material-UI dialog is experiencing a flickering issue when incorporating Redux to manage the open

I am currently facing an issue with moving the open state of a material-ui dialog to redux in order to prevent it from closing during a rerender. However, I am encountering difficulties with the dialog's behavior when a rerender occurs. Even though th ...

javascriptreactjsreduxmaterial-ui

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

Increasing the size of the center image by using CSS elements placed along the circumference

Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link. I have attempted to adjust the circle size but it ends up affectin ...

htmlcss

Creating a custom jQuery selector

I've been struggling with a particular problem all day today, trying different approaches but still unable to find a solution. The crux of the issue is this: I have multiple JavaScript functions running to determine whether certain variables should b ...

javascriptjquery

Reduce the length of the text to 50 characters after the current word, while ensuring that the word

Looking for a way to shorten text after reaching 50 characters, making sure not to split words in the middle when cutting off. For example: Contrary to popular belief, Lorem Ipsum is not simply text (59 chars) Desired output: Contrary to popular belief, ...

javascriptnode.js

Getting the Value from a Promise into a Variable in a React Component

I am currently immersed in a React project where I am utilizing the Axios library to retrieve data from an API and store it in a variable. After scouring the internet, it seems that the only method available is through Promise.then(), but this approach si ...

javascriptreactjs

Problem with loading images on an HTML webpage

After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CSS doesn't seem to affect thi ...

jqueryhtmlcssruby-on-railsruby-on-rails-4

What steps do I need to take to convert a view from a three.js camera and scene to a bcf cameraview?

I am attempting to convert a ifc.js viewer file into a bcf format. The ifc.js viewer utilizes a three.js webglrenderer along with a camera and scene setup. Shown below is an example: https://i.sstatic.net/oTphJ.png https://i.sstatic.net/8Dtag.png I would ...

javascriptthree.jsbcftools

Retrieving data from a JSON file using JavaScript in a Node.js environment

Seeking help to extract a value from a JSON file in JavaScript but struggling to find the right syntax. If someone could assist me with writing this line of code in Node.js, I would greatly appreciate it. The value I am trying to retrieve is "totalCount". ...

javascriptnode.jsjson