mujtaba01 / ngx-owl-carousel Goto Github PK

Are there any plans to make this library compatible with Angular Universal?

When setting the navigation to true, the "next" and "prev" buttons do not show.

app.module.ts (9,27): Cannot find module 'ng2-owl-carousel'.)

when I install and import it to appmodule.ts error happened

using angular-cli to create project

I have a list of file-components. In which I am using this own-carousel. Each file component has some pages to display which will come in the same carousel component. There are number of file components. The problem is whenever any file component gets added, this error comes:

core.es5.js:1020 ERROR TypeError: Cannot read property 'trigger' of undefined
    at OwlChild.webpackJsonp../node_modules/ngx-owl-carousel/src/owl-child.component.js.OwlChild.trigger (owl-child.component.js:23)
    at OwlCarousel.webpackJsonp../node_modules/ngx-owl-carousel/src/owl-carousel.component.js.OwlCarousel.trigger (owl-carousel.component.js:64)
    at selections-document.component.ts:44
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499)
    at ZoneTask.invoke (zone.js:488)
    at timer (zone.js:1896)

I am refreshing all the carousels when a file-component gets added.

Hi, i would like to ask if something like this is possible? I am currently working on this. Any help? I really appreciate it.

<div>
    // i would actually like to put the image.preview here
</div>

<ng2-owl-carousel2
     [options]="carouselOptions">
            <div class="owl-item" *ngFor="let image of carousel; let i = index">
                <img [src]="image.cover" alt="image.title">
                 // it has image.preview
            </div>
 </ng2-owl-carousel2>

Thanks,
Best Regards, Lex

i am updating carousel using api call. any option available to re init after api call ?

i am trying this for the first time, and did everything as the steps suggested, do i have to map this to systemjs file too?

I have the following piece of code

<owl-carousel [options]="owlOptions" [items]="slides" [carouselClasses]="['owl-theme', 'row', 'sliding','ml-auto','mr-auto']" #owlElement>
  <div class="item" *ngFor="let image of slides" (click)="changeMainSlide(image)">
    <div class="nav-content text-white text-capitalize">
      <h6 class="mb-0">
        <small class="d-block">{{image.date | date:'dd MMM'}} <span class="badge badge-pill badge-light text-uppercase small">{{image.type}}</span></small>
        <span class="animated fadeIn">{{image.artistInfo}}</span>
      </h6>
      <small class="d-block"><strong>{{image.plainAddress}}</strong></small>
    </div>
    <img src="{{image.images.slider}}" />
  </div>
</owl-carousel>

The click event fires only when I click the slides that are in view, and not the ones off the stage. My owlOptions also has loop: true set, could this have a possible impact?

Hello, I'm trying to implement your ng2-owl-carousel wrapper, however, when I apply a class of owl-fadeInDown or owl-fadeInUp to a div inside one of the slides. Instead of animating it, as can be seen here: http://themelooks.us/demo/matroz/html/default/ It instead just hides that element and no animation ever happens... any clue why?

Of course that example is using the pure owl-carousel, without the ng2 wrapper. However I purchased it and am trying to implement it using ng2... but that does not work...

when i use ng build the blow error occurred

<owl-carousel [ERROR ->][items]="images" [carouselClasses]="['owl-theme', 'sliding']">

<owl-carousel [items]="images" [ERROR ->][carouselClasses]="['owl-theme', 'sliding']">

