Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below:

<div class="second-para">
        <div class="container">
            <div class="second-section">
                <div class="container mt-2">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 section-two-title">
                            <h1 class="text-center m-0 py-2">
                                Newest
                            </h1>
                            <h1 class="text-center m-0 py-2">
                                Courses
                            </h1>
                        </div>
                        <div class="col-md-3 col-sm-6 item">
                            <div class="card item-card card-block card-section">
                                <img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
                                <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
                                <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 item">
                            <div class="card item-card card-block card-section">
                                <img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
                                <h5 class="card-title  mt-3 mb-3">ProVyuh</h5>
                                <p class="card-text">This is a company that builds websites, web .</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 item">
                            <div class="card item-card card-block card-section">
                                <img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
                                <h5 class="card-title  mt-3 mb-3">ProVyuh</h5>
                                <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

The current layout can be viewed here: https://i.stack.imgur.com/8P7hv.png

However, the requirement is to include two icons on either side of the cards for browsing more courses, resulting in a dynamic content slider.

Assistance would be appreciated in achieving this functionality...

Below is the CSS section associated with the design:

        .second-para{
            height:500px;
            background-color: #ffcc32 !important;
        }

        .second-section, .third-section, .fourth-section{
            padding-top:100px;
        }
        
        .card-section {
            border-radius: 2%;
        }

        .second-section img, .third-section img, .fourth-section img {
            height:150px;
            width:100%;
        }

        /*More CSS styles follow...*/
javascriptcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To implement a carousel with multiple cards displayed at once, you can utilize Bootstrap's Carousel

However, in order to showcase several cards simultaneously, custom code is required. Check out this useful resource for more information: Bootstrap carousel multiple frames at once

For another practical example, take a look at this CodePly demo here: 

/* A sample code snippet from Stack Overflow */
let items = document.querySelectorAll('.carousel .carousel-item')

window.addEventListener('resize', initCarousel);
initCarousel();

function initCarousel() {
  items.forEach((el) => {
    // Determine the number of slides per carousel-item
    const minPerSlide = getMinSlides();
    let next = el.nextElementSibling;
    for (var i = 1; i < minPerSlide; i++) {
      if (!next) {
        // Wrap the carousel by using the first child
        next = items[0];
      }
      let cloneChild = next.cloneNode(true);
      el.appendChild(cloneChild.children[0]);
      next = next.nextElementSibling;
    }
  })
}

function getMinSlides() {
  const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  if (width < 576) return 1;
  if (width < 768) return 2;
  
  return 4;
}
.second-para {
  height: 500px;
  background-color: #ffcc32 !important;
}

/* Additional CSS styles for the carousel and cards */

...

/* More Carousel code */

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

...


<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299869984">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c7768776a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Your HTML markup for the carousel component and card elements -->

...

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 it acceptable to use JavaScript files in the pages directory in NEXTJS13, or is it strongly advised to only use TypeScript files in the most recent version?

In the previous iterations of nextJS, there were JavaScript files in the app directory; however, in the most recent version, TypeScript files have taken their place. Is it still possible to begin development using JavaScript? I am working on creating an a ...

javascriptreactjstypescriptnext.jsweb-development-server

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

Transferring shapes from a two-dimensional equirectangular view to surfaces in A-Frame

Currently, my goal is to create a hotspot editor for 360-degree images using A-Frame. The concept behind this project involves allowing users to draw on an equirectangular panorama and then having the tool convert those drawings into planes using THREE.Sh ...

javascriptthree.jsaframe

Unable to reduce the height of the li element

Even though I've attempted to adjust the height of the lis in this section using CSS, I can't seem to shorten them as desired: I've experimented with setting a line-height, adjusting the height, ensuring that paddings and margins are set to ...

css

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

csssvg

set up the router by defining the behavior for each route

My goal is to redirect the user back to the homepage when they click the browser's back arrow to return to the previous page. However, I'm facing an issue where I cannot go back to the previous page when I'm on the login page using the brow ...

