I want to create a product slider

[Waqar_Butt]

I want to create a responsive product slider with the controls, below is an example for a better understanding:

[DarthGuido]

And?

[SamA74]

You tagged the topic with “Bootstrap”. I believe there are sliders (carousels) available for Bootstrap if you search.

[Waqar_Butt]

But haven’t found it on bootstrap 5.2.

[PaulOB]

Your image above just looks like some bootstrap ‘cards’. I don’t see a slider or any controls as such?

Are you wanting to slide those blocks across the screen?

If so you could probably code that into the standard bootstrap carousel. here’s a quick 2 minute cut and paste that I just did.

Of course you’ll need to style the cards as you think fit and bear in mind that if the cards are different height then the page content will jump up and down.

[rpg_digital]

I get a bit rusty with this stuff, so just to confirm @PaulOB ?

.card-wrap .card {
  flex: 1 0 0; /* equal column widths? */
}
.card-wrap .card-body {
  display: flex;
  flex-direction: column;
}
.card-wrap .card-body .btn {
  margin-top: auto; /* take up available space? */
}

ps. I did rename and re-order where .btn was.

[PaulOB]

@rpg_digital

.card-wrap .card {
  flex: 1 0 0; /* equal column widths? */
}

Yes they each take up as much extra room as available (assuming the content is fluid enough).

@rpg_digital

.card-wrap .card-body {
  display: flex;
  flex-direction: column;
}
.card-wrap .card-body .btn {
  margin-top: auto; /* take up available space? */
}

The display:flex and flex-direction-column force this item which is a nested flexbox to take on the full height of the parent. With that in place we can add margin-top:auto to the button which pushes it down to the bottom of that element so that they all line up at the bottom. Without the display:flex and column rules the margin-top:auto would have no effect as card-body is only as tall as its content otherwise.