unable to get styles in firefox,IE

[ghost]

It is working good in chrome,but unable to get styles in firefox,IE.

[kappys1]

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

[ghost]

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 >

Question 1

Previous Next

        <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

In firefox like this....

in chrome it is fine...

[kappys1]

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

[ghost]

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>

    <div class="item-carousel"><img src="http://i2.wp.com/farm1.staticflickr.com/502/19162022903_f8cd8501af.jpg?resize=500%2C271&ssl=1"></div>
    <div class="item-carousel"><img src="https://i.pinimg.com/736x/78/1d/29/781d2914510339a762267ed4913cb62b.jpg"></div>
    <div class="item-carousel"><img src="https://i.ytimg.com/vi/C9d_dstzYOE/maxresdefault.jpg"></div>
  </carousel-component>

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,

[kappys1]

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

[ghost]

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 fullScreen 
   <carousel-component #topCarousel [perspective]="100">
       <div class="item-carousel a">a</div>
       <div class="item-carousel b"><div>b</div></div> 
       <div class="item-carousel c">c</div>
       <div class="item-carousel d">d</div>
       <div class="item-carousel e">e</div>
       <div class="item-carousel f">f</div>
   </carousel-component> 

In chrome:

In Firefox:

any guess??

[kappys1]

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?

[ghost]

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.

[kappys1]

No worries, I info you when the problem is solved! Thanks for your report