vitalii-andriiovskyi / ngx-owl-carousel-o Goto Github PK

Hi, if i don't resize my window items are not showing up

If item count is 3, result of the application count is one, it will displays as full view

Type script:
similar_listOptions: any = { loop: false, mouseDrag: true, touchDrag: true, pullDrag: true, dots: false, navSpeed: 700, margin: 20, navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'], responsive: { 0: { items: 1 }, 400: { items: 1 }, 600: { items: 2 }, 940: { items: 3 } }, nav: true }

<owl-carousel-o [options]="similar_listOptions" class="owl-slider"> <ng-container *ngFor="let similarlist_image of similarlist_images"> <ng-template carouselSlide [id]="similarlist_image.id"> <a routerLink="/sample/{{similarlist_image.id}}" class="d-block color-inherit"> <img [src]="similarlist_image.photo_id.list_photo"> </a> </ng-template> </ng-container> </owl-carousel-o>

Thanks in advance

The content of each item disapears when resize screen with this config:

carouselOpt: any = { loop: true, mouseDrag: false, touchDrag: false, pullDrag: false, dots: false, navSpeed: 700, navText: ['<img src="/assets/images/icons/angle-left.svg">', '<img src="/assets/images/icons/angle-right.svg">'], slideBy: 2, responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 4 }, 960: { items: 5 } }, nav: true };

<owl-carousel-o [options]="carouselOpt"> <ng-template carouselSlide [id]="item.ID" *ngFor="let item of items"> <div class="item-card-grid"> <div class="item-img"> <a routerLink="/item/{{ item.URL }}"><img src="{{ itemImg + item.ID_IMG }}.jpg" ></a> </div> <div class="look-content"> <a class="name" routerLink="/item/{{ item.URL }}">{{ item.NAME }}</a> </div> </div> </ng-template> </owl-carousel-o>

Hello,

I need to set startPosition of specific slide but it is not working.
The possible root cause is strict comparison in below line of code "return slide.id === cache.current;"

filter: ['width', 'items', 'settings'],
run: function (cache) {
/** @type {?} */
var current = cache.current ? _this.slidesData.findIndex(function (slide) { return slide.id === cache.current; }) : 0;
current = Math.max(_this.minimum(), Math.min(_this.maximum(), current));
_this.reset(current);
}

Please check and help me to get it resolved my issue.

Hello,
After the update I get this error now :
this.carouselService.getInitializedState is not a function

Is there an event which triggers when translate starts? i.e. when drag is finished

I know there is the translated event but it triggers when translate is finished (after the animation), I need to start an animation when the mouse is released when dragging.

I've tried using the change event, but I couldn't find how to get the next slide index or at least the direction the slide is going (SlidesOutputData.startPosition is always pointing to the current slide).

I found no possible way or am I missing something?

Hi, i am using your plugin for my website, but i can't build my project recently because npm run serve does not run correctly.

I have seen that in the repository there is a solution for this issue , but it is a solution oriented for an express server and in the project I am using a server with NestJS.

If you can give me a hand I would greatly appreciate it.

Hi!

I'm facing an issue when trying to implement this carousel in a gridster2 grid.
Gridster2 allows to create a dynamic grid, with containers that can be hidden, moved, ...

When I try to put this carousel in a container, all the items of the carousel are overlapped. I think that the owl-stage failed to calculate its width..

NB: Everything works fine outside this dynamic grid.

Thanks for your help!

I'm using Angular7 and version 1.x.x and have encountered some issues:

The newly updated dragging event doesn't work like it should.

• When dragging is stopped it doesn't always fire the event with { dragging: false }
• When clicking on a picture the dragging event is fired with { dragging: true } and no { dragging: false } ( there shouldnt even be a {dragging: true }-event)

View:

