"Carousel Product Cart Slider"
Bootstrap 3.1.0 Snippet by BhaumikPatel

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right hidden-xs"> <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example" data-slide="next"></a> </div> </div> </div> <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product Example</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Next Sample Product</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Grouped Product</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right hidden-xs"> <a class="left fa fa-chevron-left btn btn-primary" href="#carousel-example-generic" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-primary" href="#carousel-example-generic" data-slide="next"></a> </div> </div> </div> <div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Sample Product</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product Example</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Next Sample Product</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Grouped Product</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); .col-item { border: 1px solid #E1E1E1; border-radius: 5px; background: #FFF; } .col-item .photo img { margin: 0 auto; width: 100%; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px; margin-top: 1px; } .col-item:hover .info { background-color: #F5F5DC; } .col-item .price { /*width: 50%;*/ float: left; margin-top: 5px; } .col-item .price h5 { line-height: 20px; margin: 0; } .price-text-color { color: #219FD1; } .col-item .info .rating { color: #777; } .col-item .rating { /*width: 50%;*/ float: left; font-size: 17px; text-align: right; line-height: 52px; margin-bottom: 10px; height: 52px; } .col-item .separator { border-top: 1px solid #E1E1E1; } .clear-left { clear: left; } .col-item .separator p { line-height: 20px; margin-bottom: 0; margin-top: 10px; text-align: center; } .col-item .separator p i { margin-right: 5px; } .col-item .btn-add { width: 50%; float: left; } .col-item .btn-add { border-right: 1px solid #E1E1E1; } .col-item .btn-details { width: 50%; float: left; padding-left: 10px; } .controls { margin-top: 20px; } [data-slide="prev"] { margin-right: 10px; }

Related: See More

Material Dashboard React
Bootstrap 4 and CCS3 Product Cards with Transition
Client or Partners Logo Slider
Bootstrap 4 Carousel

Questions / Comments:

it's not working on phone screens...can anyone help?

Ashiesh () - 9 years ago - Reply 1

how can i get it to slide one item at a time?

Ochepo Jeremiah () - 7 years ago - Reply -1

I think you could try something like this: https://bootsnipp.com/snipp...

maxsurguy () - 7 years ago - Reply 0

Thanks you!

Ochepo Jeremiah () - 7 years ago - Reply 0

It's not working on code pen io. why?

dhouglasoaktree () - 7 years ago - Reply -1

Bro thnx a lot it worked searched for this since last 30 mins and all other have some or the other missing

MayankDev-11 () - 3 years ago - Reply 0

Thanks !! awesome

Michael Jay Santome () - 7 years ago - Reply 0

Awesome work!! I used your design with owl carousel and the results were amazing (100% Responsive). Thank you!

eddyM () - 8 years ago - Reply 0

Anyone was able to make this carousel dynamic & responsive?

wael101 () - 8 years ago - Reply 0

Anyone was able to make this carousel dynamic & responsive?

wael101 () - 8 years ago - Reply 0

helllo freinds i wanna to make it dynamic in php any idea,when i making activ item dynamic it,s break the row after 4

Attaullah Khan () - 8 years ago - Reply 0

thx

Genr8 () - 9 years ago - Reply 0

well done, great work :)

Lee () - 9 years ago - Reply 0

Very cool!!
Im trying to make this dynamic with AngularJS. I am using angular-ui bootsrap and bootstrap css frameworks. Apparently, angular-ui bootstrap also has carousel feature, but I solved the conflict via ngNonBindable. However, angular is an SPA which treats hashbangs in a different way. So the sliding thing is not happening via #carousel-example where you had it in the prev and next buttons. Trying to solve for that. Let me know if you have any thoughts around that.

Allampalli Sandeep () - 9 years ago - Reply 0

Hi, were you able to make this carousel dynamic & responsive?

wael101 () - 8 years ago - Reply 0

Not working in responsive,

ajay mohan () - 9 years ago - Reply 0

Hey any body can you help me
how can stop auto scroll only 1 slider because i am using 3 slider in 1page (3 category slider)

jabbar () - 9 years ago - Reply 0

just change to carousal ids

amir () - 7 years ago - Reply 0

just change carousal ids for each product carousal slider

amir Ali () - 7 years ago - Reply 0

it work will.so,good luck

amir Ali () - 7 years ago - Reply 0

How to slow speed?

Manish () - 9 years ago - Reply 0

hello, went i copy to 2 time , this next button cant use, can some one tell me how to soldved

big () - 9 years ago - Reply 0

Hello there, when you change the carousel "ID" to something different, it will work perfectly fine.

Ochepo Jeremiah () - 7 years ago - Reply 0

hello, went i copy to 2, this next button cant use, can some one tell me how to soldved

big () - 9 years ago - Reply 0

Did anyone ever happen to figure out how to change the speed of the slider?

Joe Miller () - 9 years ago - Reply 0

yes, just add data-interval="10000" after data-ride="carousel" and change the 10,000 number to your own (milliseconds), that should do it.

maxsurguy () - 9 years ago - Reply 0

@maxsurguy:disqus thanks for your willingness to always help. I have really learnt alot from your shared knowledge. Thank you boss!

Ochepo Jeremiah () - 7 years ago - Reply 0

How can I change speed on slider? Thanks

Marko Krstic () - 9 years ago - Reply 0

please find some solution to make this awesome thing working on iphone...

Guest () - 10 years ago - Reply 0

Thanks for sharing! :)

Alex () - 10 years ago - Reply 0

#carousel-example {height:350px; overflow:hidden;} This works on iphone guys

MT () - 10 years ago - Reply 0

its not working MT.

Kaushal Panchal () - 10 years ago - Reply 0

it doesn't

mustapa Oumarov () - 8 years ago - Reply 0

Thanks! Great job!

H.T () - 10 years ago - Reply 0

I need some help regarding this snippet.How to make the items slide back and forth on click of buttons prev and next.

Swarnim () - 10 years ago - Reply 0

so instead of arrows you want to use buttons with text?

maxsurguy () - 10 years ago - Reply 0

Does this plugin not require javascript? I have copied the same code but it is not working

Mahesh () - 10 years ago - Reply 0

Do you have Bootstrap javascript included in your HTML ?

maxsurguy () - 10 years ago - Reply 0

How do I include it?

HTO () - 7 years ago - Reply 0

Hey, guys! To make this app works on phone screens, you'll have to delete the "hidden-xs" classes.

Jason Ming () - 10 years ago - Reply 0

How do you remove these "hidden-xs" classes, can't find them

mustapa Oumarov () - 8 years ago - Reply 0

working but having some design bugs...
thanks jason...

Kaushal Panchal () - 10 years ago - Reply 0

please you know how I can make this to slide one item at a time?

Ochepo Jeremiah () - 7 years ago - Reply 0

Not Working Jason. When we remove the hidden-xs class the the carousel is working and is responsive but It directly shows the 5th block after the 1st one.

Dipender Singh () - 10 years ago - Reply 0

I agree would be great if this scaled down. But you get to a certain breakpoint and the whole lot disappears.

Dave M () - 10 years ago - Reply 0

I would like to work with this but it doesn't work at phone screen sizes.

David Buchmueller () - 10 years ago - Reply 0

Awesome!

Thanks for sharing!!!!!

-Kraymer

Timmy () - 10 years ago - Reply 0

Great stuff u have. thanks for sharing :)

Alfred Yeap () - 10 years ago - Reply 0