Bootstrap Slides Lagging While Using Multi Item Carousel Using Angular 6

Bootstrap Slides lagging while using multi item carousel using angular 6

Based on your example code, it looks like simplifying the Bootstrap code itself to use the standard carousel is the best approach. The link below is a fork of the example you provided with the following changes:

https://stackblitz.com/edit/angular-yaevix

• Removed all custom DOM manipulation on prev/next/etc. from your javascript so it's using the Bootstrap carousel component to do everything
• Removed the CSS that was trying to adjust the animation and placement of the cards
• Added quick and dirty placement of next/prev icons (you can style this as you see fit)

You have each card set as a carousel-item but in your description you want to paginate 3 at a time. The correct approach here is to have one carousel-item for every three cards. See example below

Example of one carousel item with multiple cards:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">Card 1</div>
                </div>
                <div class="col-md-4">
                    <div class="card">Card 2</div>
                </div>
                <div class="col-md-4">
                    <div class="card">Card 3</div>
                </div>
            </div>
        </div>
        <div class="carousel-item active">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">Card 4</div>
                </div>
                <div class="col-md-4">
                    <div class="card">Card 5</div>
                </div>
                <div class="col-md-4">
                    <div class="card">Card 6</div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">Card 7</div>
                </div>
            </div>
        </div>
    </div>
</div>

The items repeat itself in a dynamic multiple slide carousel using Angular

it's a bit complex, the carousel duplicate the images to allow show a bit in both sides when the size is less than the whole size.

The solution is store in an array the "duplicated templates"

Declare an empty array

 added:EmbeddedViewRef<any>[]=[]

And, when add a "template" use push to add to the array and if "noCarousel" remove it

  private resizeCarousel() {

    if (this.carousel) {
      let totalWidth = this.carousel.nativeElement.getBoundingClientRect().width;
      if (totalWidth > this.slides.length * this.slideWidth) {
        ....
        this.noCarousel = true;
        this.added.forEach(x=>x.destroy())
        return;
      }
      this.noCarousel = false;
      ...
      this.slides.last.viewContainer.createEmbeddedView(
        this.slides.last.templateRef
      );
      this.slides.forEach((x, index) => {
        if (index && index >= this.slides.length - this.increment - count) {
          this.added.push(
            this.slides.first.viewContainer.createEmbeddedView(x.templateRef)
          );
        }
        if (index < this.increment + count) {
          this.added.push(
            this.slides.last.viewContainer.createEmbeddedView(x.templateRef)
          );
        }
      });
      if (this.increment + 1 >= this.slides.length) {
        this.added.push(
          this.slides.first.viewContainer.createEmbeddedView(
            this.slides.first.templateRef,
            null,
            0
          )
        );
      }

      this.slides.first.viewContainer.createEmbeddedView(
        this.slides.first.templateRef
      );
      this.currentSlide = 0;
      this.transitionCarousel(0, this.currentSlide);
    }

I forked your stackblitz here

NOTE: Really is a bit old stackblitz, I'm not prety sure if it's the best solution to make a carousel (If I have a time, I'll try to checked more)

How can I control the speed that bootstrap carousel slides in items?

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that.
In the carousel.less file find

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

and change .6s to whatever you want.

---

In case you do not use .less, find in the bootstrap.css file:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

and change 0.6s to the time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000) 

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

EDIT 7/8/2014

As @YellowShark pointed out the edits in JS are not needed anymore. Only apply css changes.

EDIT 20/8/2015
Now, after you edit your css file, you just need to edit CAROUSEL.TRANSITION_DURATION (in bootstrap.js) or c.TRANSITION_DURATION (if you use bootstrap.min.js) and to change the value inside it (600 for default). The final value must be the same that you put in your css file( for example 10s in css = 10000 in .js)

EDIT 16/01/2018
For Bootstrap 4, to change the transition time to e.g., 2 seconds, add

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

to your site's JS file, and

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

to your site's CSS file.

Bootstrap carousel transition glitch

If you remove the transition css from the .carousel-control.left and .carousel-control.right that seems to fix the problem.

Tested in FF and Chrome.

---

Related Topics