<div class="d-block gallery">
    <owl-carousel-o #gallery [options]="galleryOptions" (translated)="galleryTranslated($event)">
      <ng-container *ngFor="let slide of _images;let i = index;">
        <ng-template carouselSlide [id]="'gallery-slide-' + (i + 1)">
          <div class="w-100 d-block">
            <img class="blurred-background" [src]="slide.url" [alt]="slide.description" [title]="slide.filename">
            <img [src]="slide.url" [alt]="slide.description" [title]="slide.filename">
          </div>
        </ng-template>
      </ng-container>
    </owl-carousel-o>
    <div class="navigation-prev" (click)="gallery.prev()">
      <div class="icon" [inlineSVG]="'icons\\Icons\\left_carrot.svg' | assetLocation"></div>
    </div>
    <div class="navigation-next" (click)="gallery.next()">
      <div class="icon" [inlineSVG]="'icons\\Icons\\carrot.svg' | assetLocation"></div>
    </div>
  </div>
  <div class="d-block thumbnail-gallery">
    <owl-carousel-o #thumbnailGallery [options]="thumbnailGalleryOptions" (dragging)="onThmubnailDragging($event)"
      (change)="onThumbnailChanged($event)">
      <ng-container *ngFor="let slide of _images;let i = index;">
        <ng-template carouselSlide [id]="'thumbnail-gallery-slide-' + (i + 1)" [width]="240">
          <div class="w-100 d-block p-1 pt-2" (change)="!isDragging && onThumbnailClicked(i + 1)" style="cursor: pointer;">
            <img [src]="slide.url" [alt]="slide.description" [title]="slide.filename">
          </div>
        </ng-template>
      </ng-container>
    </owl-carousel-o>
  </div>

Component:

@ViewChild('gallery') public gallery: CarouselComponent;
@ViewChild('thumbnailGallery') public thumbnailGallery: CarouselComponent;

public galleryOptions: any = {
    center: false,
    autoHeight: true,
    autoHeightClass: 'owl-height',
    autoWidth: true,
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    dots: false,
    video: true,
    navSpeed: 700,
    nav: false,
    navText: ['', ''],
    items: 1,
    responsiveRefreshRate: 10,
    responsive: {
      0: {
        items: 1
      }
    }
  };

  public thumbnailGalleryOptions: any = {
    center: true,
    autoHeight: false,
    autoHeightClass: 'owl-height',
    autoWidth: true,
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: false,
    video: false,
    dots: false,
    stagePadding: 10,
    navSpeed: 700,
    nav: false,
    navText: ['', ''],
    items: 5
  };

onThumbnailClicked(event) {
    console.log('onThumbnailClicked', event);
    this.gallery.to('gallery-slide-' + event);
  }
  onThumbnailChanged(event) {
    console.log('onThumbnailChanged', event);
  }

  onThmubnailDragging(event) {
    console.log('onThumbnailDrag', event);
  }

I am using Angular Version 7 (latest), I Install your latest version using npm i ngx-owl-carousel-o @latest
command.

My HTML Source Code Is as:

<div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">
 
    <ng-container *ngFor="let row of instituteDetails.gallery">
      <ng-template carouselSlide [id]="row.photos_id">
        <img [src]="row.photos_name" >
      </ng-template>
    </ng-container>
 
  </owl-carousel-o>
  <div>Some tags after</div>

but I dont Know why this error is happened?

Hello! We have been using ngx-owl-carousel-0 in Angular and in Server Side Rendering with node.js (SSR) and have been happy with it's performance in our application. However, after upgrading to Angular 8 we've had some issues with this node module compiling into our SSR. From what I've been able to find looking at our server.js file (which we use to handle our SSR) and comparing it to the component I think I've found what's causing my specific error:

In "ngx-owl-carousel-o/libs/ngx-owl-carousel-o/src/lib/carousel/carousel.component.ts" lines 263-264 we have the following code:
@HostListener('document:visibilitychange', ['$event'])
onVisibilityChange(ev: Event) {

When it is compiled into server.js for use with SSR it outputs the following:
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["HostListener"])('document:visibilitychange', ['$event']),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Function),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Event]),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:returntype", void 0)
]

When you try to run the server.js after it gets compiled you get the error ReferenceError: Event is not defined it appears this is related to an issue with Angular Universal (click here for issue) where items like 'document', 'Document' (Angular typing), 'Event', and 'window' all have issues in SSR.

I've been part of a discussion where we were able to see another one of our issues ("Document is not defined") fixed by changing how private document variable was set in the application and then loaded in server.js (here is the issue discussion, here is the pull request for the fix).

I know also swapping the 'Event' type for 'any' would fix it as well but would like an official solution to the issue. This error prevents our server.js file from running killing not just server side rendering but the rest of our applications backend preventing us from being able to run. Thank you in advance for taking the time to review this issue and I hope we can come to a solution soon.

When I add more items for content array, they don't add to owl slides.
How can I refresh my carousel?
Version 1.0.0

