I am working on an RSS feed-based project where I have to render accordions dynamically using DOM manipulation.
It works fine on opening an accordion but does not get closed on toggling on the same accordion.
Here's my function for rendering Accords based on some response data
const renderAccordionSection = (index, id, title) => {
let divAccordion = `<div class="accordion-item">
<button class="accordion-button ${index === 0 ? "" : "collapsed"}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${id}" aria-expanded="true" aria-controls="collapse-${id}">
${title}
</button>
<div id="collapse-${id}" class="accordion-collapse collapse ${index === 0 ? "show": ""}" aria-labelledby="heading-${id}" data-bs-parent="#accordionId">
<div class="accordion-body">
<div id="indicator-${id}" class="carousel slide " data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-inner-${id}">
</div>
<div>
<a class="carousel-control-prev" href="#indicator-${id}" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="carousel-control-next" href="#indicator-${id}" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>`;
return divAccordion;
}
Ignore the accordion body.
and an id "accordionId" is used to place the accords
What could be the problem?
I tried changing the bootstrap attributes but didn't work. Could use some help.
Related
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! :)
I am trying to make a carousel.
This carousel image gets its imagepath string from a string array.
when i click left or right arrow I want it to increase or decrease index, so i can change image which is shown.
how can i mak this happen.
NO ts code allowed, only html can be used.
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<ul *ngFor="let carImagePath of carImagePaths; let i= index;first as isFirst">
<div [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' ">
<li><img [src]="imageUrl+carImagePath" class="d-block w-100" alt="..."></li>
</div>
</ul>
</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>
As a solution i gave up trying to use normal bootstrap carousel. I tried angular bootstrap carousel. ng add ngx-bootstrap --component carousel . intallled this to terminal. and used it own html from via this site:
https://valor-software.com/ngx-bootstrap/#/components/carousel?tab=overview
Now it is working.
I have a click function that opens a modal and the object's uuid, after I changed the tag where the function was in the html it stopped working, what can it be?
ps: I had to put the icon in the middle of the carousel-slider to make it appear on the screen
my function and my html:
openBannerDeleteModal(uuid ? : string): void {
if (!uuid) return;
const width = innerWidth <
1024 ? '100%' : '40%';
const dialogRef = t his.matDialog.open(BannerDeleteComponent, {
height: '20%',
width: width,
data: {
uuid: uuid,
},
});
dialogRef.afterClosed().subscribe(async(result) => {
if (result) this.banners = await this.BannerService.getBanner();
window.location.reload();
});
}
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<i (click)="openBannerDeleteModal(banner.uuid)" *ngIf="isAdminFlag==='true'" class="fas fa-trash-alt delete-modal" id="banner-delete" aria-hidden="true"></i>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The previous version was:
<div class="carousel-inner">
<div class="banner carousel-item {{ i === 0 ? 'active' : '' }} it-1" *ngFor="let banner of banners; let i = index">
<div id="tilt" class=" tiltElement carousel-caption">
<i (click)="openBannerDeleteModal(banner.uuid)" *ngIf="isAdminFlag==='true'" class="fas fa-trash-alt delete-modal" id="banner-delete" aria-hidden="true"></i>
<div class="vertical-line"></div>
<div>
Most probably you are not able to click on the icon itself, you can see the icon but there might be a transparent element covering it, you can check if this is the case with with highlighter
I'm having problem displaying an active image from carousel to my 2nd div when I click next/ previous. Looks like it's delayed when I click next/ previous.
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2">
</div>
For the benefit of those who are looking for an answer for a question/ problem like this one, I was able to solve my own problem by adding an onload="strapActiveImage()" to the image tag (where display is happening). Here is the code:
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()">
</div>
This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 4 years ago.
I have this Bootstrap Carousel which shows 2 item each in Desktop view. However, I want to show one item at a time in Mobile view. How can I achieve this?
https://jsfiddle.net/v9t2pz9b/
HTML
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-6">
block1
</div>
<div class="col-sm-6">
block2
</div>
</div>
<div class="item">
<div class="col-sm-6">
block3
</div>
<div class="col-sm-6">
block4
</div>
</div>
<div class="item">
<div class="col-sm-6">
block5
</div>
<div class="col-sm-6">
block6
</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>
</div>
JS:
$(document).ready(function(){
$("#myCarousel").carousel();
});
Something like as this shown in the design. I want to show only one slide at a time in mobile:
$(document).ready(function(){
$("#myCarousel").carousel();
if ( $(window).width() < 640 ) {
$('.col-sm-6').unwrap().addClass('item');
$('.col-sm-6:first').addClass('active');
}
});
Where 640 is your mobile breakpoint. Check out unwrap() , it removes the element's parent while not affecting its content.