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

Running an Express middleware function

While watching a tutorial on the Express framework, I came across some interesting code used by the instructor for handling requests. Here is how the route is set up: router.route('/').post(authController.restrictTo('admin', 'l ...

javascriptnode.jsexpresscallbackweb-development-server

Including a hyperlink in VUE Bootstrap for seamless user navigation

Why does this always drive me crazy? I'm determined to include an external link () and an image(enter image description here) on my portfolio page within the title of the project. main.js { id: 18, url: 'single-portfolio. ...

javascripthtmltwitter-bootstrapvue.jsfrontend

Issue: Unspecified error when trying to access object attribute in Vue (Nuxt)

I am facing an issue with my 'region' object. It appears to be displayed correctly with all its attributes, but when I try to access specific attributes, it shows up as 'undefined'. const region = { "id": 7, "name": ...

javascriptvue.jsnuxt.js

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

javascriptjqueryhtmlcss

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

Nodemailer fails to send out emails despite the absence of any error messages

I'm currently working on setting up a confirmation email feature for user sign-ups on my website. I've tackled similar tasks in the past, but this time I've hit a roadblock - the emails are not being sent, and there are no error messages to ...

javascriptnode.jsnpmnodemailer

Filtering and selecting tables in HTML

I am dealing with an HTML table that combines static data and MySQL input. The filtering functionality is working properly, but I am struggling to add the options "yes" and "no" to the selection list. These values are test inputs fetched from MySQL. I need ...

javascriptjqueryhtmlmysqlhtml-table

Tips for simulating the $timeout service with sinon?

I am looking to write a unit test for a method within an Angular controller that uses the $timeout service. However, I have been advised not to use inject in this scenario. Therefore, I need to mock $timeout on my own. Can someone guide me on how I can a ...

javascriptangularjsunit-testingsinon

Tips for broadcasting the blob

I am currently working on a radio system project that involves streaming live audio from a microphone to the user in real-time. However, I am new to using node.js and unsure of how to achieve this. Can anyone provide guidance on how to stream the audio fro ...

javascripthtmlnode.js

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

Add the hue value from Hue into the Chromajs HSL state value

My objective is to dynamically change the background color of a div based on user input. I plan to assign the user's input as the value of the state key hue, and then set another state key called color to hold the HSL representation of the hue using C ...

javascriptreactjs

Retrieving the date input from a React form powered by Bootstrap

Is there a way to extract a specific timestamp in the format yyyy-mm-dd from the code snippet below? handleDateChange = e => {} <Form.Group as = {Col}> <Form.Control type = "date" value = { this.state.closingDate } onChange = { ...

javascriptreactjs

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

Encountering problems with parsing a lengthy JSON file

Can you spot the issue here? let stringinsta = JSON.parse({ "access_token":"129261**5ea59a4da481c65", "user":{ "username":"carlos_bellesso", ...

javascriptjqueryjson

Guide on implementing enums (or const) in VueJS

Seeking help on a seemingly simple task, I am trying to understand how to use "enums" in VueJS. In my file named LandingPage.js, I have the following code: const Form = { LOGIN: 0, SIGN_UP: 1, FORGOT_PASSWORD: 2, }; function main() { new Vue({ ...

javascriptvue.js

Executing a Function within UseEffect

I need help calling the function onSaveInputValue within the useEffect to make sure that the value is passed to the childInputValue hook whenever the page loads. const onSaveInputValue = (value) => { setChildInputValue(value); consol ...

javascriptreactjsreact-hooksreact-functional-component

prevent unauthorized changes to input using browser developer tools in Angular

We have a login page for our application with three fields: "user name," "password," and a "login" button. Here's the issue I'm facing: I enter a valid user name. Then, I open the Browser Developer Tools and input the following code: d ...

javascriptangular

Within Codesandbox using Vue, the error message 'The property or method "children" is not defined in the instance, but is referenced during rendering.' appeared

Currently, I am in the process of creating a versatile State Manager that can seamlessly integrate with various Frontend Frameworks, including Vue. In order to showcase how the State Manager can be utilized within Vue, I have set up a simple codesandbox de ...

javascriptvue.jsvuejs2state-managementcodesandbox

Issue with Bootstrap table not identifying rows created with AJAX calls

Just to provide some context: I am currently utilizing Bootstrap-table with Bootstrap version 3.3.6 My objective is to populate a table using AJAX and jQuery, but I'm encountering an issue where none of the bootstrap extensions seem to function proper ...

phpjqueryajaxtwitter-bootstrapbootstrap-table

Adding dashes as padding in HTML/CSS

I am currently working on updating the user management block on my website and I want to showcase it with some visual examples. I believe that using images is the most effective way to demonstrate changes. This is the current appearance of the block: ...

htmlcss