Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails.

If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code

My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Additionally, I would like the slider to transition and show the next set of 6 thumbnails when someone slides it.

Despite several attempts, I have not been successful in achieving this functionality.

Thank you in advance for your assistance. Your help is greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

Learn how to implement this css

.advancedscroller {
    overflow:hidden;
}

body .advancedscroller .arrowsCon > .arrow-left,
body .advancedscroller .arrowsCon > .arrow-right{
    top:50%;
}

Check out the demonstration here

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

When using Jquery, the search button consistently retrieves the same data upon the initial click event

How can I ensure that my Ajax call retrieves data from the remote database based on the updated search criteria every time I click the search button? Currently, the system retrieves results based on the initial search criteria even after I modify it and cl ...

javascriptajaxspring-mvcjqgrid

Is feature recognition possible in a jQuery plugin?

Can I integrate a tool similar to Modernizr into my plugin? I want to be able to test for specific CSS3 properties without starting from scratch. ...

jquerycss

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

How to Incorporate Routes as Subroutes in Express.js

I am currently working on constructing a modular express.js server with a well-organized structure. I have experimented with using routes similar to components in React. index.js var syncsingle = require('./XYZ/syncsingle'); app.get('/sync ...

javascriptnode.jsexpress

Error: Unable to access 'push' property of null object in Next.js Link

Utilizing Vite to develop a reusable component has led to an error upon publishing and reusing it: TypeError: Cannot read properties of null (reading 'push') The code for the component is as follows: import React from "react"; import ...

javascriptreactjsnext.jsvite

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

Getting dynamic variables in the `getStaticProps` function of NextJS can greatly enhance

I am working on utilizing getStaticProps in order to fetch data based on a variable. Here is a sample code snippet: export async function getStaticProps() { const res = await fetch(localWordpressUrl, { method: 'POST', headers: { 'C ...

javascriptreactjsgraphqlnext.js

Avoiding conflicts between banners, text, and images for HTML/CSS design

I'm having an issue with the banner I created for my project. It seems to be overlapping with text and images, hiding behind them. How can I fix this? Unfortunately, I can't post the link to my project here due to other files present. The specif ...

javascripthtmlcsswebweb-deployment

Designing templates for websites and applications using node.js

Simplified Question: As I delve into improving my skills with node.js, I'm exploring the concept of templating. How would using node to serve one HTML file and loading page-specific information through AJAX/sockets impact performance and design princ ...

javascripthtmlmodel-view-controllernode.js

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so: var getSelectedText = function() { var text = ""; if (typeof window.getSelection !== "un ...

javascriptjquerycssangularjshtml

What is the best way to activate a modal in the parent component when a button is clicked in the child component?

Currently I have the following setup: panelHeader.vue (which is a child component) index.vue (the parent component where my main list view is) panelHeader.vue <template> <v-row> <div class="panelHeader"> ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Having trouble exporting CSV files with Tamil fonts. Are you experiencing an error?

We are exploring various methods to display Tamil content in a CSV file with characters like "தூதுக்கடட". Can anyone provide assistance? mysqli_set_charset($db, "utf8mb4"); $query = $db->query("$reports"); if($query->num_rows > ...

javascriptphpmysqlexcel

What is the process for storing user-provided document names in Firestore database entries?

I'm encountering an issue with my API while trying to utilize Firestore for inputting data for login and registration via the API. The problem arises when attempting to add a document entry in the database with the user's input email during regis ...

javascriptfirebaseapigoogle-cloud-firestore

Access User Information from Facebook using Nativescript {N} oAuth Plugin

Developing an Android App with NativeScript I am in the process of creating an Android app using JavaScript and NativeScript. The initial page asks users to connect with Facebook, and my goal is to verify if an account exists with their email address. To ...

javascriptandroidfacebookoauthnativescript

Guide on how to save the selected checkbox table row value to a database by utilizing JQuery and PHP

I could use some assistance, please. I am attempting to utilize jQuery to insert selected checkbox rows into a database but I am unsure of the process. The jQuery code I have is able to select the row, however, I need guidance on how to verify if the row ...

phpjquery

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg

JavaScript: Append an ellipsis to strings longer than 50 characters

Can the ternary operator be utilized to append '...' if a string surpasses 50 characters? I attempted this approach, however it did not work as expected. {post.title.substring(0, 50) + post.title.length > 50 ? '...&ap ...

javascriptreactjsconditional-operator

Utilizing JQuery for retrieving a filename

I have a unique file upload button on my website. To provide the user with visual feedback about their chosen file, I modify the html of a div to display the file name. My jquery code is as follows: $("input[type=file]").change(function() { var filen ...

javascriptjquery

Encountering the issue "error TS2339: Property 'user' is not available on type 'Object'."

issue TS2339: The property 'user' is not found on the type 'Object'. export class UserAuthentication implements OnInit { user = new BehaviorSubject<Userlogin>(null); constructor( private route: ActivatedRoute, private rou ...

htmlnode.jsangularjsmongodb-query

How can I effectively separate the impact of Next.js onChange from my onClick function?

The buttons in my code are not functioning properly unless I remove the onChange. Adding () to my functions inside onClick causes them to run on every keystroke. How can I resolve this issue? In order to post my question, I need to include some dummy text. ...

javascriptreactjsnext.js