devmark / ngx-slick Goto Github PK
View Code? Open in Web Editor NEWangular6 a wrapper for slick plugin
angular6 a wrapper for slick plugin
Hello,
I want to modify the dots with the following css :
.slick-dots li button:before {
font-size: 10px;
}
But i doesn't have any effect. When i use the developers tools of Chrome, i don't see my css rule.
AnyBody already got run with Angular Universal?
I'm not sure which are the cases, but in some cases (click)
event and routerLink
do not work inside of ngxSlickItem
.
If the amount of items fit inside of the screen (let says there is not scroll) works always fine. But having more items start to fail. Here you can see the erorr working
https://lautarobock.github.io/slick-bug/
If you try to click in one of the two buttons of the last item do not work (should change the route), but if you scroll to the left works.
and the repo is here https://github.com/lautarobock/slick-bug
[node_modules\ngx-slick\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, Directive, ElementRef, EventEmitter, Host, Input, NgModule, NgZone, Output, forwardRef } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:607:28)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.ngx-slick (D:\dattatray\25o2\frontend\25o2_website\25o2_digital_ocean\universal-starter-master\dist\server\main.js:14620:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: node dist/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.](url)
Versions
Issue
The ngxSlickItem does not get interpreted. The width calc occurs, but no content and none of the accessibility attributes are applied (role, aria-*) and none of the included content for the item is placed in the item node.
This only occurs on IE11 (go figure) and it works in Chrome, Safari, Firefox and Edge.
Question
What could the issue be? I am at a loss as there are no errors reported into the console.
Hi,
Please let me know if this is licensed to MIT ?
I am using the Angular Slick Carousel Plugin: https://github.com/devmark/ngx-slick in Angular 6 application.
Previous button is not working properly when SlidesToScroll and SlidesToShow properties have different values.
I want to set SlidesToShow config property to 8, but SlidesToScroll to be 1. On click on previous arrow, items are scrolled to right for one position and one item appears from the left side as first in the list of items. This works fine. The actual problem is that, other items (expect the leftmost one) are somehow broken, they are not clickable anymore. I inspect the html, and realized they have tab-index attribute set to -1 and additional class: slick-cloned , after previous arrow is clicked.
if I set SlidesToScroll to be equal as SlidesToShow property, carousel previous button works fine.
Is there any restriction for the values of SlidesToScroll property ?
Dynamic array contains 5 data
this is my slider config
slideConfig = {slidesToShow: 3,slidesToScroll: 1,draggable:false,infinite:false,dots: false, focusOnSelect: true,nextArrow: '',prevArrow: '',};
while doing routing between items works on first three and its not working for last two. slick-active and slick-current class is not getting binding for last 2.
can you please help me out if anything i have done wrong
Hi
Can you tell me why initialSlide property not working for angular 6. Here what i am using
slideConfig = {"slidesToShow": 4, "slidesToScroll": 4,initialSlide:9};
Other properties working fine for me. If initialSlide will not work for me then this plugin is useless for me.
According to http://kenwheeler.github.io/slick/ we can make dynamic slides using filters $selector.slick('slickFilter', 'category-1')
. How about to implement this in ngx-slick?
Hi.
If there are no items in the slick element we get the error "Cannot read property 'slick' of undefined" when try to leave the page.
You should check for undefined in unslick() method
I am currently using [email protected] & angular version 4.2. After any router navigation i am getting this error
Uncaught (in promise): TypeError: Cannot read property 'slick' of undefined
TypeError: Cannot read property 'slick' of undefined.
& getting this console
removeSlide SlickItemDirective {el: ElementRef, carousel: SlickComponent}
Because of this error our projects navigation fails although slick is working fine. So is there any configuration to solve this error?
Hello,
I'd like to use your library in an Angular project where all core packages are in the 4.0.2 version.
After installing ngx-slick with npm i --save ngx-slick
, I start the application with ng serve --open
but I get an error after the application has finished compiling :
ERROR in Metadata version mismatch for module D:/projects/rugbycentric.com/node_modules/ngx-slick/ngx-slick.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/projects/rugbycentric.com/src/app
/app.module.ts, resolving symbol AppModule in D:/projects/rugbycentric.com/src/app/app.module.ts, resolving symbol AppModule in D:/projects/rugbycentric.com/src/app/app.module.ts
I understand that the library is expecting an Angular 5 environment but I'd like to know if there is an old version that is compatible with Angular 4.0.2 ?
The current version installed in my application is (from package.json) :
"ngx-slick": "^0.2.1"
Best regards,
Maxime
Is there any possibility to use lazy loading for images with attribute data-lazy like here http://kenwheeler.github.io/slick/ ?
When writing slideConfig, is it the same as JS slide Config or it is different> If so, what has changed? Or is everything the same
how to move an item (slide)?
I want to insert the new page just after the current and not in the end
thanks in advance for your help
Having problem in viewing the images, it shows all images instead of one slide in iphone 10. and arrows to move back and forth. in the config i kept like this
responsive: [
{
breakpoint: 375,
settings: {
slidesToShow: 1
}
}
],
Hi,
Is loading the jQuery and the slick slider CSS in the index.html the best way to load the assets? I was wondering if there is a way to load them just in the component where i am using the slider.
If i can help with this let me know and we could work toguether, if i know how to ;)
Trying to implement responsive behaviour in slider but when added responsive break points it doesn't initialise the slider. My slider config is below:--
this.slideConfig = {
slidesToShow: 14,
slidesToScroll: 14,
infinite: false,
dots: false,
draggable: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 360,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
This library doesn't support the latest supported version of Angular. Is there a plan to? If not a plan to put a depreciated warning in the readme?
I am trying to use ngx-slick and am using it with SystemJS.
In Systemjs.config.js, I added
map: { app: 'app', ... 'ngx-slick': 'npm:ngx-slick/ngx-slick.umd.js' }
I am using external jQuery in my bundle and have not configured it in the map function. The jQuery file I am adding is defined above the bootstraping
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) {
console.error(err);
});
</script>
I get the error in initSlick function which clearly trying to use $ (jQuery reference) which is already loaded.
Any suggestions?
I want to implement autoplay feature in my slides. How can I achieve this?
Hey,
i just tried to install slick, following your instructions, but I get the error /node_modules/ngx-slick/slick.component.d.ts (2,36): Cannot find module 'slick'.
I am new to the Angular-world, so maybe i am wrong, but there is no module slick, just a slick-carousel-module?
Just installed this via npm and got it implemented, but I appear to be getting an error on line 1 of the component file (pasted below) at runtime.
import { Component, Directive, ElementRef, EventEmitter, Host, Input, NgModule, NgZone, Output, forwardRef } from '@angular/core';
I declared the SlickModule in my imports array:
SlickModule.forRoot()
I'm running Angular CLI 6.1.3. Other than this error everything appears to be working fine.
The slides are being added dynamically, although it adds them in the collection but initially it doesn't show anything. If I go to console at .slick-slide .slick-current .slick-active
element and turn off display: block
to display: none
and then turn it on again to display: block
, it starts to render correctly.
I am using it like
<ngx-slick class="carousel" *ngIf="resetSliderPlugin">
<div ngxSlickItem *ngFor="let galleryImage of galleryImages" class="slide">
<img [src]="galleryImage.Path" [alt]="galleryImage.Alt" width="100%" />
</div>
</ngx-slick>
where I have a variable called resetSliderPlugin which is set to true after successfully setting the array (it has the same behavior without this flag).
Any help?
Is there a way to order the items? I have defined multiple ngxSlideItem
s (two "normal" slides, and one for
-loop) and at the moment the slides from the for
-loop comes first, ignoring the markup in the HTML.
<article ngxSlickItem class="slide">
...
</article>
<article ngxSlickItem *ngFor="let step of project.steps; let i = index" class="slide">
...
</article>
<article ngxSlickItem class="slide">
...
</article>
Independently from this markup, i always get the slides from the for
-loop first. Is there a way to change this behaviour?
[X] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] @ng-toolkit/init
[ ] @ng-toolkit/serverless
[X] @ng-toolkit/universal
I created a new Angular 6 application that is using a Angular Slick Carousel Plugin: https://github.com/devmark/ngx-slick.
Currently the application works fine when I run ng serve -o
and even when I host my dist/browser/* contents in an S3 Bucket.
When I try to use either @ng-toolkit/universa I get the following problem from npm run server
(btw all I see in localhost:8080 is this -> {}
):
Listening on: http://localhost:8080
ERROR ReferenceError: jQuery is not defined
at /Users/AbeBook/codecommit/somos-travel/dist/server.js:111069:13
at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136491:26)
at Zone.module.exports.Zone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136241:43)
at NgZone.module.exports.NgZone.runOutsideAngular (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4208:28)
at SlickComponent.module.exports.SlickComponent.initSlick (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111068:19)
at SlickComponent.module.exports.SlickComponent.addSlide (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111111:18)
at SlickItemDirective.module.exports.SlickItemDirective.ngAfterViewInit (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111254:23)
at callProviderLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9992:18)
at callElementProvidersLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9966:13)
at callLifecycleHooksChildrenFirst (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9956:29)
TypeError: Cannot read property 'slick' of undefined
at /Users/AbeBook/codecommit/somos-travel/dist/server.js:111130:29
at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136491:26)
at Object.onInvoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4249:33)
at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136490:32)
at Zone.module.exports.Zone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136241:43)
at NgZone.module.exports.NgZone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4163:28)
at SlickComponent.module.exports.SlickComponent.removeSlide (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111129:19)
at SlickItemDirective.module.exports.SlickItemDirective.ngOnDestroy (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111263:23)
at callProviderLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9998:18)
at callElementProvidersLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9966:13)
Application should compile as it does when I run ng serve
To reproduce the error do the following:
app.module.ts
import { NgtUniversalModule } from '@ng-toolkit/universal';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from './material';
import { HomePageComponent } from './home-page/home-page.component';
import { ToolbarComponent } from './home-page/toolbar/toolbar.component';
// Import your library
import { SlickModule } from 'ngx-slick';
@NgModule({
declarations: [
AppComponent,
LandingPageComponent,
HomePageComponent,
ToolbarComponent
],
imports:[
CommonModule,
NgtUniversalModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule,
SlickModule.forRoot()
],
providers: [],
})
export class AppModule { }
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Name</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two|Montserrat:400,700|Raleway:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/[email protected]/slick/slick.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.4.3
@angular/cli 6.0.8
@angular/material 6.4.3
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
webpack 4.8.3
Hello,
I'm running a situation where I am changing slide sources based on input. Basically i'm filtering the loaded images based on a criteria.. What is command to reinitialize the slider using (afterChange) emitter?
Thanks.
How to use responsive slideToshow in slideConfig ?
we want to set up slideToshow responsive in slide configuration.
The scripts and CSS references in the index.html shouldn't be necessary.
I am working on a big angular project in which this kind of integration, by putting script and link tags in the index.html is not acceptable.
Bug:
The example attached in the README is not working. It seems plunker is having some issue to run any application.
Solution
Could you please deploy this example app to somewhere else, where it works, may be to
https://stackblitz.com
Hi all,
I recently ran into an issue with IE11 compatibility. The issue was with this line:
jQuery(this.el.nativeElement)[0].innerHTML= '';
Updating this to this:
jQuery(this.el.nativeElement)[0].textContent = '';
Fixed the issue for me.
Just an FYI for anyone else having this issue (if anyone still has to support IE11 like me)
Feel free to tell me any reason this might be wrong also.
I'm using translate service for the text inside slider items,
when I call it , slider is disappear from the view but still in HTML with translated text,
is there a way to fix it?
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
<div class="service-wrapper full-stack-wrapper" *ngFor="let slide of slides" ngxSlickItem>
<div class="service-details full-stack-details">
<span class="service-img"></span>
<h3 class="service-name">{{ 'home.services.list.0.title' | translate}}</h3>
<div class="service-description">{{ 'home.services.list.0.text' | translate}}
</div>
</div>
</ngx-slick>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'our-services',
templateUrl: './our-services.component.html',
styleUrls: ['./our-services.component.scss']
})
export class OurServicesComponent implements OnInit {
public slideConfig:{};
constructor() {}
ngOnInit() {
this.slideConfig = {
"slidesToShow": 1,
"slidesToScroll": 1,
};
}
}
Thanks
I want to access slick modal from component, I tried it using ViewChild but it didn't work.
here is my code:
<ngx-slick class="carousel col-md-12" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem *ngFor="let slide of slides; let i = index" class="slide">
@ViewChild('slickModal') public slickModal;
but i always have undefined in slickModal when this.slickModal.slickGoTo(2);
any help?
Thanks
Hi since the last update of the module, I re-ran the command npm install ngx-slick in my angular 2 application I have this error when I am serving my application "Cannot find module 'ngx-slick'".
Is there an issue with this version of the module?
Pls guide me.
ThumbSliderComponent.html:70 ERROR TypeError: _this.$instance.slick is not a function
at eval (ngx-slick.umd.js:78)
at ZoneDelegate.invoke (zone.js:388)
at Zone.run (zone.js:138)
at NgZone.runOutsideAngular (core.js:4708)
at SlickComponent.initSlick (ngx-slick.umd.js:70)
at SlickComponent.addSlide (ngx-slick.umd.js:113)
at SlickItemDirective.ngAfterViewInit (ngx-slick.umd.js:256)
at callProviderLifecycles (core.js:12748)
at callElementProvidersLifecycles (core.js:12715)
at callLifecycleHooksChildrenFirst (core.js:12698)
with last version of chrome slick cause many messages verboses of Violation like this:
Violation] 'setInterval' handler took 75ms
[Violation] 'setTimeout' handler took 51ms
It appears to add some non-passive event listeners, which makes the UI freeze for about 2 seconds.
i have autoplay and dots on my ngx-slick carousel
when I click on dot - it change class, but when autoplay continue - next dot has active class too
second dot click, third dot autoplay(next)
both has class active
bug?
my slide config
'slidesToShow': 1,
'slidesToScroll': 1,
'fade': true,
'autoplay': true,
'autoplaySpeed': 3000,
'infinite': true,
'pauseOnFocus': false,
'pauseOnHover': false,
'cssEase': 'ease-in-out',
'speed': 1000,
'dots': true
I did everything. but when the window is bigger than 768 pixels, the width is too large. the width of the field is 66780px (yes the correct 66780px) although the width is 100%
This is how my config looks like
slideConfig = { centerMode: true, centerPadding: '60px', slidesToShow: 1, arrows: false, swipeToSlide: true, infinite: false, initialSlide: 5 };
I have 9 slides and I want to start from 5 slide. But when I set initialSlide: 5
or initialSlide: "5"
it does not work and my slider always starts from first slide.
I am using:
"ngx-slick": "^0.2.1"
"slick-carousel": "^1.8.1"
I created a project using angular cli, followed the steps and this is what I have:
Is it possible to disable the "removeSlide" debug message on the console generated by line 102?
https://github.com/devmark/ngx-slick/blob/master/src/slick.component.ts#L102
Thank you for providing this excellent package.
Can't install into a new Angular 5 project
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/forms@^4.0.0 but none was installed.
please note that I forked the solution for now and changed the package.json
to be able to use your repo
can you please help me out I need so that on click of an slide the slideshow go to that slide . is there any event in which on click of the slide I get the slide index and use the slide goto event
When a routerLink is contained inside a slick item the link is being followed when swiping left or right on mouseup.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.