Interactive carousel featuring thumbnail navigation and central highlighting of images

I've been struggling with this issue for the majority of the day, so any assistance would be greatly appreciated.

My goal is to find a carousel that includes both next and previous navigation buttons attached to the main image. Additionally, I am looking for thumbnails similar to those featured on this page:

The problem I'm encountering is that when I navigate using the buttons on the right side, it eventually reaches the end of the thumbnails and jumps all the way back to the left, bypassing all previously viewed thumbnails. I'm hoping someone can provide insight on how to make the thumbnails loop infinitely like the main image at the top.

I've done some research on Stack Overflow and came across this link:

Unfortunately, it doesn't address my specific question.

You can find the js file here:

http://friquemag.net/demos/etalage/js/jquery.etalage.min.js

And the css file here:

http://friquemag.net/demos/etalage/css/etalage.css

Any help in resolving this issue would be greatly appreciated.

Thanks in advance,

Cameron

javascriptjqueryhtmlcsscarousel

Answer №2

Give Swiper a try.

For more information, check out the documentation.

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

Utilize a variety of trigger buttons to open a single modal window

I have a large modal and instead of creating new buttons and modal windows, I would like to use multiple buttons that will all trigger the same modal. Here is an example of a modal taken from getbootstrap.com I have attempted to create multiple buttons ...

javascriptjquerycssrubytwitter-bootstrap-3

What is the best method to transfer information between main.js and a specific directory?

Is there a way to efficiently pass data between the main and directory components? I would like to automatically activate the directive when main.js loads. Directive code: angular.module('dmv.shared.components'). directive('doImportPackag ...

javascriptangularjsangularjs-directiveangularjs-scopeelectron

Encountering issues when trying to upload a video to a Facebook page using the Graph

Trying to publish a video to a specific Facebook page using the guidelines provided by Facebook's documentation at this link, but encountering persistent errors. Below is the code snippet: try { let mediaPostParams = new URLSearchParams() ...

javascriptnode.jsfacebookexpressfacebook-graph-api

Launch a new Windows form upon clicking an HTML button using DotNetBrowser

I attempted to open a Windows form using the DotNetBrowser control with specific HTML content as shown in the code below. Upon clicking a button on the HTML page, I want to hide the loaded form and then display the second Windows form. Here is the C# cod ...

javascriptc#dotnetbrowser

Should I consider extracting the shared parts of similar pages into components when styling in React, or is it better to just share style sheets?

My website has two pages - a character page and a staff page, both of which look very similar. However, due to different data structures and minor differences, I am unable to separate the logic with view and reuse it across both pages. This made me conside ...

javascriptreactjstypescript

Event emitting from a parent Vue.js component

I can't figure out why my code is not functioning properly. I have an event called 'leave' that should be triggered on blur. The components show up correctly, but the event doesn't fire when leaving the inputs. Vue.component('te ...

javascripthtmleventsvue.jscomponents

Fundamental modeling using Node.js with Mongoose

Currently, I am facing a challenge with developing a node.js application. My goal is to create a model for a musical scale that includes a name and a set of associated notes: var mongoose = require('mongoose'); var Schema = mongoose.Schema; var ...

javascriptnode.jsmongodbmodeling

Is there a way for my React application to detect changes in an npm package?

I am currently customizing an npm package for my application, but I am facing issues with it not being detected when starting my development server. Previously, I was able to resolve this by removing the library and reinstalling it, followed by replacing t ...

javascriptreactjstypescriptnext.js

Using gulp to compile a Vue component without the need for `require` statements

I'm currently exploring the process of constructing a component with Gulp. Right now, I am working on a Vue component that has the following structure: my-component.vue <template> <div class="foo"> </div> </template> < ...

javascriptgulpvue.js

Guide to Designing a Three-Column Layout Using Only CSS

I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using: <div id="content"> <asp:ContentPlaceHolder ID="Ma ...

htmlcssxhtmlcss-float

How can I use Moment.js to show a custom message based on the current day of the week?

Currently, I am utilizing Moment.js to dynamically showcase various messages based on the day of the week. For instance, if it's: If it's Monday, I want it to display "It's Monday!" If it's Tuesday, I'd like it to show "Happy Tu ...

javascripthtmlcssmomentjs

Checking the correctness of an entered regex pattern and example

My form contains two textboxes - one for entering a regex pattern, and the other for inputting text. I am attempting to validate if the entered regex pattern matches with the input text. Check out my simple code snippet. Here's a demo of it in acti ...

javascriptjqueryregexmatch

Looking for guidance on how to specify the angular direction in the ng-repeat

I am facing a challenge with the structure of my ng-repeat directive and I am having trouble navigating through it. Here is a representation of the data in array format JSON style {"data":[ ["sameer","1001", [ {"button_icon": ...

javascriptangularjsangularjs-ng-repeatangular-ng-if

AngularJS: Changing color property using toggle when a CSS class is modified

After starting to learn AngularJS, I have been able to find many helpful answers on this forum. However, there is one particular issue that has been causing me frustration. My goal is to dynamically change the color property of an element only when it has ...

javascriptjqueryangularjs

What is the best way to ensure my inline-block table extends to 100% width?

I have some code below that I'm working on to achieve a look similar to this image: https://i.sstatic.net/744M7.jpg One thing I'm struggling with is how to extend the table header all the way to the right. Additionally, I need help adding more s ...

htmlcss

Exploring the synergies of Remark and Rehype plugins alongside MDX in Next.js powered by @next/mdx

I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far: (I’m following the instructions from the Next.js Doc ...

javascriptreactjsnext.jsmarkdownmdxjs

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events

React: Struggling to retrieve the current inputbox event value

I have encountered an issue while working on a customized input box in react. Despite my efforts, I am unable to access the current event value. Here is the relevant code snippet: Parent Component:---------------------------------------------------------- ...

javascriptreactjsstyled-components

Top Tips for Generating an A - Z Index with Linq in Asp.net

I am looking to develop an A - Z index that can extract information from a SQL database using linq. I am exploring the best approach to create a user-friendly interface where users can easily navigate through the alphabet to find relevant information. Her ...

c#jqueryasp.netasp.net-mvclinq

Modify the Div background color by accessing the HEX value saved in a JSON file

(I made a change to my code and removed the br tag from info2) Currently, I have successfully implemented a feature using jQuery that reads color names and hex values from a JSON file, populates them in a drop-down select menu (which is working fine). Now ...

javascriptjqueryhtmlcssjson