Unhandled Promise rejection: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("

        <owl-carousel
            [ERROR ->][options]="{items: 3, dots: false, navigation: false}"
            [items]="items"
          "): MostViewedComponent@11:16
   

Can't bind to 'items' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'items' input, then verify that it is part of this module.

2. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("owl-carousel
   [options]="{items: 3, dots: false, navigation: false}"
   [ERROR ->][items]="items"
   [carouselClasses]="['owl-theme', 'row', 'sliding']">
   "): MostViewedComponent@12:16
   Can't bind to 'carouselClasses' since it isn't a known property of 'owl-carousel'.

3. If 'owl-carousel' is an Angular component and it has 'carouselClasses' input, then verify that it is part of this module.

4. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("tions]="{items: 3, dots: false, navigation: false}"
   [items]="items"
   [ERROR ->][carouselClasses]="['owl-theme', 'row', 'sliding']">
   <div class="item" *ngFor="let it"): MostViewedComponent@13:16
   'owl-carousel' is not a known element:

5. If 'owl-carousel' is an Angular component, then verify that it is part of this module.

6. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   

        [ERROR ->]<owl-carousel
            [options]="{items: 3, dots: false, navigation: false}"
            "): MostViewedComponent@10:12 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
   

Can't bind to 'options' since it isn't a known property of 'owl-carous……} Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("

        <owl-carousel
            [ERROR ->][options]="{items: 3, dots: false, navigation: false}"
            [items]="items"
          "): MostViewedComponent@11:16
   

Can't bind to 'items' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'items' input, then verify that it is part of this module.

2. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("owl-carousel
   [options]="{items: 3, dots: false, navigation: false}"
   [ERROR ->][items]="items"
   [carouselClasses]="['owl-theme', 'row', 'sliding']">
   "): MostViewedComponent@12:16
   Can't bind to 'carouselClasses' since it isn't a known property of 'owl-carousel'.

3. If 'owl-carousel' is an Angular component and it has 'carouselClasses' input, then verify that it is part of this module.

4. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("tions]="{items: 3, dots: false, navigation: false}"
   [items]="items"
   [ERROR ->][carouselClasses]="['owl-theme', 'row', 'sliding']">
   <div class="item" *ngFor="let it"): MostViewedComponent@13:16
   'owl-carousel' is not a known element:

5. If 'owl-carousel' is an Angular component, then verify that it is part of this module.

6. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   

        [ERROR ->]<owl-carousel
            [options]="{items: 3, dots: false, navigation: false}"
            "): MostViewedComponent@10:12
   

   at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:1024:33)
   at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:99977:16)
   at new SyntaxError (http://localhost:4200/vendor.bundle.js:11079:16)
   at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:25405:19)
   at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:61775:68)
   at http://localhost:4200/vendor.bundle.js:61658:62
   at Set.forEach (native)
   at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:61658:19)
   at createResult (http://localhost:4200/vendor.bundle.js:61540:19)
   at ZoneDelegate.webpackJsonp.1227.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:455:26)
   at Zone.webpackJsonp.1227.Zone.run (http://localhost:4200/polyfills.bundle.js:326:43)
   at http://localhost:4200/polyfills.bundle.js:748:57
   at ZoneDelegate.webpackJsonp.1227.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:488:35)
   at Zone.webpackJsonp.1227.Zone.runTask (http://localhost:4200/polyfills.bundle.js:364:47)
   at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:646:35)
   consoleError @ zone.js:420
   _loop_1 @ zone.js:449
   drainMicroTaskQueue @ zone.js:453
   zone.js:422 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Template parse errors:
   Can't bind to 'options' since it isn't a……}

How can I move previous and next div out of component section.
Please enable wiki, so that we can update these answers there.
Thanks.

Hi,

how do I retrieve the direction of a drag, dragged, translate or translated event?

getting a blank slide while using array.

<owl-carousel [options]="{items: 1,
dots: true,
nav: true,
loop: true,
responsiveClass:true,
autoplay:false,
margin:15}"
[items]="carousels"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let carousel of carousels;let i = index">
<img src="{{ carousel.slider_image }}" alt="{{ carousel.slider_title }}" />
</div>
</owl-carousel>

When using the refresh() method the view makes some annoying things like the following GIF I've made for this issue:

This happens because we've a refresh() method that turn off the view and then turn it on using *ngIf.

I'm using your component in aspnetcore-angular2-universal project in my site. I have issue when add the component into the other component view. So the variable which is set in code behind stopped to refresh the value into the view:
In. ts file: public isBrowser = isPlatformBrowser(this.platformId); //cheched that is true in ngOnInit state
print the variable in .html view: {{isBrowser}}. In the view with carousel the value is false, without is correct - true.

More info in this issue:
TrilonIO/aspnetcore-angular-universal#552

Hi,

I'm facing this error when calling this.owlElement.next([200]) to refresh the owl component:

