Get index from several carousel in angularJS - javascript

I am trying to get the index of several carousels from bootstrap. At this moment I get only the index of one carousel.
Here is the code.
<body ng-app="menuAPP" ng-controller="mainController">
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE BASES DE BRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmB" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmB" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=bases.size();i++)
{
%><li data-target="#Carousel-roboticArmB data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
boolean activo=true;
for(Pieza i: bases)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE ANTEBRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmA" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmA" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=antebrazos.size();i++)
{
%><li data-target="#Carousel-roboticArmA data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: antebrazos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE MANOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmM" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmM" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=manos.size();i++)
{
%><li data-target="#Carousel-roboticArmM data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: manos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<hr>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<!-- ------------------------------------------------------ -->
<form id="formShowBrazo" method="post" action="redirect" >
<input type="button" value="Probar brazo seleccionado" ng-click="show()" class="btn btn-primary"/>
</form>
<script>
var app = angular.module('menuAPP', ['ui.bootstrap']);
app.controller('mainController', function($scope, $http, $window, $location) {
$scope.hideError=true;
$scope.show = function() {
$scope.currentBaseIndex = $("#brazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentAnteIndex = $("#antebrazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentManoIndex = $("#mano, div.active").index() + 1;//Saca el indice actual del carousel
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
var data = angular.toJson(params)
$http({
method: 'POST',
url: 'showPieza',
data: 'Data=' + data,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).success(function(response)
{
post("formShowBrazo");
});
};
function isActive(slide) {
return slide.active;
};
});
</script>
</body>
Here need a string with the index of all carousel
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
The problem is that all values are the index of the first carousel (id="Carousel-roboticArmB")
EXAMPLE
1º carousel index: 2
2º carousel index: 4
3º carousel index: 1
Expected output: "Data :4:2:1"
Real output: "Data :2:2:2"


Solved
$scope.currentBaseIndex = $("div.active#base").index() + 1;
$scope.currentAnteIndex = $("div.active#ante").index() +
$scope.currentManoIndex = $("div.active#mano").index() + 1;
The solution was change the position of ID and class.
Hope someone will find this helpful.

Related

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.

How to display immediately an active image from carousel to my 2nd div if I click next/ previous?

I'm having problem displaying an active image from carousel to my 2nd div when I click next/ previous. Looks like it's delayed when I click next/ previous.
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2">
</div>

For the benefit of those who are looking for an answer for a question/ problem like this one, I was able to solve my own problem by adding an onload="strapActiveImage()" to the image tag (where display is happening). Here is the code:
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()">
</div>

Bootstrap carousel thumbnail repeat when item lesser than 3

I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.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)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]

you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#

how to disable left and right arrow in slide using bootstrap

I need to create a slide when the image is first the left arrow should be hide and when the last image is active right arrow should be hide. I had added my code here. Is there any other alternative method to replace or any new method. Is there any option to modify the code, Can anyone point me in the right direction?
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});
.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
<span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#">
<span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>
</a>
<div class="modal-content1" id="img01">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
<li id="insesrtIndicator" class="hidden"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="insertCarouselItem" class="hidden"></div>
<div class="item active" data-value="100250" id="docPdf1">
<div id="pdfDoc1">
<canvas height="841" width="595" style="display: block;"></canvas>
</div>
</div>
<div class="item" data-value="100301" id="docImage2"></div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<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>

You can use these JavaScript codes.
First:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
Second
$('.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));
}
});
$('#myCarousel').on('slid', '', checkitem);
$(document).ready(function(){
checkitem();
});
function checkitem()
{
var $this = $('#myCarousel');
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
Here I used the second JavaScript example and made what you want:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div id="carousel-example-generic" 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">
<div class="item active">
<img src="//placehold.it/1024x600" class="img-responsive">
<div class="carousel-caption">
one
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/999" class="img-responsive">
<div class="carousel-caption">
two
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/bbb" class="img-responsive">
<div class="carousel-caption">
three
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hope it'll helps you. Good luck! :)

Categories

Resources