I'm using Bootstrap 3's carousel to implement a thumbnail scroller for results in my page.
I have the following code:
<script>
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
The HTML:
<div class="col-md-7">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The CSS:
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
The code, which can be seen running here
I would like to be able to have 6 thumbnails displayed at any one time. Can anyone please help?
Related
I am doing a project in laravel, in which i have to make two carousels.
Everything was working when i made one.
But when made another one,
On clicking the navigation buttons on the second, first one moves, and slso second isnt showing any pictures.
I want these two carousels to work separately.
This is my html
<!-- Latest Slide Show Start -->
<div class="container imageSlideContainer my-3">
<div class="headingSlider">Latest Products</div>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slideImage w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
#foreach ($productsLatest as $product)
<div class="carousel-item">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<img class="card-img-top imageSlide" src="/storage/{{$product->image}}">
<div class="card-body">
<h5 class="card-price">{{$product->price}}</h5>
<h6 class="card-title text-center">{{$product->name}}</h6>
</div>
</div>
</div>
#endforeach
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="imageIcon" aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="imageIcon" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Latest Slide Show End -->
<!-- Best Slide Show Start -->
<div class="container imageSlideContainer my-3">
<div class="headingSlider">Best Selling</div>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slideImage w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
#foreach ($productsBest as $product)
<div class="carousel-item">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<img class="card-img-top imageSlide" src="/storage/{{$product->image}}">
<div class="card-body">
<h5 class="card-price">{{$product->price}}</h5>
<h6 class="card-title text-center">{{$product->name}}</h6>
</div>
</div>
</div>
#endforeach
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="imageIcon" aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="imageIcon" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Best Slide Show End -->
This is my JS
// Images Slide Show Start //
$('.carousel-item').eq(0).addClass('active');
$('#recipeCarousel').carousel({
interval: 500000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 4;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$( ".imageSlideContainer" ).hover(
function() {
$(this).addClass('shadow-lg').css('cursor', 'pointer');
}, function() {
$(this).removeClass('shadow-lg');
}
);
// Images Slide Show End //
This is css
#media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
Thank You!
here i am displaying the data in bootstrap carousel here for each slide i am displaying 3 images and in the last slide i am displaying only 2 images there it is showing how can i perform loop and continue the slide with out showing empty while applying dynamic data i unable to perform the same task below is the code which i performed in html
.html code
<div class="container">
<div class="col-xs-12">
<h1>Bootstrap 3 Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
.css
/* override position and transform in 3.3.x */
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
.carousel-control.left,.carousel-control.right {background-image:none;}
.js code:
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
You're probably better off using a library such as ng-bootstrap or ngx-bootstrap.
Keep in mind that these libraries do not support animations yet. This way you can avoid using jQuery, and saves you from writing a bunch of code.
I try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);
I am trying to display four items in a slide. But how do I repeat it the main row, because it uses an active class for the active slide. This is how my HTML looks.
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
And an example of the JSON.
$scope.images = [
"http://placehold.it/500/e499e4/fff&text=1",
"http://placehold.it/500/e499e4/fff&text=2",
"http://placehold.it/500/e499e4/fff&text=3",
"http://placehold.it/500/e499e4/fff&text=4",
"http://placehold.it/500/e499e4/fff&text=5",
"http://placehold.it/500/e499e4/fff&text=6",
"http://placehold.it/500/e499e4/fff&text=7",
]
One way you can do it is divide the array in chunks...
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
Demo
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)