Change the Slide Behavior on Bootstrap Carousels
How do I make an change the slide behavior on bootstrap carousels?
Take a Bootstrap carousel displaying multiple items per page, and make it slide only one item at a time instead of a full page. . What is a change the slide behavior on bootstrap carousels? How do you make a change the slide behavior on bootstrap carousels? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.
Change the Slide Behavior on Bootstrap Carousels Previews
Change the Slide Behavior on Bootstrap Carousels - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Change the Slide Behavior on Bootstrap Carousels</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>Standard Rotation</h2> <div id="full" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <ul class="row item active"> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=1" srcset="http://placehold.it/200/6dc066/ffffff&text=1 1x, http://placehold.it/400/6dc066/ffffff&text=1 2x" class="img-responsive"> </li> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=2" srcset="http://placehold.it/200/6dc066/ffffff&text=2 1x, http://placehold.it/400/6dc066/ffffff&text=2 2x" class="img-responsive"> </li> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=3" srcset="http://placehold.it/200/6dc066/ffffff&text=3 1x, http://placehold.it/400/6dc066/ffffff&text=3 2x" class="img-responsive"> </li> </ul> <ul class="row item"> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=4" srcset="http://placehold.it/200/6dc066/ffffff&text=4 1x, http://placehold.it/400/6dc066/ffffff&text=4 2x" class="img-responsive"> </li> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=5" srcset="http://placehold.it/200/6dc066/ffffff&text=5 1x, http://placehold.it/400/6dc066/ffffff&text=5 2x" class="img-responsive"> </li> <li class="col-xs-4"> <img src="http://placehold.it/200/6dc066/ffffff&text=6" srcset="http://placehold.it/200/6dc066/ffffff&text=6 1x, http://placehold.it/400/6dc066/ffffff&text=6 2x" class="img-responsive"> </li> </ul> </div> <a class="carousel-control left" href="#full" data-slide="prev">Previous</a> <a class="carousel-control right" href="#full" data-slide="next">Next</a> </div> <h2>Single Item Rotation</h2> <div id="single" class="carousel slide" data-ride="carousel" data-shift="1"> <div class="carousel-inner"> <ul class="row item active"> <li class="col-xs-4 one"> <img src="http://placehold.it/200/666dc0/ffffff&text=1" srcset="http://placehold.it/200/666dc0/ffffff&text=1 1x, http://placehold.it/400/666dc0/ffffff&text=1 2x" class="img-responsive"> </li> <li class="col-xs-4 two"> <img src="http://placehold.it/200/666dc0/ffffff&text=2" srcset="http://placehold.it/200/666dc0/ffffff&text=2 1x, http://placehold.it/400/666dc0/ffffff&text=2 2x" class="img-responsive"> </li> <li class="col-xs-4 three"> <img src="http://placehold.it/200/666dc0/ffffff&text=3" srcset="http://placehold.it/200/666dc0/ffffff&text=3 1x, http://placehold.it/400/666dc0/ffffff&text=3 2x" class="img-responsive"> </li> </ul> <ul class="row item"> <li class="col-xs-4 four"> <img src="http://placehold.it/200/666dc0/ffffff&text=4" srcset="http://placehold.it/200/666dc0/ffffff&text=4 1x, http://placehold.it/400/666dc0/ffffff&text=4 2x" class="img-responsive"> </li> <li class="col-xs-4 five"> <img src="http://placehold.it/200/666dc0/ffffff&text=5" srcset="http://placehold.it/200/666dc0/ffffff&text=5 1x, http://placehold.it/400/666dc0/ffffff&text=5 2x" class="img-responsive"> </li> <li class="col-xs-4 six"> <img src="http://placehold.it/200/666dc0/ffffff&text=6" srcset="http://placehold.it/200/666dc0/ffffff&text=6 1x, http://placehold.it/400/666dc0/ffffff&text=6 2x" class="img-responsive"> </li> </ul> </div> <a class="carousel-control left" href="#single" data-slide="prev">Previous</a> <a class="carousel-control right" href="#single" data-slide="next">Next</a> </div> <p>The goal here was to change the way the carousel behaves without actually changing the way the markup is initially written.</p> <p>In order to achieve this, I had to use JS to reconstruct the carousel markup into more slides. Then alter the styles to make it move only one item. This is all triggered on page load by a data attribute.</p> <p>The modified styles are calculated and injected with JS as well. Each carousel is assigned a unique class in the JS so styles don't interfere with other carousels on the page. This allows each carousel to operate independently regardless of how many items it displays. So the styles making the 3-wide carousel work aren't going to affect the 4-wide carousel below.</p> <div id="single-quad" class="carousel slide" data-ride="carousel" data-shift="1"> <div class="carousel-inner"> <ul class="row item active"> <li class="col-xs-3 one"> <img src="http://placehold.it/200/c0666d/ffffff&text=1" srcset="http://placehold.it/200/c0666d/ffffff&text=1 1x, http://placehold.it/400/c0666d/ffffff&text=1 2x" class="img-responsive"> </li> <li class="col-xs-3 two"> <img src="http://placehold.it/200/c0666d/ffffff&text=2" srcset="http://placehold.it/200/c0666d/ffffff&text=2 1x, http://placehold.it/400/c0666d/ffffff&text=2 2x" class="img-responsive"> </li> <li class="col-xs-3 three"> <img src="http://placehold.it/200/c0666d/ffffff&text=3" srcset="http://placehold.it/200/c0666d/ffffff&text=3 1x, http://placehold.it/400/c0666d/ffffff&text=3 2x" class="img-responsive"> </li> <li class="col-xs-3 four"> <img src="http://placehold.it/200/c0666d/ffffff&text=4" srcset="http://placehold.it/200/c0666d/ffffff&text=4 1x, http://placehold.it/400/c0666d/ffffff&text=4 2x" class="img-responsive"> </li> </ul> <ul class="row item"> <li class="col-xs-3 five"> <img src="http://placehold.it/200/c0666d/ffffff&text=5" srcset="http://placehold.it/200/c0666d/ffffff&text=5 1x, http://placehold.it/400/c0666d/ffffff&text=5 2x" class="img-responsive"> </li> <li class="col-xs-3 six"> <img src="http://placehold.it/200/c0666d/ffffff&text=6" srcset="http://placehold.it/200/c0666d/ffffff&text=6 1x, http://placehold.it/400/c0666d/ffffff&text=6 2x" class="img-responsive"> </li> <li class="col-xs-3 seven"> <img src="http://placehold.it/200/c0666d/ffffff&text=7" srcset="http://placehold.it/200/c0666d/ffffff&text=7 1x, http://placehold.it/400/c0666d/ffffff&text=7 2x" class="img-responsive"> </li> <li class="col-xs-3 eight"> <img src="http://placehold.it/200/c0666d/ffffff&text=8" srcset="http://placehold.it/200/c0666d/ffffff&text=8 1x, http://placehold.it/400/c0666d/ffffff&text=8 2x" class="img-responsive"> </li> </ul> </div> <a class="carousel-control left" href="#single-quad" data-slide="prev">Previous</a> <a class="carousel-control right" href="#single-quad" data-slide="next">Next</a> </div> <p><b>DISCLAIMER:</b> I don't know that I would recommend using this method for doing this on a regular basis. If you are maintaining your own HTML and you know what you are doing, it would probably be more beneficial to just initially code it to what the JS is changing it to. But I am typically making things that other people are going to be implementing. And the easier it is for them to build and understand, the easier it is for me troubleshoot when things don't work. Not that my things don't work or anything... =)</p>
</div> <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>
Change the Slide Behavior on Bootstrap Carousels - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
*, *:focus, *:active, *:focus:active, *:before, *:before:focus, *:before:active, *:before:focus:active, *:after, *:after:focus, *:after:active, *:after:focus:active { outline: none;
}
body { min-height: 100vh; padding: 2rem;
}
ul { padding: 0;
}
li { list-style: none; padding: 0;
}
h2 { text-align: center;
}
h2:not(:first-child) { margin-top: 45px;
}
p { margin: 20px 0 10px;
}
p + p { margin-top: 0;
}
.container { margin: 0 auto; max-width: 600px;
}
.carousel { margin: 0 30px; width: calc(100% - ($button-spacing * 2));
}
.carousel[data-shift="1"] .carousel-inner > .item { -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
.carousel .carousel-inner > .item.row { margin: 0;
}
.carousel .carousel-control { background: none; color: transparent; overflow: hidden; text-shadow: none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; width: 30px;
}
.carousel .carousel-control:before { color: #444; font-family: 'Glyphicons Halflings'; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 30px;
}
.carousel .carousel-control:after { border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); content: ''; height: 60%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; width: 100%;
}
.carousel .carousel-control:hover:after { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.7);
}
.carousel .carousel-control.left { left: -30px;
}
.carousel .carousel-control.left:before { content: '\e079';
}
.carousel .carousel-control.left:after { right: -100%;
}
.carousel .carousel-control.right { right: -30px;
}
.carousel .carousel-control.right:before { content: '\e080';
}
.carousel .carousel-control.right:after { left: -100%;
}Change the Slide Behavior on Bootstrap Carousels - Script Codes JS Codes
var carousels = $('.carousel');
carousels.each(function() { var $obj = $(this); var $inner = $obj.find('.carousel-inner'); var id = 'uuid' + new Date().getTime(); $obj.addClass(id); if ($obj.data('shift') === 1) { var items = $obj.find('.item > [class*="col-"]'), visibleCnt = $obj.find('.item:first [class*="col-"]').length, wrapper = ""; // build styles var rule_base = '.carousel.' + id + ' .carousel-inner > .item', styles = $('<style></style>'), rules = []; rules[0] = rule_base + '.next {left: ' + (100 / visibleCnt) + '%; transform: none;}'; rules[1] = rule_base + '.active {left: 0;}'; rules[2] = rule_base + '.active.left {left: -' + (100 / visibleCnt) + '%; transform: none;}'; rules[3] = rule_base + '.next.left {left: 0;}'; rules[4] = rule_base + '.active.right {left: ' + (100 / visibleCnt) + '%; transform: none;}'; rules[5] = rule_base + '.prev.right {left: 0;}'; rules[6] = rule_base + '.prev {left: -' + (100 / visibleCnt) + '%; transform: none;}'; for (var i = 0; i < rules.length; i++) { styles.append(rules[i]); } $obj.prepend(styles); // rebuild items for (var i = 0; i < $(items).length; i++) { var $item = $(items[i]); var parent = $item.parent(); if (parent.hasClass('item')) { if (!wrapper.length) { wrapper = parent.clone().removeClass('active').html(''); } $item.unwrap(); } var itemGroup = [$item]; for (var x = 1; x < visibleCnt; x++) { var a = i + x; var next = $(items[a]); if (!next.length) { next = $(items[(a - $(items).length)]); } itemGroup[x] = next.clone(); } var newSet = wrapper.clone().html(itemGroup); if (i == 0) { newSet.addClass('active'); } newSet.appendTo($inner); } }
});
| Developer | Brandon Kennedy |
| Username | brandonkennedy |
| Uploaded | September 18, 2022 |
| Rating | 4 |
| Size | 5,015 Kb |
| Views | 26,312 |
Do you need developer help for Change the Slide Behavior on Bootstrap Carousels?
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!
Brandon Kennedy (brandonkennedy) Script Codes
| Name | Size |
| Space ship fun | 7,302 Kb |
| Compare Some Different Grid Systems | 11,553 Kb |
| Slug loader | 3,481 Kb |
| Lazyload.js | 4,007 Kb |
| Scrolling helix | 3,776 Kb |
| 3D 2D Box-Shadow Fish | 6,333 Kb |
| Digital Static Search Box | 4,148 Kb |
| SCSS Tick Marks Function | 3,630 Kb |
| Button disabled and loading states | 3,677 Kb |
| Crooked section dividers | 4,708 Kb |
Create amazing captions with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
| Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
| Material design - button rainbow circle | Kunukn | 3,652 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| A Pen by Ash | Littleginger | 2,386 Kb |
| 404 Error Page | WebSonick | 3,203 Kb |
| Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
| Two Element Typeface | Chrisota | 4,942 Kb |
| Nav Test -- cats 1 | Payls | 4,735 Kb |
Do you want hide your ip address?
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!