Enhance Your Website with Bootstrap 5 Slider/Carousel for Product Showcase

I am attempting to create a slider/carousel of products similar to the image shown below using Bootstrap 5:

https://i.sstatic.net/7FhPw.png

Here is the current code I have:

<style>
<!-- Temporary -->
.carousel-control-next-icon {
    background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7dbc7da">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f4e8f5">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Home Section End -->
<div class="container-fluid mt-3">
    <div class="row g-4">
      <div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none"> 
      <div class="home-section bg-white div-content" style="height:236px;">
        <!-- With Captions -->
        <div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item">
                    <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
                </div>
                <div class="carousel-item active">
                    <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
                </div>
                <div class="carousel-item">
                    <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
      </div>
      </div>
      <div class="col-xl-6 ratio_65 d-xl-block d-none">
          <div class="home-section bg-white div-content" style="height:236px;">
            <!-- With Captions -->
            <div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item">
                        <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
                    </div>
                    <div class="carousel-item active">
                        <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
                    </div>
                    <div class="carousel-item">
                        <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaption2" role="button" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
          </div>
      </div>
      </div>
    </div>
  </div>
<!-- Home Section End -->

However, the current output does not look good: https://i.sstatic.net/VPshK.png

Only one item is being displayed, but I need to display three items and half. Additionally, I want to add the price and product title below the photo, and ensure that the images are responsive. Can anyone provide some guidance on how to correct this code?

javascripthtmljquerycssbootstrap-5

Answer №1

To discover more about this topic, you can visit this Codepen and also check out this Codeply example.

If you combine the two resources, you'll get a functional demonstration available on Codepen.

The JavaScript code duplicates the content of each .carousel-item, ensuring that each item holds the content of its 5 siblings. The CSS updates the transform property to move the slider accordingly.

This setup is responsive, displaying only one item before reaching the smallest breakpoint. You can easily tweak this behavior using CSS alone.

Below is a snippet showcasing the implementation, make sure to view it in fullscreen mode by clicking the "Full page" link:

Note: To avoid using excessive !important declarations in the CSS, ensure that you load your stylesheets after Bootstrap's, as demonstrated in the provided Codepen.

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

items.forEach((el) => {
  const minPerSlide = 5
  let next = el.nextElementSibling
  for (var i = 1; i < minPerSlide; i++) {
    if (!next) {
      // wrap carousel by using first child
      next = items[0]
    }
    let cloneChild = next.cloneNode(true)
    el.appendChild(cloneChild.children[0])
    next = next.nextElementSibling
  }
})
.carousel-item .col {
  padding: 0 5px;
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item>div {
    display: none !important;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block !important;
  }

<!-- Rest of the CSS code omitted for brevity -->

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a170a14094548544c4518">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d667b667865292438202979">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<!-- HTML structure and layout not shown to maintain focus on key details -->

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 consistently display a scroll bar at the bottom?

How can I ensure that the scroll bar is always at the bottom when loading pages? I need an immediate solution. The JavaScript code seems to be malfunctioning. Please assist me in resolving this issue. #student_name{ height:315px; } <div id ...

javascriptjquery

What could be the reason my JavaScript alert is not functioning properly?

Having some trouble with my form validation using Bootstrap - the alerts aren't showing up when I submit the form. Not all of the alerts have been added yet. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

javascripthtmltwitter-bootstrap

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

htmlcssfirefox

Different approach to iterating through elements

Looking to implement .forEach instead of a traditional for loop? 'use strict'; var score = (function(){ function updateScore() { for(var i = 0; i < arguments.length; i++) { this.score += arguments[i]; ...

javascriptarraysnode.jsoop

Using JavaScript to submit the value of a checkbox

I'm currently working on a form submission using JavaScript that includes both text input and two checkboxes. <script> function SubmitFormData() { var preferredLocation = $("#preferred_location").val(); var relocation = []; ...

javascriptphpjqueryajax

Dygraphs: Utilizing two y-axes in a single series

I'm interested in plotting a single series with two synchronized y-axes that display different units, such as °F and °C temperatures. I want the data to be readable from both axes, but only one set of points should be plotted. Here are some approac ...

javascriptdygraphs

Preventing the need to reset JavaScript text inputs

I'm encountering a strange issue in my code. I'm developing a graphing calculator that requires users to enter multiple expressions for evaluation. I have a text input and a button that adds a new input to the parent div whenever it is clicked: d ...

javascripthtmlinputonclickinnerhtml

What are some ways to verify if the array is absent within a <tr> element in Vue.js?

When my back-end service returns a JSON array with values, everything works fine. But when it doesn't have any values, I encounter an error in my front-end: "[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined" ...

javascriptvue.jsvuetify.js

Do not directly change a prop - VueJS Datatable

Just starting out on Vue JS and encountered an issue while trying to create a Data Table by passing parent props to child components. An Error Occurred: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

javascriptvue.jsvuejs2

Change the behavior of an onclick event on the second click

I'm trying to make a button on my website that not only plays music when clicked but also changes the text inside the button to "Go to SoundCloud" and redirects to SoundCloud. Currently, I have been able to achieve both functions separately - redirect ...

javascriptjquery

Implementing a Bootstrap 4 modal in Webpack 2

Utilizing only the bootstrap modal functionality, I manually included the required libs (modal.js & util.js) in the vendor section of webpack.config.js If I directly add the vendor.js file, everything works fine. However, since it is bundled, I prefer ...

javascriptnode.jsbootstrap-modalwebpack-2bootstrap-4

Footer that sticks to the bottom of the page across various pages

Having trouble printing a 2-page document on Chrome. The first page has fixed content while the second page has dynamic content in an extended table. The problem I'm facing is keeping the footer at the bottom of the second page. The CSS code below wo ...

htmlcsstwitter-bootstrapgoogle-chrome

Execute JavaScript function after completion of CSS animation using jQuery

I'm working on an accordion feature that uses CSS animation to expand the clicked item. The expansion is triggered by li:target. However, I'm facing an issue where when clicking on an item, the scroll position doesn't align correctly with t ...

javascriptjquerycss-transitions

What is the best way to duplicate this content from a picture using CSS?

Trying to replicate text in an image using HTML and CSS. Wondering if there's a better way than setting each line with its own font size. Here's the image I'm working on: https://i.sstatic.net/bMPhy.png Current issues with the approach: ...

htmlcssbootstrap-4

Show various error messages depending on the type of error detected

When pulling data from an API, my goal is to handle errors appropriately by displaying custom error messages based on the type of error that occurs. If the response is not okay, I want to throw an error and show its message. However, if there is a network ...

javascript

Tips for enabling the `ignoreUndefinedProperties` feature in Node.js

I'm currently in the process of creating a REST api for my Node.js and Express application. However, I keep encountering an error stating that properties are undefined whenever I attempt to send a request. How can I go about enabling 'ignoreundef ...

javascriptnode.jsexpressgoogle-cloud-firestore

Issues with AngularJS have arisen, as it is currently unable to recognize and access variables as needed

As a newcomer to web design and Angular, I am trying to replicate this example, where I consume a RESTful web service and use AngularJS to display the JSON data. However, I'm facing issues with my implementation. Here's how my main.jsp file look ...

javascriptangularjs

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascriptjquerycss

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

I am struggling with the code below which is supposed to validate the SubmitForm when the button is clicked. It successfully changes the textboxes to red and displays an error message with a symbol if validation fails. However, I am wondering how I can sho ...

jqueryhtmlcssjquery-validate

What is the best way to include two additional columns next to the sidebar?

I'm having trouble adding another two-column section next to the sidebar. Is there anyone who can help me out? <!-- -------------Navigation Bar------------- --> <div class="sidebar"> <a class="active" href="#home">Home</a ...

htmlcss