javascriptfirebasevue.jsfirebase-authenticationvuex

Step-by-step guide on aligning an image to the left of text in a Material UI table column

After experimenting with inline styling, I attempted to move the images next to the text in a specific column. However, there are some rows where the images overlap or the text is positioned too far to the right, as shown in this image: https://i.stack.im ...

cssreactjshtml-tablematerial-ui

Utilizing every function across various offspring

Is it possible to use the each function on multiple children at once? The code below shows my attempt to use the each function on both child elements in a single line. $('.right .submission:not(:first)').each(function(){ stud ...

javascriptjquery

Tips for dividing HTML code on a page into individual nodes

I am looking to extract the HTML content from a website and then parse it into nodes. I attempted the following code: function load() { $(document).ready(function () { $.get("https://example.com/index.html", function (data) { const loadpage ...

javascripthtmlnodes

jquery activating the toggle function to switch between child elements

I'm facing a challenge where I can't use .children() in this scenario, as it won't work since the elements aren't technically children. Here's the snippet of HTML that I'm working with: <p class="l1">A</p> ...

javascriptjqueryhtml

What is the best way to customize the border color of a disabled Material UI TextField?

I'm struggling to override the default style for disabled Mui TextField components, particularly in changing the border color. Although I successfully altered the label color for disabled fields, I can't seem to get the border color to change. T ...

javascriptreactjsmaterial-ui

Crafting 3 intertwined combinations using the power of jQuery AJAX and PHP

Here's what I've been working on so far: The first page retrieves data and populates the first combobox, which is all good. Then, when users select a value from combo1, a second combobox is created with filtered data using AJAX - also working fin ...

javascriptphpjqueryajaxcombobox

Generating React components dynamically can bring flexibility and efficiency to the

Looking for a solution to dynamically render different components based on the arguments passed with data. While using regular or React.createElement(Item) works fine, all other options seem to fail. http://jsfiddle.net/zeen/fmhhtk5o/1/ var React = windo ...

javascriptreactjs

Display a text field when the onclick event is triggered within a for

Control Panel for($i = 1; $i <= $quantity; $i++){ $data .= '<b style="margin-left:10px;">User ' . $i . '</b>'; $data .= '<div class="form-group" style="padding-top:10px;">'; $data .= ' ...

javascriptphphtml

Troubleshooting Problems with Promises in Node.js Express

I am currently developing a Node.JS/Express application with Jade as the template engine, but I am encountering some unexpected behavior. The issue arises when trying to retrieve data from a mock API and pass it to my Jade template. Despite confirming tha ...

javascriptnode.jsexpress

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Looking for help with extracting user input from HTML and performing mathematical operations in JavaScript. Coming from a Python background, the variable system in JavaScript is confusing to me. Can someone provide guidance on how to achieve this? <div ...

javascripthtmlcssvariablestype-conversion

Arranging HTML elements using JavaScript or jQuery

Something seems off. The sorting doesn't work as expected. Check out the JavaScript code below: function sortDescending(a, b) { var date1 = $(a).data('date'); var date2 = $(b).data('date'); return date1 > date2; } ...

javascriptjqueryhtmlsorting

Nextjs: where all roads lead back to the homepage

Having an issue in my app where all redirects keep leading back to the homepage. The problem seems to stem from my Navbar.js component, as shown below. Despite adding the required route in the Link tag for next-js, both client and server compilation is suc ...

javascriptreactjsnext.jsroutes

Is there a way to efficiently include numerous jQuery scripts in a batch process, each with a slight variation, using a loop?

Currently, I have a script that calculates the blur effect for multiple images based on the mouse position and scroll position. However, I am looking for a more efficient way to apply this to around 100 images without duplicating the script each time. var ...

javascriptjqueryloops

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

I have been working on a project that involves fetching book details from the Google Books API and using generative AI to create descriptions for them. I have successfully created an Excel file, but I am facing an issue with saving data inside it. It' ...

htmlcssflaskgoogle-books-apidata-handling