ERROR TypeError: Cannot read property 'trigger' of undefined
    at OwlCarousel.webpackJsonp.376.OwlCarousel.trigger (owl-carousel.component.js:64)
    at OwlCarousel.webpackJsonp.376.OwlCarousel.next (owl-carousel.component.js:55)
    at LoginComponent.webpackJsonp.388.LoginComponent.updateOwl (login.component.ts:88)
    at login.component.ts:41
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4116)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at ZoneTask.invoke (zone.js:460)
    at timer (zone.js:1655)

The component actually gets refreshed only if the clicks anywhere on the page. Any ideas?

How to listen to Owl Carousel 2 Events?

I have tried something like this:

ngAfterViewInit() {
  const owl = $(this._elementRef.nativeElement).find('owl-carousel-child').data('owl.carousel');
  owl.on('onResize, onResized, onInitialize, onInitialized, onChange, onChanged, onDrag', console.log);
}

But nothing triggered

Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'owl-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   
   
   <owl-carousel
   [ERROR ->][options]="{items: 3, dots: false, navigation: false}"

I'm trying to make it responsive ( [options]="{ ... , responsive: true }" ) but I get error !
how can I do it ?

owl.carousel.js:1658 Uncaught TypeError: Cannot read property 'fn' of undefined
at owl.carousel.js:1658
at Object. (owl.carousel.js:1695)
at webpack_require (bootstrap 2c4170b…:52)
at Object.Owl.Defaults.items (index.js:18)
at webpack_require (bootstrap 2c4170b…:52)
at Object.433 (main.ts:11)
at webpack_require (bootstrap 2c4170b…:52)
at Object.434 (app.component.ts:17)
at webpack_require (bootstrap 2c4170b…:52)
at Object.324 (src async:7)
at webpack_require (bootstrap 2c4170b…:52)
at Object.553 (main.bundle.js:181)
at webpack_require (bootstrap 2c4170b…:52)
at webpackJsonpCallback (bootstrap 2c4170b…:23)
at main.bundle.js:1
(anonymous) @ owl.carousel.js:1658
(anonymous) @ owl.carousel.js:1695
webpack_require @ bootstrap 2c4170b…:52
Owl.Defaults.items @ index.js:18
webpack_require @ bootstrap 2c4170b…:52
433 @ main.ts:11
webpack_require @ bootstrap 2c4170b…:52
434 @ app.component.ts:17
webpack_require @ bootstrap 2c4170b…:52
324 @ src async:7
webpack_require @ bootstrap 2c4170b…:52
553 @ main.bundle.js:181
webpack_require @ bootstrap 2c4170b…:52
webpackJsonpCallback @ bootstrap 2c4170b…:23
(anonymous) @ main.bundle.js:1

lastest version still error like this

Edit : import jquery

Hi,
I'm trying to configure the new npm package of Owl Carousel ('ngx-owl-carousel'), but it seems that the Event Callbacks, which I set in options, don't seem to get triggered.

My options:
public carouselOptions: any = {
items: 1,
dots: false,
navigation: false,
onInitialized: (event) => {
// something
},
onDragged: (event) => {
// something
}
};

But if I use the old npm package ('ng2-owl-carousel'), everything works fine.
I also see that the Carousel doesn't seem to get loaded, since the child elements do not get wrapped (owl-items) and the Carousel itself never gets the class of 'owl-loaded'.

What could be wrong here? I'd really like to use the new version of the Carousel.

Hi,

The module is working fine, but there is one thing that I noticed with the update from ng2-owl-carousel to ngx-owl-carousel.
If I used a reference to the component's properties in order to update their values in my event callbacks with the old ng2-owl-carousel, they actually got updated and the new value was shown in the template.
The same thing however does not work when I use this new ngx-owl-carousel module.

I wrote my callbacks directly in carousel's options like so:

export class MyComponent {
public carouselOptions: any = {
items: 1,
dots: false,
navigation: false,
onInitialized: (event) => {
this.myVar1 = xxxx; // a value to be updated
},
onDragged: (event) => {
this.myVar2 = xxxx; // a value to be updated
}
};
}

In template:
<owl-carousel
[options]="carouselOptions">
....

{{myVar1}}
{{myVar2}}

