<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<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="http://ichef.bbci.co.uk/news/976/cpsprodpb/87D3/production/_84817743_beckhamfashion.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/9949/production/_84814293_dummy.jpg" 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I'm using bootstap carousel for example;
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
and as you see my first .itemclass has .activeclass but I want to add it automatically when I remove .activeclass from .item class then javascript gave me this error: TypeError: Cannot read property 'offsetWidth' of undefined /works/anitur/js/bootstrap.min.js:6 and I tried to add with this code
$(".carousel > .item:first").addClass("active");
but nothing change how can I realize what I want ? and by the way is there any way to add carousel control with js not html ?
It is better practice to add classes for a carousel in HTML template itself. Why because the carousel plugins will rebuild the HTML after document is ready. However you can try the below code.
$(".carousel .item").first().addClass("active");
I have tried one by one, this code is the correct one to add active class for first item element
.
$(".carousel .item:first").addClass("active");
For more detail, See the red colored box and arrow in the picture.
You may check it as well in live version, here in the running code at JSFiddle
You should correct this
$(".carousel .item:first").addClass("active");
Related
This is actually a copy paste from the bootstrap website, I have also tried many other things, and to be honest I am struggling to understand how can these pictures have the same size. If you click next on the carousel you will see that the height is always different!
So how can I do it? I have tried to change the properties of the inner carousel, the div that I created, the different divs, but nothing happens. Especially when I use my own images the size is always weird.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="justAContainer">
<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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5Ldsk48qcVYHL8b7hOl1kN1KMTQaE2oFlt34OkdrCELVLVZairaj4ros7uyKGQfhrTaQ&usqp=CAU" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY8OmOh5BYsSROeZ2ZLdOD-s1IlDe9JyF08hRqKXZX_79JiXT00FAuM1lO0PS3roGwQiw&usqp=CAU" 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>
<!-- Left and right controls -->
<a class="left carousel-control" href="#startingPageCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#startingPageCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
There is a class w-100 in every image which is bootstrap default class for width: 100%. So it will automatically take full width. If you want the heights same, there are 2 ways for it. (1) You must update same width and height images or make the background-image and give the div width:100% and specify its height.
Thanks me later.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="justAContainer">
<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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5Ldsk48qcVYHL8b7hOl1kN1KMTQaE2oFlt34OkdrCELVLVZairaj4ros7uyKGQfhrTaQ&usqp=CAU" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY8OmOh5BYsSROeZ2ZLdOD-s1IlDe9JyF08hRqKXZX_79JiXT00FAuM1lO0PS3roGwQiw&usqp=CAU" 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>
<!-- Left and right controls -->
<a class="left carousel-control" href="#startingPageCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#startingPageCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
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>
I've been following a guide on how to implement this feature of bootstrap and for the life of me I can't figured out why it isn't working. I have all of the CDNs linked in my header and the Js Script linked. All of them are directly copied from the bootstrap website.
<div id="productCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#productCarousel" data-slide-to="0" class="active"></li>
<li data-target="#productCarousel" data-slide-to="1"></li>
<li data-target="#productCarousel" data-slide-to="2"></li>
<li data-target="#productCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
<div class="item">
<img src="../../static/images/city.jpg">
</div>
</div>
<a class="left carousel-control" href="#productCarousel" 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="#productCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I checked your code an everything works fine.
Check how you embed the libraries.
Boostrap CSS
jQuery
Bootstrap JS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="productCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#productCarousel" data-slide-to="0" class="active"></li>
<li data-target="#productCarousel" data-slide-to="1"></li>
<li data-target="#productCarousel" data-slide-to="2"></li>
<li data-target="#productCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
<div class="item">
<img src="http://placehold.it/800x400">
</div>
</div>
<a class="left carousel-control" href="#productCarousel" 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="#productCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Following is the simple carousel in use, even it looks fine here in coding, however on browser whenever tried to click next or prev button, page is scrolled to top of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<div class="container">
<br>
<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" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</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>
</body>
</html>
Found the reason somewhere with data-target, however, unable to figure it out, and how to stop scrolling top...
Looking for simplest solution to understand, as new to HTML..
Thanks in advance
Cheers..
Just change href="#myCarousel" to data-target="#myCarousel" .
Tip #1:
You can add event.preventDefault() to prevent default behaviour with hashbang:
$('a[class^=carousel-control-]').click(function (event) {
event.preventDefault();
});
Tip #2:
If you have plugins like SmoothScroll, you can unbind it by:
$('a[class^=carousel-control-]').unbind('click.SmoothScroll');
To look for all the click events bind to the element, use:
jQuery._data($('a[class^=carousel-control-]')[0], "events")
My Carousel isn't working. The problem is that it's not moving next when I click on indicator. I also tried to include carousel.js but all in vain.
Here is snippet:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicator-->
<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 of slide-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../images/banner/slide1.jpg">
</div>
<div class="carousel-caption">
<h4>Find Your Agent Here</h4>
<a class="btn btn-info">Find Agent</a>
</div>
<div class="item">
<img src="../images/banner/slide2.jpg">
</div>
<div class="item">
<img src="../images/banner/slide3.jpg">
</div>
</div>
<!-- Carousel Controler-->
<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><!-- End of Carousel -->
This should help out.
http://getbootstrap.com/javascript/#carousel
You need to include jquery and bootstrap to use that plugin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicator-->
<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 of slide-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
</div>
<div class="carousel-caption">
<h4>Find Your Agent Here</h4>
<a class="btn btn-info">Find Agent</a>
</div>
<div class="item">
<img src="http://im.rediff.com/news/2016/mar/01smith1.jpg">
</div>
<div class="item">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
</div>
</div>
<!-- Carousel Controler-->
<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>
<!-- End of Carousel -->