I'm trying to set up a little carousel to display some projects I've worked on. The images display but for some reason the slides don't move the carousel when I click them. Anyone know why?
I've tried messing around with a few different things, but it hasn't fixed it.
Thanks!
<div class="container" style="margin: 50px auto;">
<div>
<h4 style="margin: 1em 1em 1em 1em;">Projects</h4>
<h6>Take a quick look at some of the projects I've worked on.</h6>
<div>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: 50px auto;height:350px;width:600px;">
<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="item active">
<img src="img/bg.jpg" alt="Project #1" class="carousel-item">
<div class="carousel-caption">
<h3>Example #1</h3>
<p>Description #1</p>
</div>
</div>
<div class="item">
<img src="img/bg.jpg" alt="Project #2" class="carousel-item">
<div class="carousel-caption">
<h3>Example #2</h3>
<p>Description #2!</p>
</div>
</div>
<div class="item">
<img src="img/bg.jpg" alt="Project #3" class="carousel-item">
<div class="carousel-caption">
<h3>Example #3</h3>
<p>Description #3</p>
</div>
</div>
</div>
<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>
<div>
</div>
Try adding this instead of yours :
<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>
Make sure that the href to the js and css files of the carousel is right.
and add this at 1st in the <head> section:
<script>
// Load this when the DOM is ready
$(function () {
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
Hope this is helpful :)
Related
I want to use the font awesome arrows with the code given in w3schools tut because glypicons aren't supported anymore and I can't get
<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="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</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>
in the right and left control I have tried changing it to the font awesome arrows but can't get it to work.
Ok so, I was following this tutorial on YT, and everything is fine so far, except carousel is showing only the active image, and wont switch to others. I checked the code multiple times, everything is on place, but it just won't work. Please answer if you know what's wrong, I'll appreciate it so much! :)
Here is the code:
<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" role="listbox">
<div class="item active">
<img src="img/mountains.png">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="img/snow.png">
</div>
<div class="item">
<img src="img/red.png">
</div>
</div>
<!-- Strelice Pocetak -->
<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> <!--Kraj slajdera -->
From you example if you have added the bootstrap assest and jquery , and the <div id="myCarousel" class="carousel slide" data-ride="carousel"> every thing should work fine :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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" role="listbox">
<div class="item active">
<img src="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="http://www.dempos.com/wp-content/uploads/2015/07/Home-Company-Dempo-Travels.jpg">
</div>
<div class="item">
<img src="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
</div>
</div>
<!-- Strelice Pocetak -->
<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>
I created a Bootstrap Carousel in my home page, after some text information. I do not want a big Carousel in my page, so I decreased the size using <div class="col-sm-6">.
But my Carousel is positioned on the left side of the page and I was not able to center it. I would like to have it in the center of my page.
The code that I used was:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></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="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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>
My CSS code was
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
How can I change the position?
First you have to place your col-sm-6 inside a row, then you can simply add a class "col-centered" and add the following CSS
.col-centered{
float: none;
margin: 0 auto;
}
Your final code will be like this:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-centered">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></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="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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>
Apply this style. This below code will work.
<div class="col-sm-6" style="
margin: 0 auto;
float: none;">
I have a Bootstrap carousel but the left and right navigation control overflow at the bottom of the carousel after the bottom of the image.
Any way to get rid of this overflow of the navigation arrows?
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/freshers2015">
<img src="/files/2015/06/journosoc-prefreshers-web.png" alt="First slide"/>
</a>
</div>
<div class="item">
<img src="/files/2015/06/whatjourno.png" alt="Second slide"/>
</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>
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.