This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 4 years ago.
I have this Bootstrap Carousel which shows 2 item each in Desktop view. However, I want to show one item at a time in Mobile view. How can I achieve this?
https://jsfiddle.net/v9t2pz9b/
HTML
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-6">
block1
</div>
<div class="col-sm-6">
block2
</div>
</div>
<div class="item">
<div class="col-sm-6">
block3
</div>
<div class="col-sm-6">
block4
</div>
</div>
<div class="item">
<div class="col-sm-6">
block5
</div>
<div class="col-sm-6">
block6
</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>
JS:
$(document).ready(function(){
$("#myCarousel").carousel();
});
Something like as this shown in the design. I want to show only one slide at a time in mobile:
$(document).ready(function(){
$("#myCarousel").carousel();
if ( $(window).width() < 640 ) {
$('.col-sm-6').unwrap().addClass('item');
$('.col-sm-6:first').addClass('active');
}
});
Where 640 is your mobile breakpoint. Check out unwrap() , it removes the element's parent while not affecting its content.
Related
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.
I have a div that uses a bootstrap carousel with ng-repeat. I also have a way to add items the current list of items.
So if I am in index 0 and I click the add button, I want to be able to slide to the new item.
Currently with what I have, the indexes seem to be set correctly but it just isn't sliding to the new item
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
$('#myCarousel').carousel($scope.currentIndex);
It just shows the data from item 1 still. But when I do try and click next, it then moves to that new item.
I have also tried it with $('#myCarousel').carousel('next'); which results in the same thing
Edit:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>
Can you post the html part? also begin with more than 1 slide so that you have at least 3 slides at the end just for debug.
Following your code i compiled something like this, don't know if it's what you are looking for
<body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
<div>{{item}}</div>
</div>
<h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
</body>
with the script
var app = angular.module('cApp', []);
app.controller('myslides', function($scope){
$scope.items = ['this is 1','this is 2'];
$scope.currentIndex = 0;
$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
};
});
Aldo if you are going to use angular, i personally prefer to use angularui that has a simple carousel with prebuild functions and you can still do some customizing.
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.
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>
I was wondering if there was a way to skip through hidden slides using a bootstrap carousel. I am able to show and hide the slides using ng-show() however the carousel still goes to the blank slides. Just wondering if i could make a function for prev or next that goes to next slide where ng-show() = true?
<div class="carousel-inner" role="listbox">
<div class="item active" ng-show="solution.check">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item" ng-show="solution.check">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</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>
Maybe this can help you:
Take a look at bootstrap carousel documentation here
$("selector").on("slide.bs.carousel", function(){
if($(nextslide).attr("ng-show") == false){
// go to next element
}
});
Check this link.
You can take a look at the link and check what is going on when you click on the next or prev buttons. The link is a source to w3schools where you can "try it".