Angular does not support optional host-element and containerless components so it means every component has its own (div) wrapper but for designing Bootstrap components we need a host-less component (without extra div) to help Bootstrap find its pre-defined structure. (in some use cases especially internal components like inputgroup-text or carousel-item)
An annoying div that destroys the internal structure of Bootstrap for internal Angular components.
I want to know do you have a design suggestion to create Angular components like below?
Bootstrap 5
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
Angular components
<bs-inputgroup class="mb-3">
<bs-inputgroup-text>$</bs-inputgroup-text>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<bs-inputgroup-text>.00</bs-inputgroup-text>
</bs-inputgroup>
Or
Bootstrap 5
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Angular components
<bs-carousel>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
</bs-carousel>
Is it possible to convert each part of Bootstrap 5 to an Angular component without a containerless/host-less feature?
I don't want to use directives just components so please consider that.
Try disabling angular view-encapsulation and see if that works: https://angular.io/guide/view-encapsulation
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
Related
I have tried several examples but nothing seems to be working. The typescript code doesn't work as intended in Vue.js as no implementation online uses ts. The modification is necessary as bootstrap works only with one item at a time. The idea is to create several wrap items and each one being displayed at a time.
I wanna just show 3 items (like the attached image) in my app. My code uses a lifecycle handler which is supposed to get the "card" elements onUpdated and create several "carousel" wrap items. Each wrap item will include 3 "card" elements but each card element will be different according to the displaying queue. E.g Wrap [1] - { 1,2,3} , Wrap [2] - {2,3,4} , Wrap [3] - {3,4,5}, Wrap [4] - { 4,5,1}, Wrap [5] - {5,1,2}
The following image is an inspection of a code found online [1]: https://i.stack.imgur.com/cCI2q.png
The following code is my implementation:
This is my representation however the buttons don't work properly https://i.stack.imgur.com/3Tx0R.png
<template>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 1</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 2</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 3</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 4</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 5</h5>
</div>
</div>
</div>
</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>
</template>
<script setup lang="ts">
import { onUpdated } from 'vue'
onUpdated(() => {
let carouselItems = document.querySelectorAll('.carousel .carousel-item')
carouselItems.forEach(el => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
next = carouselItems[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.firstChild!)
next = next.nextElementSibling
}
})
})
</script>
[1]: https://i.stack.imgur.com/3Tx0R.png
Is there a way to add a number for the current slide and total slides to the following carousel example using Bootstrap 5? The counters are represented in the carousel-pager div below, with pager-current being the current slide number, and pager-total being the total number of slides.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-pager">
<div class="pager-current">00</div>
<div class="pager-total">00</div>
</div>
</div>
sett up :
var imgs = [].slice.call(document.getElementsByClassName('container')[0].getElementsByTagName('*'),0);
document.getElementsByClassName('total')[0].innerHTML = imgs.length ;
//create a global variable
var currentImg = 1;
and add this to anything that changes the current img like a button or a timer ...:
document.getElementsByClassName('pager-current')[0].innerHTML = (++currentImg) % imgs.length ;
I'm trying to create a Bootstrap Carousel with a video in the first slide. Everything is working as expected except that the carousel does not take the data-interval into account on the first run of the first slide. When we go back to the slide from another one, it works as expected.
I did a minimal repro here:
https://www.codeply.com/p/avdtdpw8ie
We can see that the first slide gets displayed for about 1 second on the first run, but on its second run it gets displayed for 5 seconds as defined by the data-interval attribute.
Instead of using the data-interval attributes directly on the HTML, you can set the interval using jQuery. This will trigger the Carousel once it's loaded:
$('.carousel').carousel({
interval: 1000
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 400px; height: 300px">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://picsum.photos/400/300" />
</div>
</div>
</div>
More info here.
I'm trying to get the slide/total count and got it working somehow. However, when I click next and it goes back to the original first slide, it doesn't show 1/4 but it remains 4/4.
JSFiddel: https://jsfiddle.net/zorw7yLe/
HTML:
<div class="num"></div>
<a class="next" href="#carouselExampleIndicators" role="button" data-slide="next"> -->>></a>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item item active">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
<div class="carousel-caption">
<h5>Title of the first image</h5>
<p>Some description of the first image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
<div class="carousel-caption">
<h5>Title of the second image</h5>
<p>Some description for the second image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
<div class="carousel-caption">
<h5>Title of the third image</h5>
<p>Some description for the third image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Fourth slide">
<div class="carousel-caption">
<h5>Title of the fourth image</h5>
<p>Some description for the fourth image</p>
</div>
</div>
</div>
</div>
JS:
var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$(".next").click(function(){
currentIndex_active = $('.carousel-item.active').index() + 2;
if (totalItems >= currentIndex_active)
{
down_index= $('.carousel-item.active').index() + 2;
$('.num').html(''+currentIndex_active+'/'+totalItems+'');
}
});
I suggest you use bootstrap carousel events, you don't need to watch the click directly on your link :
https://getbootstrap.com/docs/4.0/components/carousel/#events
var totalItems = $('.carousel-item').length;
$('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
$('.num').html((e.to+1)+'/'+totalItems);
});
So your counter will keep track of the current slide
Also, your counter doesn't come back to 1/4 because of your condition (totalItems >= currentIndex_active), at the last slide if you add +2 on your index, that's 5, which is higher than totalItems (4)
You'll need a else to eventualy get the right number, but just use the bootstrap events
<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
<!-- Wrapper for slides -->
<div id="myNewCar" class="carousel-inner" style="height: 100%; ">
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
</div>
</div>
</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>
I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image
Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
to:
<div class="carousel-item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):
https://getbootstrap.com/docs/4.0/components/carousel/