Hi, I'm trying to implement two connected between each other sliders with infinite loop, but when I get to the last item and trying to select next - it rewind me back to the first, instead of moving forward.
Is there a way to handle this somehow? Maybe this problem appears in my case since I'm using click event with owl.to(index) when selecting slide?

Here's view example:

<owl-carousel-o [options]="categoriesOptions" #owlCat>
    <ng-container *ngFor="let category of categories.items; let i = index" >
      <ng-template carouselSlide [id]="category.id">
      <div class="category">
        <span (click)="slideTo(category.id)" class="category__title">{{category.displayedName}}</span>
      </div>
      </ng-template>
    </ng-container>
  </owl-carousel-o>

<owl-carousel-o [options]="carouselOptions" #owlMac  (changed)="changeSlide($event)">
    <ng-container *ngFor="let category of categories.items; let i = index" >
      <ng-template carouselSlide [id]="category.id">
        <div class="machine" *ngFor="let machine of machines; let index = index"
        [class.animated-cell]="index == animatedIndex"
        > </div>
      </ng-template>
    </ng-container>
  </owl-carousel-o>

And controller:

categoriesOptions: any = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    center: true,
    margin: 10,
    responsive: {
      0: {
        items: 4,
        loop: true,
      },
      400: {
        items: 4,
        loop: true,
      },
      740: {
        items: 4,
        loop: true,
      },
      940: {
        items: 4,
        loop: true,
      }
    }
  };

  carouselOptions: any = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    responsive: {
      0: {
        items: 1,
        loop: true,
      },
      400: {
        items: 1,
        loop: true,
      },
      740: {
        items: 1,
        loop: true,
      },
      940: {
        items: 1,
        loop: true,
      }
    }
  };

 slideTo(category: string) {
    this.owlMac.to(category);
  }

  changeSlide($event) {
    if (this.owlCat) {
      this.category$.next($event.slides[0].id);
      this.owlCat.to($event.slides[0].id)
    } 
  }

Thanks

Hi

I tried to migrate from "ngx-owl-carousel" to "ngx-owl-carousel-o" (2.0.1). However I have a lot of runtime issues when running my application in Ivy mode (Angular 9-next.5):

There are no slides to show. So the carousel won't be rendered.
 ERROR Error: Template error: Can't bind to 'ngClass' since it isn't a known property of 'div'
ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'div'
ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'ng-container'.

Hi,

The carousel is always in autoplay mode in angular 7, even if I set autoplay: false.
My configuration is:

        this.customOptions = {
            loop: false,
            checkVisible: false,
            rewind: false,
            margin: 10,
            nav: false,
            dots: false,
            slideBy: this.visibleNumberOfProducts,
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 3
                },
                1000: {
                    items: this.visibleNumberOfProducts
                }
            }
        };

Not sure what I'm doing wrong...

when I drag carousel sometimes <a> tag within div open automatically.

I think it should not open external tab until drag event already passed.

I edit some config from your demo.

customOptions: any = { items: '1', ... }

<div class="">
     <a href="https://google.com" target="_blank">
       <p>{{item.text}}</p>
     </a>
</div>

I try responsive mode and it work fine.

@vitalii-andriiovskyi

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 static slides:

<owl-carousel-o [options]="jsCarouselOptions">
        <ng-template carouselSlide>
          <li class="item">
            <div class="item2"></div>
            <h3 [textContent]="'home2' | translate"></h3>
          </li>
        </ng-template>
        <ng-template carouselSlide>
          <li class="item">
            <div class="item3"></div>
            <h3 [textContent]="'home3' | translate"></h3>
          </li>
        </ng-template>
        <ng-template carouselSlide>
          <li class="item">
            <div class="item3"></div>
            <h3 [textContent]="'home4' | translate"></h3>
          </li>
        </ng-template>
      </owl-carousel-o>

  jsCarouselOptions: 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
      },
      1024: {
        items: 3,
        mouseDrag: false
      }
    }
  };

In mobile mode I see one item and can scroll to other items as expected. However in full-screen mode I see two items and I have to scroll to view third item. I expect that all three items will be displayed at the same time.

Hi,

I would like to set stagePadding based on width so I need to set it in the responsive object but that doesn't seem to have any effect. Here is my config

