No sliding with dynamic slides

[sergey-morenets]

Hi

I tried to migrate from "ngx-owl-carousel" to "ngx-owl-carousel-o" (2.0.1). However there're some issues which prevent such migration:

I have dynamic slides:

<ul class="item3">
      <owl-carousel-o [options]="carouselOptions">
        <ng-container *ngFor="let item of items">
          <ng-template carouselSlide>
            <li class="item">
              <div class="item2">
                <p [textContent]="item.text"></p>
              </div>
            </li>
          </ng-template>
        </ng-container>
      </owl-carousel-o>
    </ul>

 carouselOptions: any = {
    loop: false,
    autoWidth: false,
    margin: 0,
    dots: false,
    navText: ['<i class=\'icon-arrow-left\'></i>',
      '<i class=\'icon-arrow-right\'></i>'
    ],
    nav: true,
    responsive: {
      0: {
        items: 1,
        dots: true
      },
      768: {
        items: 2,
        margin: 5
      },
      1024: {
        items: 3,
        margin: 45,
        mouseDrag: false
      }
    }
  };

In full-screen mode two items are displayed correctly. When I switch to mobile mode I see only one item and no arrows to scroll as expected.

[vitalii-andriiovskyi]

Hi @sergey-morenets.

Sorry for the late answer. You see just one item in mobile mode because of your settings:

responsive: {
     0: {
       items: 1,
       dots: true
     },
     768: {
       items: 2,
       margin: 5
     },
     1024: {
       items: 3,
       margin: 45,
       mouseDrag: false
     }
   }

For the cases when <ul class="item3"> has the width between 0-767px, the carousel shows 1 slide. If you want to show more than 1 slide then set the option items to 2 and so on:

 0: {
       items: 2,
       dots: true
     },

Also take this in to account: all responsive breakpoints are corresponding to the width of the element <div class="owl-carousel"> which takes 100% of its parent element width. In your case that parent element is <ul class="item3">. This means that if <ul class="item3"> in full screen mode has the width of 500px then the number of active or visible slides will be just 1.

The problem with arrows: It works in my case well. Maybe you need to investigate the html and css of your implementation. Find <i class="icon-arrow-left"></i> and check its css.

[sergey-morenets]

Hi @vitalii-andriiovskyi

Finally I investigated why dots were missing on the page. The main reason was the nature of items property:

<ul class="item3">
<owl-carousel-o [options]="carouselOptions">
        <ng-container *ngFor="let item of items">
          <ng-template carouselSlide>
            <li class="item">
              <div class="item2">
                <p [textContent]="item.text"></p>
              </div>
            </li>
          </ng-template>
        </ng-container>
      </owl-carousel-o>
</ul>

If items were statically created (in constructor, for example) then dots were present and navigation worked properly. If items were loaded from external services (HTTP) then dots were absent. I found very simple workaround:

<ul class="item3" *ngIf="items">

But I guess it should be mentioned somewhere in the documentation.