Unable to make the .each() function execute

Unable to make the .each() function execute - javascript

I'm trying to create a responsive carousel and for that, I need to execute a function to set the siblings of the item.
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
And the JavaScript tag that goes with this is this.
<script language="javascript">
$('.carousel[data-type="multi"].item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
But the probelm is that the each function is never executed. I used Google Chrome debugger and placed a breakpoint on the function definiton. That's how I know that function is being executed. I'm just getting started with this stuff so I might be missing some thing obvious here.

Since the element with class item is inside the carousel element you have to add space before .item. Change you selector To
$('.carousel[data-type="multi"] .item')
$('.carousel[data-type="multi"] .item').each(function() {
console.log(this);
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Try this:- Place your code inside $(document).ready(){}); function and also add space before .item $('.carousel[data-type="multi"] > .item')
$(document).ready(function() {
$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Related

carousel slide is not working, images are not displayed on same row

I tried design a Web Page.
I am using carousel.
The Left and Right options doesn't work, Instead all the images gets added on the Vertical Manner.
<h3 style="text-align:center;">Top Visiting Sites</h3>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="row" id="Places">
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
This is what i have used on html.
And this is the Js I have used.
for (var i = 0; i < total.length; i++) {
var stars = '<i class="glyphicon glyphicon-star"></i>';
var obj = sort[i];
$('#Places').append(`
<div class="carousel-item active">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
`); }

You are adding all of your elements inside of the div with the class="item active". You need to add them to the carousel-inner div, each in a separate div with only the "item" class.
Your end result should look like this :
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- html of your first item -->
</div>
<div class="carousel-item">
<!-- html of your second item -->
</div>
<div class="carousel-item">
<!-- html of your third item -->
</div>
<div class="carousel-item">
<!-- html of your fourth item -->
</div>
</div>
</div>

The content inside append function misses the ending quote. Please check that.
$('#Places').append('
<div class="carousel-item">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
');
Can you try and see whether the above with end quote works?
You should also have your carousal-inner class id as Places and remove the class=row div
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner" id="Places">
</div>
</div>
Also remove active class as it should be set only on the first item, which you can do separately.

Trying dynamic carousel slider using repeater asp.net web forms

Below is my carousel slider inside repeater which is not working.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<asp:Repeater ID="Repeater_Attendance" runat="server">
<ItemTemplate>
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Below is my html slider which working fine.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I am getting below image output when i will use using repeater but using html working fine.
Please help i am trying using repeater for dynamic fetching data of images please help to out this issue thank you very much.

To display dynamic data, a repeater must be bound to some sort of data source for that dynamic data, and your code doesn't show where you are doing that. If you are, you should add that code to your question.
If you are not binding to a data source, that's probably why nothing is showing up. Without a data source, no items are ever getting added to the repeater, and the ItemTemplate will never be used, so you won't see any of that content from the ItemTemplate.

Display 9 Items in bootstrap corousel with ng-repeat

Total 20 Images, I have to show 9 items in each slider so total 3 slider.
I tried this following link
Four items in bootstrap carousel Ng repeat?
<div class='greybg' ng-repeat="comment in location.comments">
<div class="row">
<div id="myCarousel{{location.comments[0]._id}}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner multiple_pictures" >
<div class="item" ng-class="{active:!$index}">
<div class="row" >
<div class="col-sm-4" ng-repeat="images in comment.images.slice(0,9)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(9,18)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+9}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(18,27)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+18}}</div>
</div>
</div>
</div>
<a ng-if="comment.images.length>1" class="left carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a ng-if="comment.images.length>1" class="right carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div></div></div>
But the image count will be dynamical so If am having 50 image means 6 times I have to write. How do i do this dynamically based upon image count.

stop autoslide from boostrap carousel with thumbnails

I am trying to stop autoslide from the bootstrap carousel corresponding to this jsfiddle example.
Whereas
$('.carousel').carousel({
interval: false
});
stops the main carousel, I dident find the way to stop the autosliding from the thumbnail part.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Get rid of data-ride="carousel", give your .carousel data-interval="false" attribute.
Quoting W3S
The data-ride="carousel" attribute tells Bootstrap to begin animating
the carousel immediately when the page loads.
If you want it to stop animating, remove .slide class from your your .carousel selector.
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

How can I make my image carousel responsive to display 1 image on mobile size?

Currently the Carousel shows 3 images, which is great until mobile which I would like to display a single image which can be navigated through, can anybody edit my code or push me in the right direction to discover how it can be achieved
Here is the html:
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="img/home-image1.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image2.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image3.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image4.png" class="img-responsive center-block">
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
and here is the current JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
});
});

try setting the col values for all window sizes. An example would be col-sm-12 col-xs-12 for small windowed devices and col-md-12 col-lg-12 for larger windowed devices

Develop Reference

JavaScript is the programming language of the Web.

Unable to make the .each() function execute - javascript

Related

carousel slide is not working, images are not displayed on same row

Trying dynamic carousel slider using repeater asp.net web forms

Display 9 Items in bootstrap corousel with ng-repeat

stop autoslide from boostrap carousel with thumbnails

How can I make my image carousel responsive to display 1 image on mobile size?

Categories

Resources