问题描述
How to enable the PrevIoUs and next button for owl carousel in angular 6,7,8,9
how to add "arrow" for navigation in place of "prev/next" button using angular 6,9 i'm using the owl-carousel2?
I created the owl carousel in angular it's perfectly works but the "prev/next" navigation button for the carousel was not be enabled so please give me a solution to enable the "prev/next" navigation button...
Thank you...
app.component.html:
<div class="container text-center sampleMobile">
<!-- <div>Some tags before</div> -->
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>
<!-- <img src="../../assets/img-01.jpeg"> -->
<button class="btn btn-primary" value="ALL">ALL</button>
<button class="btn btn-primary" value="A">A</button>
<button class="btn btn-primary" value="B">B</button>
<button class="btn btn-primary" value="C">C</button>
<button class="btn btn-primary" value="D">D</button>
</ng-template>
<ng-template carouselSlide>
<!-- <img src="../../assets/img-02.jpeg"> -->
<button class="btn btn-primary" value="E">E</button>
<button class="btn btn-primary" value="F">F</button>
<button class="btn btn-primary" value="G">G</button>
<button class="btn btn-primary" value="H">H</button>
<button class="btn btn-primary" value="I">I</button>
</ng-template>
<ng-template carouselSlide>
<!-- <img src="../../assets/img-01.jpeg"> -->
<button class="btn btn-primary" value="J">J</button>
<button class="btn btn-primary" value="K">K</button>
<button class="btn btn-primary" value="L">L</button>
<button class="btn btn-primary" value="M">M</button>
<button class="btn btn-primary" value="F">N</button>
</ng-template>
<ng-template carouselSlide>
<button class="btn btn-primary" value="N">O</button>
<button class="btn btn-primary" value="P">P</button>
<button class="btn btn-primary" value="Q">Q</button>
<button class="btn btn-primary" value="R">R</button>
<button class="btn btn-primary" value="S">S</button>
</ng-template>
<ng-template carouselSlide>
<button class="btn btn-primary" value="T">T</button>
<button class="btn btn-primary" value="U">U</button>
<button class="btn btn-primary" value="V">V</button>
<button class="btn btn-primary" value="W">W</button>
<button class="btn btn-primary" value="X">X</button>
<button class="btn btn-primary" value="Y">Y</button>
<button class="btn btn-primary" value="Z">Z</button>
</ng-template>
</owl-carousel-o>
<!-- <div>Some tags after</div> -->
</div>
<router-outlet></router-outlet>
app.component.ts:
import { Component,OnInit } from '@angular/core';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'SampleFour';
constructor() { }
brandResponse;
ngOnInit() {
}
customOptions: OwlOptions = {
loop: true,mouseDrag: true,touchDrag: true,pullDrag: true,dots: true,navSpeed: 700,navText: ['',''],responsive: {
0: {
items: 1
},400: {
items: 2
},740: {
items: 3
},940: {
items: 1
}
},nav: true
}
}
angular.jaon:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"SampleFour": {
"projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/SampleFour","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets"
],"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/owl.carousel/dist/assets/owl.carousel.min.css","node_modules/owl.carousel/dist/assets/owl.theme.default.min.css","src/styles.css"
],"scripts": [
"node_modules/jquery/dist/jquery.min.js","node_modules/owl.carousel/dist/owl.carousel.min.js"
]
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "2mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "SampleFour:build"
},"configurations": {
"production": {
"browserTarget": "SampleFour:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "SampleFour:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
"src/styles.css"
],"scripts": []
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
],"exclude": [
"**/node_modules/**"
]
}
},"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "SampleFour:serve"
},"configurations": {
"production": {
"devServerTarget": "SampleFour:serve:production"
}
}
}
}
}},"defaultProject": "SampleFour"
}
如何在角度6,9中为猫头鹰轮播启用“上一个”和“下一个”按钮 我如何使用owl-carousel2使用角6,9代替“上一个/下一个”按钮来添加“箭头”进行导航？ 我创建了有角度的猫头鹰旋转木马，可以正常使用，但是未启用旋转木马的“上一个/下一个”导航按钮，因此请给我一个启用“上一个/下一个”导航按钮的解决方案... 谢谢...
解决方法
您需要这样的按钮
<button type="button" role="presentation" class="owl-prev">
Previous
</button>
请注意owl-previous类