{ loop: true, responsive: { 0: { items: 3, stagePadding: 30 }, 210 : { items: 2, stagePadding: 20 }, 254 : { items: 2, stagePadding: 50 }, 418: { items: 5, stagePadding: 50 }, 1000: { items: 6, stagePadding: 50 } }, dots: false, navSpeed: 1100, mouseDrag: true, touchDrag: true, pullDrag: true, nav: false };

Am I missing something?

Thanks for the great library!

I am trying to hide prev and next button but no luck so far.
If I set nav to false then it won't let me use my custom prev and next button i.e. owlCar.prev() and owlCar.next() has no effect after setting nav to false. Am I missing something, kindly help.

Thanks!

Hi,
I went through the library and couldn't find any method to control the click or tap on the slide. I needed to select a slide either by dragging or by tap, with hidden controls. I managed to bind a click event to the image in the slide with this method :

onSlideClick(id: any) {
if (this.currentPosition < id) {
this.owlCar.next();
} else if (this.currentPosition > id) {
this.owlCar.prev();
} else {
return;
}
}

I think it would be nice to have a click event different from the translated or dragged ones.

when set dots true in options
there is 2 row of that in view
anyone knows why?

Hi again.
Is it possible to have auto-width owl items
and the stage container to be the total of the widths ?

I tried to apply css on stage display:flex-inline and owl-itemswidth:auto
but the sliding does not move with the owl items size, it leaves an empty space
on the end of carousel, which I think is the sum of the items width subtracting
the stage width.

I am trying to put as much details as possible, but the idea is that the owl items
to have an auto width depending on their content, not the same width [ stage/number of owl items].

It is scaling the whole site. The no. of banner available on the page it is adding horizontal scrollbar all the way to the last banner. How do I fixed that ?

Hi,

Thanks for your effort porting owl carousel to Angular!
I would like to ask you to mark all the injection tokens: [ ActivatedRoute, Router ] as @optional
since it forces application to use "Angular Router" library even if it is not used in any case (like mine).

Also there exists dependency on "RouterModule" inside of "CarouselModule" that also should be revisited.

i have problem in change slides with drag and drop on rtl=true.
actually changed slides with this operation but , we must drop it at the end.
Thank you.

Having difficulties implementing Grid with the carousel, any suggestions or reasons why it wont work?
Check out my stackoverflow issue : https://stackoverflow.com/questions/56106891/grid-layout-for-owl-carousel

I was facing this issue only in one of my owl carousels,
every time I changed the window size the owl-items get removed.

<ng-template carouselSlide [id]="index">

when I removed the [id] they stooped disappearing,
also when I removed responsive option the bug didn't happen again.

Although there were no errors on my console.

first :
great product !
lazyLoad didn't work with ngx-owl-carousel so ngx-owl-carousel-o is the solution !!

The problem :

when I use you ngx-owl-carousel-o inside classic bootstrap row it works
when I use the same code into a modal the pictures don't appear
When I resize the window the picture appear.
So I send a resize event ... in ngAfterviewinit method. It works but that's not a good solution.

