Carousel should contain indicators showing current slide and allowing to select slide by clicking in indicator.
Slides should change after 5 seconds.
According to Bootstrasp 3 carousel documentation it should support this.
Actually, indicators are not show.
I tried code from bootstrap manual:
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<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>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/store/Webconte/Details/124">
<img src="/store/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/123">
<img src="/store/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/105">
<img src="/store/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/95">
<img src="/store/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/107">
<img src="/store/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/100">
<img src="/store/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/98">
<img src="/store/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/78">
<img src="/store/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/11">
<img src="/store/Webconte/Image/11" />
</a>
</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>
</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>
</a>
</div>
But indicators are not displayed.
How to fix this ?
Put .carousel-indicators into .carousel-inner.
UPD: Ok.. try this:
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/store/Webconte/Details/124">
<img src="/store/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/123">
<img src="/store/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/105">
<img src="/store/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/95">
<img src="/store/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/107">
<img src="/store/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/100">
<img src="/store/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/98">
<img src="/store/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/78">
<img src="/store/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/11">
<img src="/store/Webconte/Image/11" />
</a>
</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>
</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>
</a>
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<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>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
</ol>
</div>
Actually the indicators are showing. Set:
.carousel-indicators li {
background-color: black;
}
And you can see them at bottom of page.
EDIT:
Try with this, and look for them at bottom of page:
.carousel-indicators {
background-color: black;
}
Related
I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated
Here is my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:100%; class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="images/video_slider_button.jpg" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/toast_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
</ul>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Your problem seems to be an issue with an un-closed tag, here's some working code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div style="width:100%;" class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="http://via.placeholder.com/350x150?text=Video Slide" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide1" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide2" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide3" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide4" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide5" alt="Test" style="width:100%;">
</li>
</ul>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The issue I saw was that you never closed the quote for your div container, eg:
<div style="width:100%; class="container-fluid">
Should have been:
<div style="width:100%;" class="container-fluid">
I'm Attaching the code for JSP file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HOME PAGE</title>
<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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<base href="resources\" target="_blank">
<style type="text/css">
section{
background-color: #f2f2f2;
}
</style>
</head>
<body>
<section>
<!-- Carousel code 1-->
<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 class="img-responsive center-block" src="sale.jpg" alt="SALE" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="womensale.jpg" alt="WOMEN CLOTHING" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="Mens.jpg" alt="MENS CLOTHING" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="kids.jpg" alt="KIDS CLOTHING" id="img">
</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>
<br><br><br><br><br>
</section>
<section>
<!-- Carousel code 2-->
<div id="myCarousel2" 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 class="img-responsive center-block" src="men1.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men2.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men3.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men4.jpg" alt="Mens" id="img">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section>
<!-- Carousel code 3-->
<div id="myCarousel3" 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 class="img-responsive center-block" src="women.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women2.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women3.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women4.jpg" alt="Womens" id="img">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel3" 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="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>
</html>
Here there are multiple carousel codes. Now I want to have carousel codes such that there size is same as background size.Can any one help me to find the above problem.As I'm running in the browser it is making uncomfortable the flow of html i.e, if there are three carousel then it should have three sections which shows accordingly to background size.
I am developing a front-end website using bootstrap. I have inserted a slideshow but it doesn't fit the screen. I have inserted the image into the HTML, not into the CSS. Here is my code:
<div class="container-fluid" id="background">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
<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="pics/happiness1.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
</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>
</div>
How to make those images fit to the screen?
Append this last of your css file ..
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
min-height: 100vh;
}
I am trying to create a carrousel with 7 images in it for a header of a website. However all the images just stack on top of one another. Here is my code, is there anything that I am doing wrong?
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<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>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/signtraysandboxpansheader1170x300.png">
</div>
</div>
<div class="item">
<img src="images/builtupletterheader1170x300.png">
</div>
<div class="item">
<img src="images/flatcutlettersheader1170x300.png">
</div>
<div class="item">
<img src="images/ledilluminatedlettersheader1170x300.png">
</div>
<div class="item">
<img src="images/header1170x450.png">
</div>
<div class="item">
<img src="images/totems&monolithheader1170x300.png">
</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>
</div>
</div>
You have misplaced the ending </div> tag for .carousel-inner. The carousel inner should contain all your .item elements. Right now it only includes the first one.
http://www.bootply.com/q739Qe9Lvj
I have written the following code for carousel. First problem faced that I could not find the slide class with carousel, kindly tell me where it occur.Second, it shows First image properly, but no sliding occur after that. In last sliding glyphicons are also not working.
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<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>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/dog1.jpg" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/cat.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/parrots.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/dog2.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<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>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
is my code right or i'm missing something?
wrong spelling for carousel on multiple occations. Here is a fiddle for your code which seems to work. Did you import bootstrap?
Changed the images though:
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<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>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7f/Terrestrial_planets_size_comparison.png" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/1e7m_comparison_Uranus_Neptune_Sirius_B_Earth_Venus.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Planets_everywhere_(artist%E2%80%99s_impression).jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<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>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
There was a problem with my jQuery version. i have installed jQuery v1.1.9 and bootstrap v3.3.1 don't support it. That's why slide class was also missing. Now i updated my jQuery version ti v2.1.3
the bootstrap v3.3.1 works fine with it. so problem is solved.