I'm trying to build a bootstrap carousel to show some product images I get from an API.
I create a div for the first image with the class "active"
Then I loop to add the other images without that class (at the beginning I did the for with all the images but they all get the class active so it didn't work).
I'm pretty sure there should be a more elegant way to do this but i haven't found it yet.
Here is the code:
HTML:
<div class="list-group" id="product-container"> </div>
JS:
function showProduct(){
let product = currentProduct
productContainer.innerHTML = `
<div class="list-group-item">
<h1> ${product.name}</h1>
<hr>
<div class="col">
<div class="container">
<div class="justify-content-between">
<h4 class="mb-1"> Precio </h4>
<p> ${product.currency} ${product.cost}
</div>
<div class="justify-content-between">
<h4 class="mb-1"> Descripción </h4>
<p> ${product.description}
</div>
<div class="justify-content-between">
<h4 class="mb-1"> Categoría </h4>
<p> ${product.category}
</div>
<div class="justify-content-between">
<h4 class="mb-1"> Cantidad de Vendidos </h4>
<p> ${product.soldCount}
</div>
<div class="justify-content-between">
<h4>Imágenes Ilustrativas</h4>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-images">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>`;
appendImages()
};
function appendImages(){
let imagesDiv = document.getElementById("carousel-images");
product = currentProduct;
let HTMLContentToAppend = `
<div class="carousel-item active">
<img src="${product.images[0]}" class="d-block w-100" alt="${product.name}">
</div>`;
for (let i = 1; i<=product.images.length; i++){
HTMLContentToAppend +=`
<div class="carousel-item">
<img src="${product.images[i]}" class="d-block w-100" alt="${product.name}">
</div>
`
}
imagesDiv.innerHTML = HTMLContentToAppend;
} ```
I dont really understand what happens when i press the buttons of the caroussel so i think this problem is related to the unelegant way in which i added the images. Thanks and any comment to optimize my code is wellcome! :)
Related
I tried design a Web Page.
I am using carousel.
The Left and Right options doesn't work, Instead all the images gets added on the Vertical Manner.
<h3 style="text-align:center;">Top Visiting Sites</h3>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="row" id="Places">
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
This is what i have used on html.
And this is the Js I have used.
for (var i = 0; i < total.length; i++) {
var stars = '<i class="glyphicon glyphicon-star"></i>';
var obj = sort[i];
$('#Places').append(`
<div class="carousel-item active">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
`); }
You are adding all of your elements inside of the div with the class="item active". You need to add them to the carousel-inner div, each in a separate div with only the "item" class.
Your end result should look like this :
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- html of your first item -->
</div>
<div class="carousel-item">
<!-- html of your second item -->
</div>
<div class="carousel-item">
<!-- html of your third item -->
</div>
<div class="carousel-item">
<!-- html of your fourth item -->
</div>
</div>
</div>
The content inside append function misses the ending quote. Please check that.
$('#Places').append('
<div class="carousel-item">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
');
Can you try and see whether the above with end quote works?
You should also have your carousal-inner class id as Places and remove the class=row div
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner" id="Places">
</div>
</div>
Also remove active class as it should be set only on the first item, which you can do separately.
Below is my carousel slider inside repeater which is not working.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<asp:Repeater ID="Repeater_Attendance" runat="server">
<ItemTemplate>
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
</div>
<!-- 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>
Below is my html slider which working fine.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
I am getting below image output when i will use using repeater but using html working fine.
Please help i am trying using repeater for dynamic fetching data of images please help to out this issue thank you very much.
To display dynamic data, a repeater must be bound to some sort of data source for that dynamic data, and your code doesn't show where you are doing that. If you are, you should add that code to your question.
If you are not binding to a data source, that's probably why nothing is showing up. Without a data source, no items are ever getting added to the repeater, and the ItemTemplate will never be used, so you won't see any of that content from the ItemTemplate.
i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>
That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();
Total 20 Images, I have to show 9 items in each slider so total 3 slider.
I tried this following link
Four items in bootstrap carousel Ng repeat?
<div class='greybg' ng-repeat="comment in location.comments">
<div class="row">
<div id="myCarousel{{location.comments[0]._id}}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner multiple_pictures" >
<div class="item" ng-class="{active:!$index}">
<div class="row" >
<div class="col-sm-4" ng-repeat="images in comment.images.slice(0,9)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(9,18)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+9}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(18,27)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+18}}</div>
</div>
</div>
</div>
<a ng-if="comment.images.length>1" class="left carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a ng-if="comment.images.length>1" class="right carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div></div></div>
But the image count will be dynamical so If am having 50 image means 6 times I have to write. How do i do this dynamically based upon image count.
I am building a web App using Angular 2 and want to loop the button with the list items but outside of list items, how can I get the functionality using *ngFor, please help.
My HTML code:
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right" >
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6"> <-----I WANT TO LOOP THIS BUTTON
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
Try this code snippet. I have created a div tag above linking both content and then added the loop inside that, so it will refer to both elements (item and button).
<div *ngFor="let buying of buy">
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right">
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
</div>