I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.
The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.
Related
I have been trying to get only css for this carousel with custom bootstrap but it is aboslutely not working for me, it completely changes the site
This is the html for the carousel:
<div class="container text-center my-3">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item row no-gutters active">
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/222/fff?text=1"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/444?text=2"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/888?text=3"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/111/fff?text=4"></div>
</div>
<div class="carousel-item row no-gutters">
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280?text=5"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/555?text=6"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/333/fff?text=7"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/bbb?text=8"></div>
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" 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="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
If anyone could help me get just the css and js from bootstrap I would greatly appreciate it !!
In order to limit the scope of your CSS you have to create a unique selector. In your code you use id="recipeCarousel" and since id should be unique on the page, while class selectors allow multiple elements of the same class, all your CSS for this carousel should start with id.
This code will select only elements with carousel-inner class within recipeCarousel element.
#recipeCarousel carousel-inner {
background: blue;
}
You can have both ID and Classes on your elements. So if you want to select the wrapper as well, you can change it to
<div id="myCarousel" class="container text-center my-3">
...
</div>
and start selecting from there.
I need create image slider to move left and right with arrow buttons. please see my existing images here
<div class="col-md-3 animated fadeInUp" >
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">CLASSICAL TOUR</div>
</div>
<div class="col-md-3 animated fadeInUp">
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">TEA COUNTRY TOUR</div>
</div>
my image slider example link here
I need show four images in the page at one time and need move left and right one by one with new images. I am using bootstrap here. how can I do this please help me?
hey hello Brother may be my answer helped you totally using bootstrap no custom css and js
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
here is working fiddle
I am trying to display four items in a slide. But how do I repeat it the main row, because it uses an active class for the active slide. This is how my HTML looks.
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
And an example of the JSON.
$scope.images = [
"http://placehold.it/500/e499e4/fff&text=1",
"http://placehold.it/500/e499e4/fff&text=2",
"http://placehold.it/500/e499e4/fff&text=3",
"http://placehold.it/500/e499e4/fff&text=4",
"http://placehold.it/500/e499e4/fff&text=5",
"http://placehold.it/500/e499e4/fff&text=6",
"http://placehold.it/500/e499e4/fff&text=7",
]
One way you can do it is divide the array in chunks...
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
Demo
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am currently developing my own portfolio to display my work. When you click on an image, a bootstrap carousel appears.
The problem is that the bootstrap carousel does not always start with the first image and I would like it too. Sometimes it starts off with another image. Also when you open the carousel and close it and open it again, the carousel starts from where you left off rather than the first image.
The <div class="item active"> does not seem to be working. The reason may be that I have too many carousels on the same page but how can I overcome this?
Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.ahdabnasir.com/css/simple-sidebar.css" rel="stylesheet">
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".bs-example-modal-lg">
<img src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" class="img-responsive front" alt="Best Years">
<div class="portfolio-caption">
<h4>Best Years</h4>
<p class="text-muted">Adobe Photoshop</p>
</div>
</button>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".tracinggame">
<img src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" class="img-responsive front" alt="Trace the Arabic Letters">
<div class="portfolio-caption">
<h4>Trace the Arabic Letters</h4>
<p class="text-muted">Unity2D and C#</p>
</div>
</button>
</div>
</div>
</div>
</section>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" alt="Best Years">
<div class="carousel-caption">
Created artwork for a UK toy wholesaler specialising in knitted and crochet toys using photos of knitted dinosaurs and adding in child-like drawings and cartoons in order to move the image from being static to active. I gave each dinosaur an activity and made it suitable, recognisable and enjoyable for the target audience which are children under 6 years old. The aim was for the activity to make the dinosaur more appealing as a friend to a pre-school child. A testimonial from Best Years, "The designs Ahdab created for us more than surpassed our expectations. Also every query was answered in a timely and friendly manner. Very happy".
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears1.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears2.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears3.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears4.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears5.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears6.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears7.jpg" alt="Best Years">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<div class="modal fade tracinggame" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="tracing" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" alt="Trace the Arabic Letters">
<div class="carousel-caption">
Part of my final year university project where I created games for my children's Arabic learning website. I developed this game using C# and Unity2D with the letters and graphics being done in Adobe Photoshop. The purpose of the game is to teach the children how to write Arabic letters. Tracing points are given which are numbered from where the child should start and end. If the child does not following the tracing line or points or lifts their finger from the mouse/trackpad, there drawing is removed. The pencil drawing color changes randomly. The child can filter through the letters and erase their drawing using the menu on the left.
</div>
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame1.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame2.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame3.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame4.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame5.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame6.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame7.PNG" alt="Trace the Arabic Letters">
</div>
</div>
<a class="left carousel-control" href="#tracing" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#tracing" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You need to reset the active element of the carousel every time you open a modal window.
Try to add this code at the end of your page:
<script>
$(".modal").on('show.bs.modal', function () {
var firstItem = $(this).find(".item:first");
if ( !firstItem.hasClass("active") ) {
$(this).find(".active").removeClass("active");
firstItem.addClass("active");
}
});
</script>
After looking a little bit at your code with firefox's developer tools this is what I have found out.
Every time the carousel slides to another image the div with the attribute class="item active" changes to class="item" and the next div switches to class="item active". So every time you open it. It starts with the last active element.
I am trying to implement this 4 image slider on my website, but for some reason only one image shows at a time.
I copy pasted the code here:
http://www.bootply.com/94452
For some reason, only one image occupies the space reserved for 4 of the images. When you hit the right arrow or wait for the interval, it goes to the second image.
Does anyone know why this might be?
See code in comments below:
if you want 4 images at a time to scroll then your images are not nested properly.just use this code it should work fine.
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=2" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=3" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=4" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=5" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=6" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=7" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=8" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
you can use carousel-indicators in your view and set each slide with a picture in ascending order eg.
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:89%" >
<div class="item active">
<img src="picture source" alt="First slide">
<div class="carousel-caption">
<strong>anything on an image displayed</Strong>
</div>
</div>
hope it is helpful...