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

Is there a way to have the user input data into a Firebase database directly from a Vue.js component?

Any assistance for a beginner like me would be greatly appreciated. I am currently working with vuejs and firebase to write data into the database from a vue component. I have successfully implemented authentication and writing functionality, but now I wan ...

javascriptfirebasefirebase-realtime-databasevue.js

NodeAutoComplete: Enhanced Autocompletion for Node.js

I am attempting to utilize autocompletion of a JavaScript file with Node.js and Tern. However, the documentation for Ternjs is incredibly lacking. const tern = require("tern"); const ternServer = new tern.Server({}); const requestDetails = { "qu ...

javascriptnode.jstern

How to use a self-hosted font in a custom Material-UI theme for ReactJS?

Currently, I am in the process of setting up my initial project utilizing Material-UI for ReactJS. My intention is to personalize the default theme by incorporating a custom font (from the server, not sourced from Google Fonts or anything similar). Despite ...

javascriptreactjsmaterial-ui

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

Error in tabs.onUpdated argument in Firefox WebExtensions

I am currently working on developing a straightforward webExtension for Firefox and I would like to implement tabs.onUpdated with a filter. I found an example on the Mozilla website that I decided to use: const pattern1 = "https://developer.mozilla.org/*" ...

javascriptfirefoxfirefox-addon-webextensions

Easy steps to integrate React JSX using jQuery load function

I am facing a dilemma with loading files in my web app. I have a main file (master) that uses jquery .load() to call another file (loaded). While the javascript in the loaded file works perfectly, the jsx code seems to be getting ignored. Is there a way ...

jqueryajaxreactjs

I am having trouble importing Material UI icons. Can anyone guide me on how to successfully use Material UI icons without any

While working on my project with React and Material UI, I encountered some difficulties when trying to import the material icons. I followed the code examples from the Material UI documentation, using version "material-ui": "^1.0.0-beta.41" and "material-u ...

javascriptreactjsmaterial-ui

Tips for Enhancing the Appearance of a List Input Box

While on my hunt for an auto-completing text field, I stumbled across lists. <label>Bad Habit <input list="badhabits" id="habits" name="habit"/> </label> <datalist id="badhabits"> <option value="alcoholics"> <option ...

htmlcssinputdrop-down-menutextbox

Ways to update a component when the state changes

When attempting to access components that require authentication, I want to redirect to the login page if the user is not logged in. However, I am facing an issue with initializing the firebase auth object, as there is a small delay. The documentation sugg ...

javascriptreactjs

node-gallery reports: "No albums were discovered"

I am exploring the use of node-gallery in my Node js/Express/Jade project. After following the guidelines provided at https://github.com/cianclarke/node-gallery, I encountered an issue when attempting to access the page localhost:3000/gallery: {"message" ...

javascriptnode.jsexpresspug

Transforming a jQuery menu into an active selection with Vue JS

I am looking to transition away from using jQuery and instead utilize Vue for the front end of a menu. Specifically, I need to add an active class and a 'menu-open' state to the appropriate nested list items, similar to what is achieved in the pr ...

javascriptjqueryvue.js

Why is jQuery ajax not functioning in the view file in a node.js environment?

I have recently started working with Express Node.js and I am facing an issue with making an AJAX call or using jQuery from the HBS view. Below are my controller methods: router.get('/', function(req, res) { console.log("home get request"); ...

javascriptnode.jsexpress

Tips for adding a console.log statement to material-ui components to confirm the object/array/value

An issue arises in my React JS code snippet execution that I need help with: <TableBody> { (data.length > 0) ? ( data.map((x, i) => row( x, i, formColumns, handleRemove, handleSelect, editIdx ))) : (<TableRo ...

javascriptreactjsmaterial-ui

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?

I am curious about the role of the context parameter in the createEmbeddedView() method within Angular. The official Angular documentation does not provide clear information on this aspect. For instance, I came across a piece of code where the developer i ...

javascriptangulartypescript

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

Attempting to insert the large amount of data into the "Textarea1" control, I have tried two different methods. The first method successfully inserts the data but occasionally throws a timeout error, while the second method results in a JavaScript error. A ...

javascriptc#seleniumselenium-webdriver

Ensure that you decode the URL before making any changes to the location in a

Hi everyone, I'm facing an issue and need your help. Let's say we have a URL like site.com/post?comments=1,2,3,4. When I paste it into the browser address bar, my app opens and decodes the URL to site.com/post?comments=1%2C2%2C3%2C4. How can I re ...

javascriptreactjsreact-router

Issues with logging functionality in my React Native application

I am currently facing an issue with my React Native app running on the Android Studio emulator. The logging does not appear in my terminal or in the active remote debugger in Chrome when debugging is enabled. When I attempt to log a simple text in one of m ...

javascriptandroidreactjsreact-nativenpm

Selenium Webdriver failing to select menuitem using text, xpath, or ID

Currently, I have some HTML code embedded in a SharePoint page that appears as follows: <span style="display:none"> <menu type='ServerMenu' id="zz28_RptControls" largeIconMode="true"> <ie:menuitem id="zz29_AddColumn" type="optio ...

javascriptseleniumxpath

Leverage the Power of JSON Data Manipulation in WordPress with Angular JS and the WordPress JSON

After testing code in this particular post and making some adjustments, I encountered an issue with obtaining a JSON object from the API of my blog created using the WordPress JSON plugin. URL of API from BLOG (NOT FUNCTIONING): URL from W3C example (WO ...

javascriptjsonangularjsapi

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Recently, I started using TypeScript for the first time and I'm looking to integrate it into my webpack build. Currently, I am working with ts-loader and babel-loader to load TypeScript files while also attempting to include HTML files within the scr ...

htmltypescript