I whould like to do responsive carousel but i cant do

[karangoswami31]

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

[mujtaba01]

try wrapping numeric keys of responsive key single quotes like this

<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>

[karangoswami31]

Thanks you so much ....Its working Awesome now
hi I need you help ..! @mujtaba01 can you help to to create Custom Components In Angular 2 . like you have create owl-carousel i can use any Jquery plug in and Create custom Control
please help me out

[umakant]

you guys can create the object on component and call the component on HTML template.

sliderOptions = { margin: 25, dots: false, navigation: true, nav: true, navText:[,], autoplay: true, loop: true, autoplayTimeout: 2000, autoplayHoverPause: true, lazyLoad: true, responsive:{ 0:{ items: 1 }, 600:{ items: 2 }, 960:{ items: 4 }, 1200:{ items: 5 } } };

<owl-carousel [options]="sliderOptions" .. >

[sudhirguliya]

Add in component.ts sliderOptions = { margin: 25, dots: false, navigation: true, nav: true, navText:[,], autoplay: true, loop: true, autoplayTimeout: 2000, autoplayHoverPause: true, lazyLoad: true, responsive:{ 0:{ items: 1 }, 600:{ items: 2 }, 960:{ items: 4 }, 1200:{ items: 5 } } };

And add this in component.html <owl-carousel [options]="sliderOptions" .. >

Its 100% working with testing