At the moment I still use ngx-owl-carousel-o because this is a good solution for lazyLoad option.
But if I could use modal it would be great.
(I need modal because it's a good solution to display fullscreen image on smartphones)

i have problem in change slides with drag and drop on rtl=true.
actually changed slides with this operation but , we must drop it at the end.
Thank you.

I always receive log like this when my carouselData has the only item.

  carouselData: CarouselData[] = [
    { id: 'slide-1', text: 'Slide 1 HM', dataMerge: 2, width: 300, dotContent: 'text1'}
  ];

I have image elements in html inspect (Angular 8.x.x) but doesn't show anything and get this error in console:
The option 'items' in your options is bigger than the number of slides. This option is updated to the current number of slides and the navigation got disabled

As in the title.

How can I implement 2 sliders in a single view?
I tried to do it but the second slider tells me that there are no slides to show

(click)="owlCar.to('id')" doesn't change slide
is there any other way?

<owl-carousel-o [options]="customOptions" #owlCar>
        <ng-container *ngFor="let image of product.images; let i = index">
            <ng-template carouselSlide [id]="product.id + i">
                <div class="gallery-item">
                    <a><img [src]="image" alt="Product"></a>
                </div>
            </ng-template>
        </ng-container>
    </owl-carousel-o> 
    <ul class="product-thumbnails">
        <li class="" *ngFor="let image of product.images | slice:0:5 ; let j = index">
            <a (click)="owlCar.to(product.id + j)">
                <img [src]="image" alt="Product.title"></a>
        </li>
    </ul>

I'm having trouble changing the options of the owl carousel after the setup. Any update i make to the options doesn't seem to change anything.

The code i have tried

@ViewChild('owl') owl: CarouselComponent;
.....
this.owl.options.mouseDrag = false; (initial is true)
this.owl.options = {mouseDrag: false, ...}

Hi,

Thank you for this carousel.

I have a problem with your module, after I imported it, I’m getting:

BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

I think is because of: BrowserAnimationsModule

Thank you

there is an issue with ngx-owl-carousel.js located in fesm2015 folder.
in angular onDestory you are not allowing enough time if component is called from inside a directive or another component - it's a simple fix as denoted below. Please update.
ngOnDestroy() { if (this.resizeSubscription) { this.resizeSubscription.unsubscribe(); } if(this._slidesChangesSubscription){ this._slidesChangesSubscription.unsubscribe(); } if (this._allObservSubscription){ this._allObservSubscription.unsubscribe(); } }

original file
` ngOnDestroy() {
if (this.resizeSubscription) {
this.resizeSubscription.unsubscribe();
}

    this._slidesChangesSubscription.unsubscribe();
    
 
    this._allObservSubscription.unsubscribe();
    
}`

Currently slideTransition property is missing from OwlOptions. Is there any plan to add it?

Hi, autoplay doesn't renew on mouse leave. Can you fix that issue?

In Edge Browser the owl-dots are shown with null written behind them. The null is written in span tag. it is not happening in chrome.

\<div class="owl-dot active ng-star-inserted" _ngcontent-c5=""> <span _ngcontent-c5="">null</span> \</div>"

Could OwlOptions be exported in public_api so that import { OwlOptions } from 'ngx-owl-carousel-o' could be possible?

Currently this is only possible with import { OwlOptions } from 'ngx-owl-carousel-o/lib/models/owl-options.model'...

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.

Hi, I am trying to create an angular animation for a card component, but it is not working with the events emitted by the slider.

To create the angular state animations, I would need an event based on any change of the slider (dragging or clicking on the dots) and the state of the slide data (what slide is active).

I tried to use the current events, but when the user uses the dragging, but it doesn't complete the action it doesn't work.

Maybe that's something that you can help me with.

Thanks.

Hello everyone,

Could you help to check it that. it did not work when I add that owl-carousel inside mat-tab-group and mat-tab.

Thank

personally I think Item Margin option can be useful :)
anyway css solutions still can help :)

Why owl-carousel.js doesn't have to install global?
I look in your source code but I don't see any owl-carousel.js, so I am just curious why I don't have to install owl-carousel.js before use this lib.

thanks.

Hi,

When we slide the images, get the current active images details. If I got the ID like this

getPassedData(data: CarouselModule) {
this.activeSlides = data;
const image_id = this.activeSlides.slides[0].id;
}

But it shows error like below

thanks

Hi again,

I'm using your carousel in combination with the intersection observer pattern. I'm following the Ben Nadel implementation at https://www.bennadel.com/blog/3366-lazy-loading-images-with-the-intersectionobserver-api-in-angular-5-0-0.htm
For whatever reason in safari in combination with a polyfill from W3C it works, but in chrome it does not. In safari, as soon as I scroll down, images are being shown as soon as they are visible because of the scroll.

In chrome it does not work. It shows images of visible carousels, but non-visible carousel keeps without images even if they become visible.

Do you have any clue about what could be happening?
Whatever help will be appreciated

Here is an image of carousels once they are shown. Images are not being shown:

Change detection in Angular 6 does not trigger re-rrendering of carousel if slide data array changes

The big slider 1 item page screen is working fine but I would like to have a small thumbnail at bottom so when I click on that thumbnail it goes to specific image.

How can I do this ?

    <owl-carousel [options]="owlConfig" [items]="bannerList" [carouselClasses]="['bannerList','owl-theme', 'row', 'sliding']">
        <div class="item banner-items" *ngFor="let item of bannerList">
             <app-banners></app-banners>
        </div>
    </owl-carousel>
</div>```

`@ViewChild('owlElement1', {static: true}) owlElement: OwlCarousel
  bannerList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  owlConfig = {
    items: 1,
    dots: false,
    nav: true,
  }`