devmark / Ngx Slick
angular6 a wrapper for slick plugin
Stars: ✭ 105
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ngx Slick
Webapiclientgen
Strongly Typed Client API Generators generate strongly typed client APIs in C# .NET and in TypeScript for jQuery and Angular 2+ from ASP.NET Web API and .NET Core Web API
Stars: ✭ 134 (+27.62%)
Mutual labels: jquery, angular2
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (+296.19%)
Mutual labels: jquery, angular2
Moghya.github.io
personal website template for tech guys, all of the content is loaded from a json file no need to edit html/css set your data and ready to go. feel free to fork and make changes :)
Stars: ✭ 99 (-5.71%)
Mutual labels: jquery
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (-4.76%)
Mutual labels: angular2
Jquery For Beginners
Примеры кода для учебника "jQuery для начинающих"
Stars: ✭ 97 (-7.62%)
Mutual labels: jquery
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (-2.86%)
Mutual labels: jquery
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (-6.67%)
Mutual labels: angular2
Bootstrap Colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Stars: ✭ 1,351 (+1186.67%)
Mutual labels: jquery
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+8892.38%)
Mutual labels: jquery
Angular4 Primeng Admin
angular4-primeng-admin @angular/cli开发的后台模板
Stars: ✭ 99 (-5.71%)
Mutual labels: angular2
Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (-4.76%)
Mutual labels: jquery
ngx-slick
Support angular 6+, Slick 1.8.1
Installation
To install this library, run:
$ npm install ngx-slick --save
Consuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
$ npm install ngx-slick
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { SlickModule } from 'ngx-slick';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
SlickModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Include jquery and slick css/js in your application :
<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>
Once your library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use your library component in app.component.html -->
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
<button (click)="addSlide()">Add</button>
<button (click)="removeSlide()">Remove</button>
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>
slides = [
{img: "http://placehold.it/350x150/000000"},
{img: "http://placehold.it/350x150/111111"},
{img: "http://placehold.it/350x150/333333"},
{img: "http://placehold.it/350x150/666666"}
];
slideConfig = {"slidesToShow": 4, "slidesToScroll": 4};
addSlide() {
this.slides.push({img: "http://placehold.it/350x150/777777"})
}
removeSlide() {
this.slides.length = this.slides.length - 1;
}
afterChange(e) {
console.log('afterChange');
}
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © Mark
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].