Is there a way to make the bootstrap carousel add images by itself from a folder? I tried googling but i can´t find anything. I´m currently using the standard carousel you get in dreamweaver
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="../images/Carousel_Placeholder.png" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="../images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="../images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Related
Here is My code image are not getting displayed i have included images both in static and template. In start when i run this cod emy image get displayed but know when i run again my images are not getting displayed have a look and code and suggest why it is doing so.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 " src="image1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
<p>Welcome to Management Application </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="image2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="image3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>```
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/sl01.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/sl02.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/sl03.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
Next
items move downwards at the end of a slide, and also jums after first circle :((( bootstrap 4
this is my 1st page where logo and carousel both are in the top section of the pageI was trying to put a responsive logo over carouser from bootstrap. Logo was over the carousel but it does not shows the responsive behavior. I used the code from www.w3schools.com i think its somewhere in the carousel class in bootstrap.min.css but cant locate it. If someone has work on it plz leave the comment.
html:
<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" role="listbox">
<div class="overlay">
<!--<img src="images/logo.png" class="img-responsive" alt="">-->
</div>
<div class="item active">
<img src="images/1bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/11bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/111bg.jpg" alt="">
<div class="carousel-caption">
</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>
</div>
logo is in overlay div.I want logo to be responsive
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 30px;
left: 600px;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
Use percentage instead of pixel in overlay class.
For Example:
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 3%;left: 50%;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
change top and left percentages value as you need.
So I wish to target slides with the indicators in Twitter-Bootstrap-3 but having some difficulty in doing so.
Here is my code:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-id="1">
<img src="/assets/example/bg_suburb.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
</p></div>
</div>
</div>
<div class="item" data-id="2">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="item" data-id="3">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
</script>
I need to change the indicators to words of my choosing and also add captions to each slide not siting on top of the slide so the indicators to be underneath the carousel with the caption underneath the indicators too. I have tried all manners of things but getting nowhere.
I can't make my slideshow automatically scroll through all of my pictures. It scrolls through three pictures, but I have six. When I click on the arrows, it scrolls through all of the pictures, but it doesn't scroll through all of the pictures automatically. It works when the site isn't live, but it doesn't work in Chrome when it is live. Here is my code..
<div id="carousel-example-generic" class="carousel-inner" 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/landscape.jpg" alt="landscape design and installation">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio.jpg" alt="stonework">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio2.jpg" alt="full-service">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/firepit.png" alt="Fire Pit">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/deck.png" alt="deck">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/gardens.png" alt="deck">
<div class="carousel-caption"></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>
You need to add more data-targets:
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
Since you have 6 slides you need to to have 6 data targets (starting with 0)