With the new version of the module (ngx-owl-carousel) this does not work.

Regrads

I have seen couple of example to give arrow icons to slider. But I am unable to do it.

Below is my Implementation.

<owl-carousel #owlSlider
        [options]="{nav : false, dots: false, loop:false, items:1, navText:['<i class='fa fa-chevron-circle-left' aria-hidden='true'></i>','<i class='fa fa-chevron-circle-right' aria-hidden='true'></i>']}"
        [items]="images"
        [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item deal-slide" *ngFor="let image of images;let i = index">
      
      <div class="coupons-div" style="cursor:pointer;">
        <img class="deals-image" src="http://lorempixel.com/1080/300/{{image}}"/><br/>
      </div>
    </div>
  </owl-carousel>

below is error showing on the console.

Uncaught Error: Template parse errors:
Parser Error: Missing expected ] at column 69 in [{nav : false, dots: false, loop:false, items:1, navText:['','']}] 

for some reason complete error not showing by github. PFA of screenshot.

in instruction page this:

"styles": [
    "../node_modules/owl.carousel/dist/owl.carousel.css",
    "../node_modules/owl.carousel/dist/owl.theme.default.css"
]

must change to:

"styles": [
    "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
    "../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
]

Using the documentation example:
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>

Throws a compile error:
Parser Error: Missing expected } at column 22 in [{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}]

I've tried every combination of background, using a simple background: red compiles.

Also, what's with the abc.jpg? How to use the image in the loop let image of images? My images is an array of image url strings.

I can get images to at least display if I use this instead:

<div class="thumbnail-image">
     <img src="{{image}}"  alt="">
</div> 

But this doesn't seem to be the way it's designed?

when i print owl-carsourl component in my html file

<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input --> [items]="images" <!-- classes to be attached along with owl-carousel class --> [carouselClasses]="['owl-theme', 'row', 'sliding']"> <div class="item" *ngFor="let image of images;let i = index"> <div class="thumbnail-image" [ngStyle]="{'background': 'url('adsf.jpg')no-repeat scroll center center / 80px 80px'}"> </div> </div> </owl-carousel>

the error is

