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,7,8,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",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"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,7,8,9中启用猫头鹰旋转木马的"上一步"one_answers"下一步"按钮如何添加"；箭头"；以代替"导航"；上一个/下一个"；按钮使用角6,7,8,9我在使用猫头鹰屋2？我用棱角分明的方式制作了猫头鹰旋转木马，它非常完美，但"；上一个/下一个"；转盘的导航按钮没有被启用，所以请给我一个解决方案；上一个/下一个"；导航按钮。。。非常感谢。
您需要一个类似的按钮
<button type="button" role="presentation" class="owl-prev">
Previous
</button>
请注意owl-previous类