Image slide left not working - javascript

I want to slide my image to left when click on the right arrow of the image slider. I cant apply the slide left animation.When click right arrow current image hide and next image is showing but not slide animation is happening
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none
}
#image-content img.active{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
I just want to slide it to left side.Currently working fine except animation.Help Please


There's another way for it. Use bootstrap:
div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
/* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
/* selector to edit images */
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
</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>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
it's working like a charm


css seems to work, i think there's an issue on youor js.
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
transition: 1s;
}
#image-content img.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
The best option to slide is moving content from out of page to in and the opposite for sliding-out object.

Related

How to stop bootstrap 4 carousel automatic sliding in mobile using JavaScript or any

I'm trying to stop my carousel to auto slide for mobile devices only. Can You please help me out from this query. I found some related questions in this portal but those are not working for me. Please suggest the answer. The below example is the sample bootstrap carousel code.
I'm trying to stop my carousel to auto slide for mobile devices only. Can You please help me out from this query. I found some related questions in this portal but those are not working for me. Please suggest the answer. The below example is the sample bootstrap carousel code.
<script>
// set breakpoint width
var BP = 362;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:500 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 500 });
}
})
</script>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Use .carousel's pause and cycle to do this.. as shown below.
// set breakpoint width
var BP = 362;
// start carousel
$('.carousel').carousel({
interval: (window.innerWidth < BP) ? false : 500
});
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev) {
if (window.innerWidth < BP) {
$('.carousel').carousel('pause');
} else {
$('.carousel').carousel('cycle');
}
})
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Automatic change pictures in slideshow with jQuery

I use a working picture slider with jQuery UI. I can change the pictures with the slider. Now, I like to change the pictures automatic additionally in a period (for example 3 seconds).
$(function() {
var myImages = [
"img/january/tweet_january_1.svg",
"img/january/tweet_january_2.svg",
"img/january/tweet_january_3.svg",
"img/january/tweet_january_4.svg",
"img/january/tweet_january_5.svg"
];
$("#start_slider").slider({
min: 0,
max: (myImages.length - 1),
step: 1,
change: function(event, ui) {
$('#flask1').attr('src', myImages[ui.value]);
}
});
});
.start_heading {
padding: 2em;
margin-top: 10em;
text-align: center;
font-family: 'Roboto';
font-size: 1em;
}
#start_slider {
align-content: center;
margin-left: 15em;
margin-right: 15em;
margin-top: 3em;
margin-bottom: -10em;
}
<div class="start_heading">
<h2> Headline</h2>
</div>
<div class="tweets_january">
<img src="img/january/tweet_january_1.svg" height="" width="" id="flask1" />
<div id="start_slider"></div>
</div>

You can use any JQuery plugin for Carousel from here and can also do following
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Bootstrap carousal - Issues when showing multiple slide one by one

Hi I'm working on bootstrap carousal. I tried to show the multiple slide one by one on the arrow click. I have used some code and Somewhat it is working but not expected. I wanted to move only one image on click. But, here the whole image slide is moving. Please help me to move only one image on click. Thanks in advance.
$('#Carousel').carousel({
interval: 4000
})
$('#Carousel .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));
}
});
.dashboard-menu-wrapper {
display: none
}
.carousel-inner .active.left {
left: -10%;
}
.carousel-inner .next {
left: 10%;
}
.carousel-inner .prev {
left: -10%;
}
.carousel-control {
width: 4%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12">
<div class="carousel slide" id="Carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#Carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

To achieve the desired result you can use a different carousel. I`ve been trying a lot do the same with bootstrap but could not achieve the result.
The OWL Carousel https://owlcarousel2.github.io work really easy with aligned elements...
See demo: https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

try this.
$('#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));
}
});
-> https://codepen.io/Not2Day2Die/pen/ddPbpE
Hope this help you

Bootstrap Carousel not centering

I have downloaded bootstrap and have the following code in the head section
<link ref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
However I want my whole slider to be 100% in width and the images to be 80% wide however my images although I have used margin-left: auto;
margin-right: auto; doesn't want to centre it creeps over to the right.
My code is
<div id="the-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
<li data-target="#the-slider" data-slide-to="3"></li>
<li data-target="#the-slider" data-slide-to="4"></li>
<li data-target="#the-slider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 1-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
</div> <!--carousel-inner-->
<!--controls-->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--the-slider-->
<!--container-->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
#img {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#the-slider {
width: 100%;
}
</style>
As you will see it creeps to the right, look at photo attached to see what I mean. Its only slight but I NEED it central!

If you are using the class .img-responsive, you need to use margin:0px auto to center.
Hint, set the width you want, to a parent div, and center the image with margin: 0px auto;

I have tried to simulate your problem on JSFiddle. The aligning should be fine with just:
img {
margin: auto auto;
}
https://jsfiddle.net/e1mw6myL/
I just got some random pictures in it. The first picture is smaller than other.. It could be that your image is too big (there is a max-width: 100% on .img-responsive)
Try using other images and look if those images give you the same problem.

How to Get total and Current Slide Number of Carousel in Bootstrap 3.3.4

Hello guys i want to get current slide number of carousel in bootstrap 3.3.4 i already used this script in below 3 version and work perfectly but in version 3.3.4 not working any one help me out of this situation
thnx in advance
code which is use
var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$('#myCarousel').carousel({
interval: 2000
});
$('#myCarousel').bind('slid', function() {
currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
});
.container {
margin-top: 10px;
}
.num{
background:#000;
color:#fff;
padding:10px;
width:50px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="well span9 columns">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" />
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" />
</div>
<div class="item">
<img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<div class="num"></div>
but when i used in version 3.3.4 it did not working please please help me

Try this one:
$('#myCarousel').on('slide.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
});

Categories

Resources