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.
Related
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 ;
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 { }
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
I'm trying to slide multiple divs of p tags from right to left (or vice versa) but instead of sliding them from right to left they are all showing up one after the other. How do i show just one and then slide the next from the left(or right) and so on?
thanks!
HTML:
<div id="slider">
<div class="slide1">
<p>Lorem ipsum dolor sit amet</p><br />
<ul class="actions">
<li><a href="#" class="button special big">Get
Details</a></li>
</ul>
</div>
<div class="slide2">
<p>Epes di ameb latota ed atem</p><br />
<ul class="actions">
<li>More Info
</li>
</ul>
</div>
</div>
Javascript:
setInterval(function () {
$('#slider').animate({right: "2000px"}, "slow", function () {
$('#slider img:first-child').appendTo('#slider');
$('#slider').css('right', '0');
});
}, 4000);
CSS:
#slider {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 500px;
height: 180px;
}
Here's an example of a carousel using Bootstrap. Change the data-interval value from 4000 to whatever time interval in milliseconds you'd like the images to transition in.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.hdwall.xyz/wp-content/uploads/2018/04/hdwall.xyz-Pink-Lowpoly-Abstract-Samsung-Galaxy-S9-Stock931866586-1280x720.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.vimeocdn.com/video/350636663_1280x720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://wallpapersite.com/images/pages/pic_w/8931.jpg" alt="Third slide">
</div>
</div>
</div>
</body>
</html>
More information and Bootstrap documentation here: https://getbootstrap.com/docs/4.0/components/carousel/
<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/