I have an array; that looks like this:
array = [
{
id:1,
metadata:['object','object']
},
{
id:2,
metadata:['object','object']
},
{
id:3,
metadata:['object','object']
}]
this is what I'm doing:
array.forEach(function(elem){
output_info +=`<div class="col-md-12">
<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">`
elem.metadata.forEach(function(trip){
output_info += each_metadata_html(trip)
})
output_info += `</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>`
})
console.log("this is output", output_info)
$('#results').html(output_info) then I throw this inside my results tab.
Which looks like this
<div class="row" id="results"></div>
each_devices_html takes in an metadata object.
function each_metadata_html(elem){
return `<div class="item">
<p>`+elem.name+` </p>
</div>`
}
Problem:
The code doesn't display carousel; but instead it looks like this:
the element looks like this
everything is stacked together..
What I'm trying to do is; with the given array above:
I want to be able to. In this case I'd like to be able to display 3 different carousel in one page; then caraousel having 2 metadata per slides.
Related
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 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());
}
});
}
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