MenuComponent.html:22 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 23, nodeDef: Object, elDef: Object, elView: Object}
View_MenuComponent_0 @ MenuComponent.html:22
proxyClass @ compiler.es5.js:14091
DebugContext_.logError @ core.es5.js:12947
ErrorHandler.handleError @ core.es5.js:1149
(anonymous) @ core.es5.js:4660
ZoneDelegate.invoke @ zone.js:381
onInvoke @ core.es5.js:4125
ZoneDelegate.invoke @ zone.js:380
Zone.run @ zone.js:141
(anonymous) @ zone.js:805
ZoneDelegate.invokeTask @ zone.js:414
onInvokeTask @ core.es5.js:4116
ZoneDelegate.invokeTask @ zone.js:413
Zone.runTask @ zone.js:181
drainMicroTaskQueue @ zone.js:574
zone.js:630 Unhandled Promise rejection: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name. ; Zone: <root> ; Task: Promise.then ; Value: DOMException: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (http://localhost:4200/vendor.bundle.js:30160:16)
    at DebugRenderer2.setAttribute (http://localhost:4200/vendor.bundle.js:13389:23)
    at createElement (http://localhost:4200/vendor.bundle.js:9541:22)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12140:44)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12552:13)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12209:5)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12552:13)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12209:5) Error: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (http://localhost:4200/vendor.bundle.js:30160:16)
    at DebugRenderer2.setAttribute (http://localhost:4200/vendor.bundle.js:13389:23)
    at createElement (http://localhost:4200/vendor.bundle.js:9541:22)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12140:44)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12552:13)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12209:5)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12552:13)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at createViewNodes (http://localhost:4200/vendor.bundle.js:12209:5)
api.onUnhandledError @ zone.js:630
handleUnhandledRejection @ zone.js:654
_loop_1 @ zone.js:645
api.microtaskDrainDone @ zone.js:649
drainMicroTaskQueue @ zone.js:582
zone.js:632 Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2849)
    at DebugRenderer2.setAttribute (core.es5.js:13178)
    at createElement (core.es5.js:9330)
    at createViewNodes (core.es5.js:11929)
    at callViewAction (core.es5.js:12341)
    at execComponentViewsAction (core.es5.js:12280)
    at createViewNodes (core.es5.js:11998)
    at callViewAction (core.es5.js:12341)
    at execComponentViewsAction (core.es5.js:12280)
    at createViewNodes (core.es5.js:11998)
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2849)
    at DebugRenderer2.setAttribute (core.es5.js:13178)
    at createElement (core.es5.js:9330)
    at createViewNodes (core.es5.js:11929)
    at callViewAction (core.es5.js:12341)
    at execComponentViewsAction (core.es5.js:12280)
    at createViewNodes (core.es5.js:11998)
    at callViewAction (core.es5.js:12341)
    at execComponentViewsAction (core.es5.js:12280)
    at createViewNodes (core.es5.js:11998)
    at resolvePromise (zone.js:757)
    at zone.js:683
    at zone.js:699
    at ZoneDelegate.invoke (zone.js:381)
    at Zone.run (zone.js:141)
    at zone.js:805
    at ZoneDelegate.invokeTask (zone.js:414)
    at Zone.runTask (zone.js:181)
    at drainMicroTaskQueue (zone.js:574)
    at <anonymous>
api.onUnhandledError @ zone.js:632
handleUnhandledRejection @ zone.js:654
_loop_1 @ zone.js:645
api.microtaskDrainDone @ zone.js:649
drainMicroTaskQueue @ zone.js:582```

Hi, thanks for this module. I am trying to use responsive option as per the document here https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html but it is not working

my current option config
sliderOptions = [{ dots: true, navigation: false, autoplay: false, loop: false, lazyLoad: true, nav: true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }];

It will search 'ngx-owl-carousel.js' under the direct root of 'node_modules'.
"no such file or directory, open '\node_modules\ngx-owl-carousel.js'"

Gulp Task Ref code:

npm run build.prod

gulp.task('build.prod', (done: any) => runSequence('check.tools', 'clean.prod', 'tslint', 'build.assets.prod', 'build.html_css', 'copy.prod', 'build.js.prod', 'build.bundles', 'build.bundles.app', 'minify.bundles', 'build.index.prod', done));

refresh() not working in angular 5

Hi dear ,

<owl-carousel [options]="{nav : true, slideBy : 2 ,margin :14  }"
              [items]="images"
              [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let image of images;">
        <img src="{{image}}" style="" />
        <div class="thumbnail-image" [ngStyle]="''"></div>
    </div>
</owl-carousel>

i am useing Anguarjs 2
i want to make it responsive carousel
but when i add Responcesive code in options is show error

responsive: { 0: { items: 1, margin: 5 },
480: { items: 2, margin: 5 },
640: { items: 3, margin: 5 }
}

<owl-carousel [options]="{nav : true, slideBy : 2 ,margin :14 ,responsive: {       0: {  items: 1, margin: 5 },
                        480: { items: 2,  margin: 5 },
			640: { items: 3, margin: 5 }
                   }  }"
              [items]="images"
              [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let image of images;">
        <img src="{{image}}" style="" />
        <div class="thumbnail-image" [ngStyle]="''"></div>
    </div>
</owl-carousel>

i can't do it

I am not sure why does updating the options object on my component side doesn't reflect.
I want to turn off the autoPlay option as the user click on the image or video whatsoever! Any way to do that?!

Thanks in Advance...

Hello,

We want to add ngx-owl-carousel (https://github.com/mujtaba01/ngx-owl-carousel) in the universal .net angular project - https://github.com/MarkPieszak/aspnetcore-angular2-universal. The project using webpack build system. The module in this project require jQuery and I started to implement in with follow steps:

1. webpack.config.vendor.js - add jquery module in nonTreeShakableModules and turn on ProvidePlugin new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
2. Install carousel modules npm install owl.carousel "ngx-owl-carousel --save
3. Load CSS files - add them into app.component.scss @import "~owl.carousel/dist/assets/owl.carousel.css"; @import "~owl.carousel/dist/assets/owl.theme.default.css";
4. Register the module in app.module.ts file:
   import { OwlModule } from 'ngx-owl-carousel'; ..... @NgModule({ imports: [ ........ , OwlModule ]);
5. Add owl-carousel component in some of our components to use it:
   <owl-carousel [options]="{items: 3, dots: false, navigation: false}"> <div class="item"><img alt="" src="../../../content/images/aboutus-1.jpg"></div> <div class="item"><img alt="" src="../../../content/images/aboutus-2.jpg"></div> <div class="item"><img alt="" src="../../../content/images/aboutus-3.jpg"></div> </owl-carousel>

We expect to see carousel module but the result is

OwlCarousel.html:1 ERROR ReferenceError: $ is not defined
at new OwlChild (owl-child.component.js?bfe4:18)
at createClass (vendor.js:12486)
at createDirectiveInstance (vendor.js:12331)
at createViewNodes (vendor.js:13769)
at createEmbeddedView (vendor.js:13647)
at callWithDebugContext (vendor.js:15060)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (vendor.js:14390)
at TemplateRef_.createEmbeddedView (vendor.js:11734)
at ViewContainerRef_.createEmbeddedView (vendor.js:11450)
at NgIf._updateView (vendor.js:20125)

Obviously it doesn't find the jQuery. But when I'm trying to use in some of our components @import * as $ from 'jQuery' and invoke $(selector), it's there. Why OwlModule doen't find it? Is my implementation correct or doing something wrong?

We want to use exact owl-carousel because migrating old product from angular 1.0 to 5.0 using your universal project. I know that adding of jQuery in Angular is not good practice but I didn't found package of owl-carousel without jQuery but have to migrate old code faster. If you can give me better advise how to do it most intelligent I will be very happy, I'm beginner with angular 5 and have some confusions yet. Will wait for your help and advises.

Thank you very much,
GetTaxSolutions team.

carouselOptions: any = {
  nav : true, 
  dots: false, 
  loop:false,
  onChange : this.onChange, 
  items:1, 
  navText:['<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>','<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>']
  }

I have written callback function for onChange event. Its printing console correctly. But when I want to access other function or variable it always showing as undefined.

For example I want to access owlSlider1 then it showing undefined in that method only. on other methods that variable is working

Can you post a demo on how to change the number of items according to responsiveness.

Hello,

Is there any way to get the current slide index after slide change ? I tried couple of variations but none of them seem to work or i am doing something wrong.

One of them was that i added to the carousel options the following:

onDragged: this.getIndex(event)

getIndex(event){
console.log(event.item.index);
}

But the onDragged got called only on slider init and never on drag and gave an undifined on slider init.

What is the proper way to get the index if that is possible?

Thanks,
Trix

Blink effect when new item is added in ngFor array.
It is look like that all items in carousel are reloads and then appears

Hi,

I've got exactly the same code in my main app component, and in a lazy loaded component.

• app.component.html // lazy.component.html

<div (click)="change()">click</div>
<owl-carousel #owlElement
              [options]="carouselOptions"
              [items]="images"
              [carouselClasses]="['owl-theme', 'sliding']">
  <div class="item deal-slide" *ngFor="let image of images;let i = index">

    <div class="coupons-div" style="cursor:pointer;">
      <img class="deals-image" src="{{image}}"/><br/>
    </div>
  </div>
</owl-carousel>

• app.component.ts // lazy.component.ts

export class AppComponent {
  images = [
    'img1.jpg',
    'img2.jpg'
  ];

  carouselOptions: any = {
    nav: true,
    dots: false,
    loop: true,
    items: 2
  };


  change() {
    this.images = [
     'img3.jpg',
     'img4.jpg
    ];
  }

• First load:
  • In the main component all works correctly.
  • In the lazy loaded component does not loads the images in the carousel.
• When click btn calling change method:
  • In the main component loads the new contents correctly.
  • In the lazy loaded component when I click it twice loads the new images correctly.

I've got in both the main.module.ts and the lazy.module.ts imported the OwlModule module.
I don't know if I've doing something wrong or it is a bug.

Any ideas? Thanks in advance!

I'm trying to stop autoplay on Drag event, but it doesnt seem to work. I've tried to trigger the event but it doesn't work at all. I got to do this but it's not best solution:

carouselOptions = {
      items: 1,
      dotsContainer: '.owl-dots',
      navigation: false,
      loop: true,
      lazyLoad: false,
      autoplay: true,
      autoplayTimeout: 5000,
      onDrag: this.onDrag
  };
  onDrag(event) {
    event.relatedTarget.settings.autoplay = false;
  }

This code seems to work, on event but it plays another slide and then stops the autoplay.

When initialized the carousel is adding an extra item to the end of the carousel. There is nothing in this item just empty.

I have an owl carousel in a component which has different route params. For each route param, the list of items in the carousel changes.

I've used [items]="images" on the owl carousel so that the list updates fine, but when I change the route, the owl carousel disappears for a split second and then reappears. This looks strange because the rest of the component does not have to update when the route params change.

I feel that this should not be reinitialized in this way. Any thought would be appreciated. Thanks

there was problem on ng2 AoT when i use owl-carousel.

09:53:23 app-mobile-1 ReferenceError: window is not defined
09:53:23 app-mobile-1     at Object.<anonymous> (/home/rboschini/Workspace/app/node_
modules/owl.carousel/dist/owl.carousel.js:1695:4)

First of all I want to note that I have included owl.carousel.css file in the index.html and the main problem is that as an option I have included dots:true but it still shows disabled class in the owl-dots div.

HTML side
`

        </div>
    </owl-carousel>
</div>

With Angular 4.0 plugin fails with error ERROR TypeError: this._trackByFn is not a function.

Thank you :)

On the npm page I see:

npm install ng2-owl-carousel --save

But inside github I see:

import { OwlModule } from 'angular-owl-carousel';

Hello,

Using webpack and i get the above error?

In my index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

I have imported { OwlModule } from 'ng2-owl-carousel'; in my app.module.ts

Then in my component i have imported { OwlCarousel } from 'ng2-owl-carousel';

and finally my HTML

<owl-carousel [options]="{items: 3, dots: false, navigation: false}" 
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" class="item" *ngFor=" let m of membersslider ;let i = index">
	<img alt="" [attr.src]='m.teamMemberPhoto' />
</div>
</owl-carousel>

Any ideas why its throwing this error

I have this specific issue, after doing some research I have found that owl carousel tries to get initialized at ngAfterViewInit while the carousel-child is NOT STILL LOADED, please keep in mind that I use my app inside a page with high loading time... The problem occurs mostly when I change routes in my application.

Further Info: I import in anguar-cli.json my scripts:

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"
]

Then I concat all my .js bundles at a gulpfile.js file using this specific order:
gulp.task('concat-js', function () {
return gulp.src([
'dist/scripts.bundle.js',
'dist/inline.bundle.js',
'dist/polyfills.bundle.js',
'dist/vendor.bundle.js',
'dist/main.bundle.js'
])

I have to mention that my carousel loads an array of objects that it gets populated according to route params (id). The carousel is not always visible, it gets hidden when a specific param is absent. However, the problem continues to exist even if I make the carousel constantly visible. I get this error:

My markup is the following:

<div [hidden] = "!hideCarousel"  class="carousel-parent">
        <div class="carousel-wrapper">
            <owl-carousel [options]="owlOptions" [items]="pages" [carouselClasses]="['owl-theme']">
                <div class="item" *ngFor="let page of pages; let i = index">
                    <div class="image-wrapper" *ngIf="page">
                            <a routerLink="{{prefixUrl}}/{{page.name}}/{{page.id}}">
                                <img src="{{prefixUrl}}/{{imgUrl}}">
                            </a>
                     </div>
                 </div>
            </owl-carousel>
        </div>
    </div>

Finally, after using some console messages, I've found out that the problem occurs when the carousel element is not loaded (does not have the class 'owl-loaded').
I have tried all the available workarounds. This drives me crazy. Any help would be greatly appreciated.

I need to use Owl carousel in Angular 5 project but its not working and showing below errors.

ERROR ReferenceError: $ is not defined
    at OwlChild.ngOnInit (owl-child.component.js:22)
    at checkAndUpdateDirectiveInline (core.js:12411)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (OwlCarousel.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)

OwlCarousel.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}