We Keep Coding

showing hidden content based on which slide is active of a carousel

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>

Bootstrap carousel images not loaded

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

Bootstrap Carousel Issue: indicator click

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 -->

I am unable to implement a proper bootstrap carousel in meteor

I am making a meteor based application in which I want to add a bootstrap carousel.I've added only twitter-bootstrap package.And these are the errors in the console Please help me out in fixing that. Here's my html code:
<template name="images">
<div class="row">
<div class="col-md-6">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{{#each images}}
<div class="item {{#if #first}}active{{/if}}">
<img class="carousel-img" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="carousel-caption">
Image caption
</div>
</div> <!-- / carousel item -->
{{/each}}
</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> <!-- / carousel -->
</div>
</template>
And here's my javascript code:
Images = new Mongo.Collection("images");
if (Meteor.isClient) {
Template.images.helpers({images:Images.find()});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
if (Images.find().count() == 0){
for (i=1; i<8; i++){
Images.insert({
img_src:"img_"+i+".jpg",
img_alt:"img"+1
});
}
console.log("startup code says"+Images.find().count());
}
});
}

Bootstrap Full Page Slider Autoplay doesn`t work with more than 3 pictures

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.