I have a carousel and I placed a button which supposed to stop the spinning
but the button doesn't get click instead the "carousel-control-next" tag being clicked
how can I fix this?
** when I remove the "carousel-control-next" its works fine **
$("#carouselButton").click(function(){
if($('#carouselButton').children('span').hasClass('fa fa-pause')){
$("#mycarousel").carousel('pause');
$("#carouselButton").children('span').removeClass('fa-pause');
$("#carouselButton").children('span').addClass('fa-play');
}
else{
$("#mycarousel").carousel('cycle');
$("#carouselButton").children('span').removeClass('fa-play');
$("#carouselButton").children('span').addClass('fa-pause');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" >
<p class="d-none d-sm-block">content1</p>
</div>
<div class="carousel-item">
<p class="d-none d-sm-block">content2 </p>
</div>
<div class="carousel-item">
<p class="d-none d-sm-block">content3 </p>
</div>
</div>
<!--create in the bottom indicators to show in which slide you are
the "slide to allow you to press them and move the the slide you want-->
<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>
<!-----THE BUTTON ------>
<button class="btn btn-danger btn-sm" id="carouselButton">
<span class="fa fa-pause"></span>
</button>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
It is almost 100% CSS issue, it could be easier to help if you provided codesandbox/codepen link. But you can try to apply z-index on the button if carousel controls overlap it somehow.
Related
i want to show hidden content based off of which carousel item is active. Even if you tell me how to return just the active class element id would help alot.
Accordingly to documentation you have some events to capture carousel slide http://getbootstrap.com/javascript/#carousel-events
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
You can place this following script inside that event...
var liActive = $('#carousel-example-generic').find('ol').find('li.active')[0];
console.log("li element:", liActive);
var slideActive = $(liActive).data('slide-to');
console.log('data-slide-to active:', slideActive);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Getting crazy :D Been stuck for three days.
I am trying to put a carousel in my page, I am loading the images located in my machine, each one having a size of 1200*480.
When I test it the images are not shown.
This is the code:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<a class="left carousel-control"
href="#carousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
Codepen page
Please could you help me?
try this one:
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</p>
</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>
DEMO HERE
I am creating a page with a bootstrap carousel and w3.css fixed top navigation bar. Then suddenly when I scroll down the page the indicators of the carousel is overlapping my top navigation.
Here is the picture of the current problem with a red arrow
Here is my code for my top navigation bar
<script>
window.onscroll = function() {scrollFunc()};
function scrollFunc() {
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
document.getElementById("myTop").classList.add("w3-cyan","w3-card-4");
document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
document.getElementById("myIntro").classList.remove("w3-show-inline-block");
document.getElementById("myTop").classList.remove("w3-cyan","w3-card-4");
}
}
</script>
<div id="myTop" class="w3-top w3-container w3-padding-2 w3-theme w3-large">
<!-- <i class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i> -->
<span id="myIntro" class="w3-hide">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="200px" height="50">
</a>
</span>
</div>
<header class="w3-container w3-theme w3-padding-18 w3-blue">
<h1 class="w3-xxxlarge w3-padding-16">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="400px">
</a>
</h1>
</header>
<nav class="w3-card-4 w3-indigo">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.php"><b>Alumni Tracer System</b></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Alumni Registration</li>
<li>News and Events</li>
<li>Job Oppurtunities</li>
<li>Job Oppurtunities</li>
<li>Featured Alumni</li>
<li>Photo Gallery</li>
</ul>
</div>
</div>
</nav>
and for the Bootstrap carousel
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="admin/img/SLIDER1.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER2.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER3.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER4.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER5.jpg" alt="Flower">
</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>
It is due to higher z-index of carousel indicators.
You can fix by either giving them lower z-index or by giving the navbar a higher z-index.
Increase the z-index property value of navbar to 21
On the website I am currently working on there seems to be a problem with the full page slider from starbootstrap.com: When just replacing the placeholders with images all works fine however when adding a fourth item to the slideshow the autoplay stops working.
Here`s what I did: I added a fourth li-tag.
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel">
</li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
Copied the Item with new image
<div class="item">
<!-- Set the fourth background image using inline CSS below. -->
<div class="fill" style=
"background-image:url('images/index/4.JPG');"></div>
<div class="carousel-caption">
<div class="wow fadeIn" data-wow-delay="1.5s">
<!--Caption-->
</div>
</div>
</div>
added Javascript to the bottom, just before the close-body tag
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
</script>
Now as mentioned before this works perfectly with only three items in the slider, but as soon as I make the written changes autoplay stops working...
All the other items look exactly the same as the "fourth item".
I really can`t figuer out what the error is, there are no js-errors in the console...
Thank you very much in advance!
Write proper structure.
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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>
and use <div class="carousel slide" data-ride="carousel" data-interval="true">
source from w3school
hope this will help you.
I'm using this standard Bootstrap carousel:
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h1>App Preview</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Contact Details</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Choose plan</h1>
</div>
</div>
<div class="item">
4
</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>
and I'm trying to hide the 'previous' and 'next' buttons respectively, if the user is on the first or last items of the carousel:
$('.carousel').carousel.on('slid', '', function () {
var $this = $(this);
$this.children('.carousel-control').show();
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();
}
});
On the first line of the JavaScript above I get a 'carousel.on is not a function' error. JQuery is clearly working, and the carousel object is recognised. Here are the includes I'm using at the top of my ASP.NET MVC page that uses the carousel:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
It should be
$('.carousel').on('slid', '', function () {
...
});
JSFiddle Demo