Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving on to the next set, when I actually want to navigate through them individually.

I have found an example that demonstrates exactly what I am aiming for right here: http://www.bootply.com/117282. The only drawback is that I need 5 or 6 visible slides instead of just 4. I have tried for hours to tweak it to meet my requirements, but it seems that my understanding falls short.

My knowledge of jquery/javascript is basic, although I am quite proficient in CSS. Can anyone guide me on how to adjust this to exhibit 5/6 slides simultaneously? Your help would be greatly appreciated.

Thank you, Sharma

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

Answer №1

If you're looking to make changes to this fiddle:

1 : In JavaScript: replace for (var i=0;i<2;i++) { with for (var i=0;i<4;i++) {

2 : In the HTML: switch from using col-lg-3 (which displays 4 items) to col-lg-2 (which displays 6 items)

bootply: http://www.bootply.com/123662

Answer №2

Bootstrap 5 Update

As we enter the year 2022, Bootstrap has undergone significant changes compared to its previous versions, particularly 3 and 4. The provided codes are designed to be easily customizable and adaptable to suit your specific needs while avoiding conflicts with any existing custom CSS you may have.

For demonstrations, visit Codepen here and explore the latest Bootstrap 5 documentation here.

Prerequisites

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

JavaScript

let items = document.querySelectorAll('.carousel .carousel-item')

        items.forEach((el) => {
            const minPerSlide = 4
            let next = el.nextElementSibling
            for (var i=1; i<minPerSlide; i++) {
                if (!next) {
            // Wrap the carousel by starting over from the first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

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

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

htmlcsstwitter-bootstrap

Unauthorized access error in the Sharepoint 2013 system for sharepoint-hosted applications

Currently, I am working on developing a travel application using SharePoint 2013 (sharepoint-hosted app) through Visual Studio and deploying it on Office 365. I have successfully created a custom list on Office 365 and am attempting to access it from jQuer ...

jqueryajaxsharepointsharepoint-2013sharepoint-apps

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

Steps for accessing the `<img>` tag within an `<a>` tag to focus on the `<img>` element in Internet Explorer

How can I target the img tag inside an href tag to set focus on the <img> element? For example: <a href="#"><img class="img1" src="abc.png"/></a> The CSS selector a .img1:focus {} does not seem to work. I am unable to access the ...

cssimagehref

Adapting the column width to display or hide content with CSS styling

I have a row with 2 columns. The left column contains my main content and the right column is a chatroom. I would like users to be able to minimize and open the chatroom, which I already know how to do. However, when the chatroom is open, I want the left ...

javascripthtmlcss

Exploring the best practices for integrating Bootstrap into a Webpack and Angular2 project

I am looking to incorporate Bootstrap into my Angular2 project, including both the CSS and JS files. What is the best way to include these files in the project to ensure webpack functions properly? In the previous version using systemjs, it was included i ...

jqueryangulartypescripttwitter-bootstrap-3webpack

How to utilize jQuery to replace the first occurrence of a specific

Suppose I have an array structured like this: var acronyms = {<br> 'NAS': 'Nunc ac sagittis',<br> 'MTCP': 'Morbi tempor congue porta'<br> }; My goal is to locate the first occurrence ...

javascriptjquery

Combining the power of Kendo UI with the flexibility of Vue

Hey there everyone, I'm currently utilizing the Vue.js CLI for my project. Recently, I came across a helpful tutorial on incorporating a Jquery plugin into a webpack project at this link: . To achieve this, I installed the expose loader and added th ...

javascriptjquerykendo-uiwebpackvue.js

Exploring methods for comparing AJAX and PHP values within an AJAX success function

const salesId = $('#assign_sales_id').val(); $('#'+id).children('td[data-target=sales_id]').text(salesId); I am interested in verifying if the selected name from users matches the ID: id = '$('#assign_sales_id' ...

phpjqueryajax

Obtain the Row ID for Updating without Redirecting

A table in PHP/MySQL has been created with an edit button linked to each row. When the Edit button is clicked, it redirects to the same page but with the ID of the corresponding row item. This helps the PHP script retrieve the ID of the selected item. < ...

phpjqueryhtml

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

javascripthtmlcssstripe-payments

What is the best way to empty the HTML content of a specific id using jQuery?

In my current project, I am working with a combination of Smarty template, PHP, and Ajax. Below is a snippet of code from my Smarty template: <td align="left" id="subject_container" colspan="2" valign="top"> <form> <table cellpaddin ...

phpajaxjquerysmarty

Creating randomized sequences using JavaScript

One of my hobbies involves organizing an online ice hockey game league where teams from different conferences compete. It's important to me that every team gets an equal number of home and away matches throughout the season. To simplify this task, I&a ...

javascriptjqueryarraysjsonunderscore.js

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling to align nested grids in the center

I'm currently following a mobile-first approach in designing my website. The entire website is contained within one main grid, and I also want to include smaller grids that will serve as links to other HTML pages. I created a sample nested grid but am ...

javascripthtmlcss

Passing a table value to a PHP script using JQuery on click event

I am struggling with implementing functionality to filter a dataset based on the link that the user clicks on within a bootstrap modal. The modal contains a morris.js graph and I need to pass the clicked value (e.g. Cluster1 or Cluster2) to a data pull scr ...

javascriptphpjqueryajaxmorris.js

Activate Pop-up for a single instance on BigCommerce

After researching and adding my own code, I am still struggling to get this question answered correctly. Here are the key points I am trying to achieve: 1. Automatically open a popup when the homepage loads. 2. Ensure that the popup is centered on all brow ...

javascriptjqueryhtml

I am unable to activate Wicket's onchange event

I've been trying to automate the population of three dropdown selection elements using a Chrome extension. I'm able to change the value of the first dropdown, but it doesn't trigger the necessary action that populates the second and third dr ...

jqueryhtmlgoogle-chrome-extensionautomationwicket

Assistance required for activating an unidentified function or plugin within a Chrome extension

I am currently working on a project involving a chrome extension designed to automate tasks on a specific website. My main focus right now is trying to trigger the click event of a link that has an event handler set up through an anonymous function as show ...

javascriptjquerygoogle-chrome-extensionanonymous-function

Linking a background image in the body to a specific state in next.js

My aim is to create a pomodoro timer using Next.js and I'm trying to link the body's background image to a state. However, my code isn't functioning properly. This is the code I used to update the body style: import { VscDebugRestart } from ...

javascriptcssreactjsnext.js