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)
Related
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mousehover it starts to cycle the carousel and on mouseout it pauses.
slider.html
<div id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp"
data-ride="carousel">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="tab-section">
<div class="user">
<ul class=" carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active wow slideInUp " data-wow-delay=".1s">
<a href="" class="transition-fast">
<span class="count">01</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=" wow slideInUp"
data-wow-delay=".2s">
<a href="" class="transition-fast">
<span class="count">02</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow slideInRight" data-wow-delay="1s">
<div class="carousel-inner wow slideInUp" data-wow-delay="2s" role="listbox">
<div class="item active">
<img src="assets/img/first-01.png" alt="">
</div>
<div class="item">
<img src="assets/img/first-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
script.js
$('#carousel-example-generic').hover(function(){
$("#carousel-example-generic").carousel('cycle');
},function(){
$("#carousel-example-generic").carousel('pause');
});
First disable the default behaviour of the carousel to stop on hover by putting setting the data-pause to false
id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp" data-pause="false"
Use the following js to manage the hover behaviour
$('.carousel').carousel({
interval: 2000
})
$('.carousel').carousel('pause') ;
$('.carousel').hover(function(){
$('.carousel').carousel('cycle') ;
}) ;
$('.carousel').mouseleave(function(){
$('.carousel').carousel('pause') ;
});
I'm just learning some HTML+CSS and today I created a carousel using Bootstrap 4. For some reason it seems not to work. It actually doesn't trigger any action when i press the buttons, neither it switches the slides automatically.
Can anyone please give me some help?
thank you in advance
Please see attached code:
<div class="row slider">
<div class="col mt-3">
<div class="carousel slide" id="slider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/segunda.jpg" alt="Slide #1" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="img/primera.jpg" alt="Slide #2" class="d-block img-fluid">
</div>
</div>
<a href="#slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
You have to include javascript, for example:
$('.slider').carousel({
interval: 2000
})
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.
I’m using bootstrap slideshow in my app and I’m using some images and videos to slide, but the video is star playing automatically immediately when page got loaded. Can anyone help me how to fix this issue?
<div id="myCarousel" class="carousel slide">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/Content/Images/image-01" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-02" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-03" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-04.png" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-05.png" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-06.png" alt="">
</div>
<div class="item">
<div class="embed-responsive embed-responsive-4by3">
<iframe src="/Content/Images/test-vedio.mp4" width="960" height="400" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
put your video inside a video element so you can manipulate its attributes:
http://www.w3schools.com/tags/tag_video.asp
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.