Comments (9)
Hi!
Do you have images in your slides? this can the reason for your problem in firefox and IE.
If your want solve quickly this problem you can try add in your css pointer-events: none;
for example:
.item-carousel img{ pointer-events: none; }
I will solve this for the next releases!
Thanks
from angular2-carousel.
hi,
Thanks for reply.
I dont have any images in my slide
My code is simply like this,
Cube -mode working fine in chrome,but in firefox it is simply like normal slide,below i am attaching screenshots
<carousel-component class="cube-mode" [mode]="'horizontal'" [perspective]="100" #topCarousel >
<h1>Question 1</h1>
<button type="button" class="btn btn-primary" (click)="forBeforeSlide()">Previous</button>
<button type="button" class="btn btn-primary" (click)="forNextSlide()">Next</button>
</div>
<div class="item-carousel">
<h1>Question 2</h1>
<button type="button" class="btn btn-primary" (click)="forBeforeSlide()">Previous</button>
<button type="button" class="btn btn-primary" (click)="forNextSlide()">Next</button>
</div>
<div class="item-carousel">
<h1>Question 3</h1>
<button type="button" class="btn btn-primary" (click)="forBeforeSlide()">Previous</button>
<button type="button" class="btn btn-primary" (click)="forNextSlide()">Next</button>
</div>
<div class="item-carousel">
<h1>Question 4</h1>
<button type="button" class="btn btn-primary" (click)="forBeforeSlide()">Previous</button>
<button type="button" class="btn btn-primary" (click)="forNextSlide()">Next</button>
</div>
In this i am getting cube mode in chrome,but not in firefox and IE
from angular2-carousel.
I think that you don't init fine the carousel-component, I don't see the tag close.
And I don't see the open div item-carousel...
this is a problem? if you want you can't show me the problem on plunkr or similar because If you enter in my examples page with firefox, the cube mode works fine
from angular2-carousel.
Hi,
I properly closed my tag also..
I also tried with below simple code,what you gave in your example,
In Html:-
<carousel-component class="cube-mode" [mode]="'horizontal'" [perspective]="100" #topCarousel>
Result In Chrome:
Result in firefox and IE:
can you please help me to solve this?
am i missing any thing here?
I am also added this module in app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { DataTablesModule } from 'angular-datatables';
import {HttpClientModule} from '@angular/common/http';
import { CommonModule } from '@angular/common';
import {CarouselComponent} from "angular2-carousel";
import { AppComponent } from './app.component';
import { TaskListComponent} from './taskManagement/taskList.component';
import { AddTask} from './addTask/addTask.componnet';
import {EditTask} from './editTask/editTask.component';
import {HomeComponnet} from './home/home.component';
import {CarouselModule} from "angular2-carousel";
@NgModule({
declarations: [
AppComponent,
TaskListComponent,
AddTask,
EditTask,
HomeComponnet
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes),
DataTablesModule,
HttpClientModule,
CommonModule,
CarouselModule
],
providers: [DataManagerService],
bootstrap: [AppComponent]
})
export class AppModule {
}
And also in Component,
from angular2-carousel.
Thanks for your issue, I find a bug because I don't know why the component doesn't inject fine the perspective property...
In next release, I hope today, solve it.
but if you want set manually for continue work, you can add in your css example in plunk :
carousel-component .container {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
change with your perspective value
from angular2-carousel.
Hi,
Thank you for spending your valuable time,I did changes as your plunker
still i am not getting...
In sytle:
/* Styles go here */
.a{
background-color:red;
font-size:40px;
}
.b{
background-color:blue;
font-size:60px;
color:white;
display: -ms-flexbox;
display: -webkit-flex;
display: flex!important;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.c{
background-color:yellow;
}
.e{
background-color:green;
}
.f{
background-color:purple;
}
carousel-component .container {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
In Html:
Example Carrousel
Test in fullScreenIn chrome:
In Firefox:
any guess??
from angular2-carousel.
for my this example work fine... I don't know... can you check your version and see if is compatible? you can check availables browsers with perspective property here : https://caniuse.com/#search=perspective
Is possible that your firefox version is lower?
Other thing, you can check that the perspective property is set in component with the inspector?
from angular2-carousel.
Hi,
Thank you so much,
Its worked for me now.
now i add that css code globally in style.css instead of keeping that code in related css file.
from angular2-carousel.
No worries,
I info you when the problem is solved!
Thanks for your report
from angular2-carousel.
Related Issues (13)
- Removing a item from a carousel HOT 3
- Angular 7 HOT 3
- Looping images available HOT 1
- Error NgModule.declarations in angular 8 HOT 5
- Problem in IE HOT 2
- activeIndex does not exist on type HOT 9
- Looping not working HOT 2
- Support SSR HOT 1
- Bug when third item reached HOT 6
- Carousel is not working with ngFor HOT 21
- Initially it's not working correctly. But after resizing it's coming perfectly. Why so? HOT 10
- center carousel item clicked??? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-carousel.