Bootstrap Product Carousel
How do I make an bootstrap product carousel?
What is a bootstrap product carousel? How do you make a bootstrap product carousel? This script and codes were developed by Jay Holtslander on 18 October 2022, Tuesday.
Bootstrap Product Carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Product Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active" data-thumb="0"> <img src="http://placehold.it/1024x585/e8117f/fff&text=Product+Main"> </div> <div class="item" data-thumb="0"> <img src="http://placehold.it/1024x585/00ffff/000&text=Product+Image+2"> </div> <div class="item" data-thumb="0"> <img src="http://placehold.it/1024x585/ff00ff/fff&text=Product+Image+3"> </div> <div class="item" data-thumb="0"> <img src="http://placehold.it/1024x585/ffff00/000&text=Product+Image+4"> </div> <div class="item" data-thumb="1"> <img src="http://placehold.it/1024x585/7B1C8E/fff&text=Product+Image+5"> </div> <div class="item" data-thumb="1"> <img src="http://placehold.it/1024x585/9EF383/000&text=Product+Image+6"> </div> <div class="item" data-thumb="1"> <img src="http://placehold.it/1024x585/D64908/fff&text=Product+Image+7"> </div> <div class="item" data-thumb="1"> <img src="http://placehold.it/1024x585/E3A3A1/000&text=Product+Image+8"> </div> </div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/350x250/e8117f/fff&text=Product+Main"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+2"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+3"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+4"></div> </div><!-- /item --> <div class="item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/350x250/7B1C8E/fff&text=Product+Image+5"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/350x250/9EF383/000&text=Product+Image+6"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/350x250/D64908/fff&text=Product+Image+7"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/350x250/E3A3A1/000&text=Product+Image+8"></div> </div><!-- /item --> </div><!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bootstrap Product Carousel - Script Codes CSS Codes
/* CSS used here will be applied after bootstrap.css */
#carousel { margin-top: 0px;
}
.item .thumb { width: 25%; cursor: pointer; float: left;
}
.item .thumb img, .item img { width: 100%;
}
Bootstrap Product Carousel - Script Codes JS Codes
(function($){ $('#thumbcarousel').carousel(0); var $thumbItems = $('#thumbcarousel .item'); $('#carousel').on('slide.bs.carousel', function (event) { var $slide = $(event.relatedTarget); var thumbIndex = $slide.data('thumb'); var curThumbIndex = $thumbItems.index($thumbItems.filter('.active').get(0)); if (curThumbIndex>thumbIndex) { $('#thumbcarousel').one('slid.bs.carousel', function (event) { $('#thumbcarousel').carousel(thumbIndex); }); if (curThumbIndex === ($thumbItems.length-1)) { $('#thumbcarousel').carousel('next'); } else { $('#thumbcarousel').carousel(numThumbItems-1); } } else { $('#thumbcarousel').carousel(thumbIndex); } });
})(jQuery);
Developer | Jay Holtslander |
Username | j_holtslander |
Uploaded | October 18, 2022 |
Rating | 3 |
Size | 2,456 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Bootstrap 3 Calendar | 2,032 Kb |
Texture-filled Text in Webkit | 2,740 Kb |
Fancy Fixed Bootstrap Navbar | 3,600 Kb |
Bootstrap 3 bio thumbs with social overlay on hover | 3,549 Kb |
Bootstrap 4 Alpha - Pen Template | 2,450 Kb |
Scrollable Fullscreen Splash Screen | 3,288 Kb |
Bootstrap 3 Navbar behavior mod | 2,724 Kb |
Bootstrap 3 full height carousel | 2,433 Kb |
Cascading dropdowns on hover | 3,527 Kb |
Bootstrap List | 4,056 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Eunice A | Ejbronze | 2,203 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Mario | Takaneichinose | 3,902 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!