sheikalthaf / ngx-carousel Goto Github PK

I setup a carousel with the following settings:
public carouselSettings: NgxCarousel = { grid: {xs: 1, sm: 1, md: 2, lg: 3, all: 0}, loop: true, speed: 400, point: { visible: true }, touch: true, easing: 'ease' };

Let's say I have 3 items in my carousel and I load up my carousel in desktop view size 'lg'. Since I have configured 'lg' to have 3 items, only one page is needed, and one point is displayed. This is correct.

Now I resize my browser to the 'xs' size, and 3 pages are needed to display my 3 items. The display of the points still remains at 1, where what should actually display is 3 points.

I had no problem setting the banner and tile. I do understand the grid.
But I just can't figure out how to set tile to fixed-width.

Tried this, but it is not what i wanted..:
`
<ngx-carousel [inputs]="carouselTile">

<ngx-tile NgxCarouselItem *ngFor="let product of products" class="item" style="max-width:200px;">
    <div style="width:400px;">
        <product-single [product]="product"></product-single>
    </div>
</ngx-tile>

<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>

Setting:
this.carouselTile = { grid: {xs: 1, sm: 2, md: 3, lg: 4, all: 0}, slide: 1, speed: 400, animation: 'lazy', point: { visible: true, pointStyles: ' .ngxcarouselPoint { display:none; }' }, load: 2, touch: true, easing: 'ease' }

Help please.

Is there a demo where I can see how this carousel looks?

Hi,
First, thanks for making this neat component available!

I experience an issue in FireFox. The left/right buttons don't work on my Mac. Exception:"TypeError: event.srcElement is undefined".

I was able to temporarily fix it by replacing the following line:

var btn = event.srcElement.classList;

with

var element = event.target || event.srcElement
var btn = element.classList;

Cheers,
Philipp

I have the following code

<ngx-carousel [inputs]="carouselOne">
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">All
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Electronics
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Toys
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Books
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Clothing
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Jewellery
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Watches
                            </label>
                        </div>
                    </ngx-tile>
                    <ngx-tile NgxCarouselItem>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn" style="background: #4385f5">
                                <input type="checkbox" class="toggle">Bicycles
                            </label>
                        </div>
                    </ngx-tile>
                    <button NgxCarouselPrev class='leftRs'>&lt;</button>
                    <button NgxCarouselNext class='rightRs'>&gt;</button>
                </ngx-carousel>

and in TS

public carouselOne: NgxCarousel;

    ngOnInit(): void {
        this.carouselOne = {
            grid: { xs: 0, sm: 0, md: 0, lg: 0, all: 200 },
            slide: 2,
            speed: 400,
            animation: 'lazy',
            point: {
                visible: true
            },
            load: 2,
            touch: true,
            easing: 'ease'
        }
}

and the output is the following:

There is white space on the right of each item.

Hello,
I have a question regarding how to hide both the previous and next arrows, when all items are shown (e.g total no of items are 2 and carousel view takes 3). Right now the 'next arrow' is visible even if they are no more items in the array.

Hello
I have problem using the tile version of ngx-carousel. it not sows all the objects but just a subset of the object. for example if I set the lg in grid to 6 it just shows 6 items and others leave blank when scrolling

cannot slide on touch event

Excellent work, I love the carousel, especially for what configurable, but it is giving me an error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '1,1,1,1'. NgxCarouselComponent.html:1

I hope you can help me

Hello - I've been trying to get the fixed width version of the slider to work without success..

Following the previous issue: #32

As i understood it i need to set grid param to 0 on all accounts...

This causes the app to totally break - see https://stackblitz.com/edit/angular-kll1f8.

Hi,
In my angular 4 component i have written some grid using grid-template-columns:repeat(4, 1fr) CSS with some break points, In desktop 4 item in tablet 3 item and mobile 1 item like this.

when i use ngx-carousel i should use, grid: { xs: 1, sm: 2, md: 3, lg: 4, all: 0 } options but i prefer using my own grid is that possible, if so how do i do that?

thanks in advance.
Tamil

I wanted to use Fixed-Width tile and embed my custom contents for ngx-tile. But the 'white-space' property of .ngxcarousel-items makes the expected result wrong..

<ngx-carousel 
    [inputs]="carouselTile" 
    (carouselLoad)="carouselTileLoad($event)">
    <ngx-tile NgxCarouselItem *ngFor="let Tile of purchasedProducts">
        <ngx-product-simple [image]="image">
        </ngx-product-simple>
    </ngx-tile>
</ngx-carousel>

Could you provide me your code about Fixed-Width sample ?
or I would like you provide the complete usage of it..

Hi, is there any way I can set a default slide onInit, rather than just default to first slide?

Hello, when I scroll down my page (and touch carousel), banner changes position right or left. your test example has same problem. It looks like a very big bug. How to fix it? Thanks

Hello!

With this config:

this.lmmCarouselOne = {
  grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
  slide: 1,
  speed: 400,
  interval: 0,
  point: {
    visible: **false**
  },
  load: 2,
  touch: true,
  loop: false
}

An error appears in the console:

ERROR TypeError: Cannot read property 'nativeElement' of undefined

I made a mistake and broke my angular build by trying to update to angular 4.... so i have re added a new project , included the carousel as per instruction but i am getting this in my app.component.ts.

why would this be showing?

There seems to be an issue where the buttons are unresponsive for a few seconds. Then they do work for a few seconds, and as long as you keep clicking they continue working. I you stop clicking for a few seconds, the buttons stop working again for a few seconds.

I was able to run into this issue in Google Chrome using the basic banner example.

I copied your example and used a ngFor to make ngx-item. everything works except interval and loop.
Do I need more to do this ?

@angular/cli: 1.4.9
node: 8.6.0
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Auto-sliding with fixed tempo does not working any more.

This is because in the latest commit 7ad00d94fbb445afab03db13665df4e3f9a279cc the line 202 was commented

+ // this.carouselInterval();

Is there any reason to disable this feature?

I recommend this module to others..
Using this Carousel as a slider for banner, I need other effects for Banner like this link.
https://bxslider.com/examples/image-slideshow-captions/

Could you add some new transition effects for Banner?

Thanks

I am trying to append my videos generated to the carousel but doesn't seem to work. For now I understand that it needs to be included in an array before it could display on the page. It would be of great help if I could look at your demo's source code.

If I have a carousel with a total of 5 images and I show 4 images at a time when I click next it is all fine, but then the back button doesn't work.

I'm showing images from a search result, so I don't know how many total images I will have in the carousel. Here's my settings:

    this.carouselTile = {
        grid: { xs: 4, sm: 4, md: 4, lg: 4, all: 0 },
        slide: 4,
        speed: 400,
        interval: 0,
        point: {
            visible: false,
            pointStyles: `
            `
        },
        touch: false,
        loop: false,
        custom: 'banner'
    };

Hi,

Is possible to hide the point when only have one page? I think that this an error but can be something configurable.

Example:

this.carouselConfig = {
  grid: {xs: 1, sm: 1, md: 3, lg: 3, all: 0},
  slide: 1,
  speed: 400,
  interval: 10000,
  point: {
    visible: true
  },
  touch: true,
  loop: true
};

With 3 items on carousel:

xs: 3 pages = 3 points [Correct]
sm: 3 pages = 3 points [Correct]
md: 1 page = 1 point [Error - no points]
lg: 1 page = 1 point [Error - no points]

Thanks!

I just started and I do not know how to add an image in my "carousel Tile"

Hello,
I'm loving the slider, however if you swipe too quickly it causes the exception:

Cannot read property 'classList' of undefined

Here it is in the demo:

It looks like the method carouselPointActiver of NgxCarouselComponent is to blame. In my case I find the variable this.currentSlide to be Infinity, which I presume is incorrect.

Cheers Tom

hi, Demo looks awesome, and i want to use it but cant.

1st error, copying the example from the readme.md, is from line public carouselBanner: Carousel; error: Cannot find name 'Carousel'.

if i change it to public carouselBanner: NgxCarousel its ok.

but then in the browser

Unexpected closing tag "ngx-carousel". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
  <button class='leftRs'>&lt;</button>
  <button class='rightRs'>&gt;</button>
[ERROR ->]</ngx-carousel> 

please help me.

p.s.
using angular 4.4.3

Hi @sheikalthaf,

When changing the value for the input moveToSlide, jumping to the first slide with index 0 doesn't work.

I assume this is because 0 gets evaluated as falsy when using logical operators.
In ngx-carousel.components.ts, line 253:

ngOnChanges(changes: SimpleChanges) {
  // tslint:disable-next-line:no-unused-expression
  this.moveToSlide &&
    !changes.moveToSlide.firstChange &&
    this.moveTo(changes.moveToSlide.currentValue);
}

Changing line 255 to: this.moveToSlide != null && would solve the problem.

Did you have something special in mind, when writing this code, or is this maybe a bug?

Hi, great carousel. I'm trying to change the grid of 1 element to 80% width, but that cause the item to appear on the side and not centering. the purpose is that the neighbors of each item are a little shown on the sides, suggesting there is more to see. I couldn't change the transform property to make this work.
I think this grid would be useful to others.
thanks

edit
basically if I use the fixed width grid, that's almost what I want - but still items are not centered and with width is only in pixels, % not supported (which would be awesome)

I dont understand onMove. For example, i have one item and dont wanna show arrows. How can i do that. Can you give an example #25.

I wanna like bxslider minSlide option https://bxslider.com/options/

Hi there, how would i hide the left arrow when the first item is shown, and hide the right arrow when last item shown? What code would i put in the component typescript class of the component i have placed this into?

Unexpected module 'NgxCarouselModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.

I can't use this until you can add the option where on point controls/circles click it will navigate to that slide.

Thanks!

Hello

I wanna show arrows if more than x items. Can you help me?

Hi @sheikalthaf,

First, thanks for this library, I used ngx-slick in my angular app before using ngx-carousel and now my app is faster because ngx-slick has JQuery as dependency.

But there is an option in ngx-slick that would be great in your library : vertical carousel. 😃

Do you think it's possible to implement it ?

Let say we set interval 10 sec. After 7 sec of carousel loading we move to a slide by click (manually). But the carousel move to next slide after 3 sec.
I think interval value should reset after moving to a slide by click manually.

Also after manual intervention, auto slide should be stopped, it's a good design

This may seem like a dumb question. But I have desperately seeking for the answer.
I have tried to use "box-shadow: none !important;" but It wasn't working.

PLZ MERCY ME -

Need option to apply own css for carousel point.

Hello everyone,
I'm droping support for angular v2 due to below reason.
Angular 5 version going to release within couple of days. From this version the renderer is removed Instead Renderer2 will be available which is introduced in v4. This change is for angular universal support.
I don't know how many of you using this carousel in v2 but most of the people already using v4 including me. If anyone using v2 please comment below. based on the commands i will work on v2 too

Thanks for your love and support

Hi please use in template '[inputs]' instead of '[items]'

Hi,

When ngx-carousel item is displaying in mobile, I'm trying to move top of the page but current ngx-carousel item moving left or right .

thanks
Tamil

Hi first of all, very nice job doing this! I really appreciate it.

But when I take a look at src/carousel.module.ts, I see that the component source code should be at src//carousel.component. But I don't see such a file.

**Hi

i don't know if I'm missing something but I'm getting a error in my javascript (see attached error).
Any chance you could help me figure out why? Also i set points: true... but the points are not showing up ?

this is the component TS i have:**

import { Component, OnInit } from '@angular/core';
import { Carousel } from 'ngx-carousel';
@component({
selector: 'app-whatcustomerssay',
templateUrl: './whatcustomerssay.component.html',
styleUrls: ['./whatcustomerssay.component.scss']
})
export class WhatcustomerssayComponent implements OnInit {
public carouselWhatCustomersSay: Carousel;
constructor() { }

ngOnInit() {
this.carouselWhatCustomersSay = {
grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
slide: 1,
speed: 400,
interval: 4000,
animation: 'lazy',
point: true,
load: 1,
touch: true,
custom: 'banner',
dynamicLength: true
};
}

}

and this is my html template:

<ngx-carousel
[inputs]="carouselWhatCustomersSay"
carouselLoad)="carouselWhatCustomersSayLoad($event)" class="ngxcarouselWhatCustomersSay">

        <div class="item">
            <div class="head">What our customers say</div>
            <div class="saying">"Great team and significant savings.You do business the
                correct way, which is hard to find these days."
            </div>
            <div class="name">John Doe</div>
        </div>
        <div class="item">
            <div class="head">What our customers say</div>
            <div class="saying">"Great team and significant savings.You do business the
                correct way, which is hard to find these days."
            </div>
            <div class="name">John Doe</div>
        </div>
        <div class="item">
            <div class="head">What our customers say</div>
            <div class="saying">"Great team and significant savings.You do business the
                correct way, which is hard to find these days."
            </div>
            <div class="name">John Doe</div>
        </div>
        <div class="item">
            <div class="head">What our customers say</div>
            <div class="saying">"Great team and significant savings.You do business the
                correct way, which is hard to find these days."
            </div>
            <div class="name">John Doe</div>
        </div>
</ngx-carousel>

Hello! I think it is not possible to change from bullet points to numbers (eg: 1/4) in the navigation between the images?

I noticed two issues when nesting carousels, which was likely not an intended feature, but i believe it to be possible.

1. It seems as though the nested carousel picks up the [input] value of the parent carousel rather than using its own. In my case (Which i will attempt to reproduce in an isolated sample) An outer Tile carousel causes and inner item carousel to become tiles and use the same grid definition.

2. touch events are propagated from the nested carousel to the parent resulting in both handling the scroll touch events.

EDIT: as promised Plunker

Attempting to build from source fails. I think there are some missing dependencies, and general cleaning of the package required

1. Remove dist and compiled files folder from Git
2. Add 'postinstall' script to build after install
3. Fix dependencies for build
4. Add package-lock.json for NPM 5

Testing:
How is the docs folder related to the project? If this is your test base how did you generate it, as it seems seporate to the build and does not make use of the lates builds. Ideally anyone who downloads or forks the source should be able to run some tets to make sure no regression has been introduced. Implmenting some propper testing as well as an examples folder would be best.

Thoughts?

Swiping doesn't work on iPads in Portrait mode.
I can't debugged, where is the problem