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());
}
});
}
Related
I am having thumbnail images on my gallery page whenever user clicks on the thumbnail images it should display the slider images which should be slided automatically.I have tried with some examples posted in google but it didn't work .Here is my code.
Here is my fiddle link
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="image1">
<img src="images/image01.jpg" class="img-responsive">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/Image30.jpg" alt="First Slide">
</div>
<div class="item">
<img class="second-slide" src="images/Image14.jpg" alt="second Slide">
</div>
</div>
<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 class="image2">
<img src="images/image13.jpg" class="img-responsive">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="third-slide" src="images/Image29.jpg" alt="third Slide">
</div>
<div class="item">
<img class="third-slide" src="images/Image32.jpg" alt="third Slide">
</div>
</div>
<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>
In jsfiddle i have added some sample images for clarification
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 am trying to implement slider inside the modal box but this is not working.
I am using modal box and trying to implement slider inside the modal box.
Here is my code:
$("#lightSlider").lightSlider({
auto:false,
adaptiveHeight: false,
});
Slider is coming only then I do inspect from browser and modal box keeps changing its size during inspect element.
Any idea why this is happening or do I need to change my slider?
Just use a carousal slider inside your modal body
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol><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>
<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 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 am a beginner to asp.net mvc. I currently have an app with crud functionality. The user is able save images into the database (the user inserts the image into the database using a string url in the create view).
What I would like to do is use a bootstrap carousel (in the index view/a separate controller to crud controller) that displays images stored in the database,that have been inputted by the user. Therefore if the user changes the image the carousel that displays that image will also change to the new image.
Currently, this is what I have so far in my index view:
<!-- 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">
#foreach (var item in Model) {
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
}
</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>
The result:
You are unable to navigate from one image to another, instead
The images are placed one after another, like a stack, one image on top of another.
e.g.
Image1
Image2
Image3
as appose to:
Image1 displayed, click navigation button in the carousel and navigate to image2 etc.
How do I solve this?
Really appreciate your time and effort, thanks
EDITED-Trying to add links to the carousel images, but doesn't work:
<div id="myCarousel" class="carousel slide " style="width:400px; height: 400px; margin:0 auto" 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<a href="#Url.Action("Details", "Desserts", new {Id=item.Id })">
<img src="#Url.Content(item.DessertArtUrl)" alt="Dessert">
</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>
You are binding each Image in single div with class "item active" which is not valid try below code hope it helps.
#{int i = 0;}
#foreach (var item in Model) {
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
</div>
}
Let me UPDATE your whole code you have posted here please find below
<!-- 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">
#{int i = 0;}
#foreach (var item in Model) {
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
</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>
Updated
<a href="#Url.Action("Details", "Desserts", new {Id=item.Id })">
<img src="#Url.Content(item.DessertArtUrl)" alt="Dessert">
</a>
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