Steps to include an image slider for every react bootsrap card within a Card Deck

Having reviewed the official documentation for react-bootstrap, I have not come across any examples or seen this implemented anywhere.

While I did find examples of how to move card elements in a carousel, it's not exactly what I'm searching for.

What I'm looking to achieve is for each card to display a series of images that can slide like a carousel (and ideally, with carousel navigation controls only visible on hover).

Is there a way to create something similar to this (like the example shown by Airbnb):

https://i.sstatic.net/qM4Dx.jpg

Using the react component - Card Deck

htmlcssreactjsbootstrap-4react-bootstrap

Answer №1

Incorporating a Carousel in HTML

Instead of using plain images, I implemented a carousel code into my HTML to create an interactive slideshow.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="card-deck">
   <div class="card">
      <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
              <div class="carousel-item active">
                  <img class="w-100" src="https://picsum.photos/1920/1080?random=1" alt="image">
              </div>
              <div class="carousel-item">
                  <img class="w-100" src="https://picsum.photos/1920/1080?random=2" alt="image">
              </div>
              <div class="carousel-item">
                  <img class="w-100" src="https://picsum.photos/1920/1080?random=3" alt="image">
              </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-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="#carouselExampleIndicators1" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
      <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
   </div>
... (Additional carousel cards)
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/d...min.js"></script>

For a React Solution

If you are looking for a React-specific approach, you can check out the react-solution through the following link:

https://stackblitz.com/edit/react-3pzcic

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

I am experiencing issues with the social login feature in NextAuth after implementing autoprefixer

Does anyone understand the meaning of this error message and how to debug it? React dev tools don't seem to help as the states vanish when this message appears: Server Error TypeError: Cannot destructure property 'id' of 'undefined&apos ...

reactjsnext.jstailwind-cssautoprefixernext-auth

Retrieve the size of an element without having to wait for the browser to "recalculate style"

I am currently focused on optimizing the performance of some code that heavily relies on graphics. One of the main issues I am encountering is the delay in obtaining the dimensions of a specific div element. Most of the time, this process runs smoothly, bu ...

javascripthtmlcanvashtml5-canvaspixi.js

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

javascriptreactjsdom-events

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

htmlcssdrop-down-menunegative-number

The Perennial Use of Previous State in Render by Function Components

I'm fairly new to incorporating hooks and functional components into my coding practices. Currently, I am encountering an issue with a Filtered List feature. When attempting to update the filtering criteria, it seems to be using the previous filter s ...

reactjsreact-hooks

An issue arises when attempting to execute npm with React JS

I encountered an error after following the setup steps for a react configuration. Can anyone provide assistance? This is the content of the webpack.config.js file: var config = { entry: './main.js', output: { path:'/', ...

javascriptreactjsnpm

Update the object continuously using the useState hook every second

I am constantly generating random numbers every 2 seconds and checking if these numbers exist as keys in my state object called data. If the number is found, I increment the value associated with that key; otherwise, I add it as a new field with a defaul ...

reactjsasynchronoususe-effectuse-state

Adjust the height of the element to prevent the need for a double-scroll

Currently, I have created a webpage for a client that includes a PDF using an iframe tag. The issue arises when the PDF is rather large, resulting in two scrollbars - one for the page and one for the embedded PDF within the iframe (loaded through the integ ...

javascripthtmlcssajax

Every time I try to run `npx create-react-app project`, it always gets jam

After entering the command npx create-react-app projectname, the process seems to have frozen at this stage. I have been waiting for hours for it to continue. https://i.sstatic.net/wUuFi.png Any assistance would be greatly appreciated. ...

reactjscreate-react-app

Vue-powered custom mute/unmute button malfunctions inexplicably when deployed, despite functioning flawlessly during development phase

I'm currently struggling to understand why the mute/unmute button is not functioning as expected. The issue seems to arise when the code is deployed on Netlify, as it works fine on localhost. Essentially, the button mutes and unmutes the video, but th ...

htmlvue.jsnuxt.js

Send a function from a parent to its child component

I could use some assistance with JavaScript as it's not my strong suit. I'm currently trying to implement a solution from this answer on passing a function from a parent to a child in REACT, but I'm encountering some challenges. Would anyon ...

javascriptreactjsparent-child

Conforming to HTML5 standards with ASP.Net DataList

I am currently working on updating my ASP.Net 4.0 website to comply as closely as possible with HTML5 specifications. One issue I have encountered is that whenever I use a DataList, it automatically adds the attribute cellspacing="0". I have tried various ...

asp.nethtml

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...

javascriptjqueryhtmlajax

Tips for dynamically including classes in NextJS component with class names from CMS?

I am in search of a solution that will offer some styling flexibility within a CMS to dynamically alter the classes of specific components within my NextJS application. The code snippet I'm working with is as follows: pages/index.js: ... import clien ...

cssreactjsnext.jstailwind-cssserver-side-rendering

The Remote_Host index is not visible

We have encountered an issue on our suse11 apache2.2 server when trying to retrieve the REMOTE_HOST information, resulting in an error message stating "index not found" shown below: REMOTE_HOST : Notice: Undefined index: REMOTE_HOST in /media/nss/VOL1/htd ...

phphtmlapacheapache2

Error message: Unable to access the state property of an undefined object

I've been attempting to integrate a react sticky header into my stepper component. However, I've encountered an issue where it doesn't render when added inside my App.js file. As a result, I've started debugging the code within App.js ...

javascripthtmlreactjsreduxmaterial-ui

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

Warning: The username index is not defined in the file C:xampphtdocsindex.php at line 4

Hey there, I just wanted to express my gratitude for taking the time to read this. It's all part of a college assignment (web server scripting unit p4) where I am working on setting up a simple login system. Unfortunately, I keep running into an error ...

phphtmlforms

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

javascripthtmlvue.jselement-uielement-plus

What criteria should I consider when selecting a make for the createTheme components?

After reviewing the documentation for the createTheme component, I noticed examples with MuiButtonBase, MuiButton, and MuiSlider. However, when it comes to adding a button, it's simply called Button, not MuiButton. So, does this mean I just need to p ...

javascriptreactjsmaterial-ui