Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ngx-owl-carousel
Advanced tools
Readme
This Library requires jquery and owl.carousel to be installed globally
For commonJs based application load jquery and owl.carousel using script loader or use link tag in html file
Install script-loader if you don't have already
npm install script-loader
and in vendor.ts
require('script!jquery');
require('script!owl.carousel');
OR
inside index.html put this inside the head tag
<script type="application/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
<script type="application/javascript" src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
If using angular-cli
Add this to angular-cli.json file
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"
]
To install this library, run:
$ npm install ngx-owl-carousel --save
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 { OwlModule } from 'ngx-owl-carousel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
OwlModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Include these two css files
owl.carousel.css file This is required css files.
owl.theme.default file This file is optional. However to use default navigation controls or dots buttons this file is necessary.
Inside angular-cli.json add these lines:
"styles": [
"../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
]
OR include these files in main scss file.
import "~owl.carousel/dist/assets/owl.carousel.css";
import "~owl.carousel/dist/assets/owl.theme.default.css";
OR include these files in index.html file inside head tag.
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">
Once your library is imported, you can use OwlCarousel component very easily in your Angular application:
<!-- You can use owl-carousel selector to include its component -->
<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('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
Note: Please remove comments from the above example else you will get errors.
This package is a wrapper for the jquery library owl.carousel. Jquery is not supported in Angular Universal currently. Therefore the carousel cannot be rendered server side. However if you are using angular universal, do not include owl.carousel ("/node_modules/owl.carousel/dist/owl.carousel.js") in server side configuration.
next(options?: any[])
previous(options?: any[])
to(options?: any[])
trigger(action: string, options?: any[])
<owl-carousel #owlElement
import {OwlCarousel} from 'ngx-owl-carousel';
export class HomeComponent {
@ViewChild('owlElement') owlElement: OwlCarousel
fun() {
this.owlElement.next([200])
//duration 200ms
}
}
All callbacks listed in native owl carousel's documentation https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html can be used in options properties.
Callbacks list:
This project is licensed under the terms of the MIT license.
FAQs
An angular (2 or 4) wrapper for jquery owl carousel library with dynamic carousel item change detection
The npm package ngx-owl-carousel receives a total of 2,694 weekly downloads. As such, ngx-owl-carousel popularity was classified as popular.
We found that ngx-owl-carousel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.