kappys1 / angular2-carousel

An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5

Angular2-Carousel

OLD VERSION - DEPRECATED VERSION

An lightweight, touchable and responsive library to create a carousel for angular 2+

NEW VERSION HERE NX-ANGUAR

I make a new version for angular, compatible with 7.0.0 without dependencies. NO MORE HAMMER

ngx-carousel-lib NPM

ngx-carousel-lib github

ngx-carousel-lib web

.

.

.

.

.

.

.

Demo

demos available here

Install

You can install the package from our npm package

 npm install --save angular2-carousel

check if not install all peer dependencies:

npm install @types/hammerjs
npm install hammerjs

Usage

First tou need to provide the CarouselModule to your desired Module

import {CarouselModule} from "angular2-carousel";

// In your App's module or Custom Module:
@NgModule({
    imports: [
       CarouselModule
    ] 
})

note : if you install library from github, you should import from angular2-carousel/dist

Now, you can use CarouselModule as follow:

<carousel-component >
    <div class="item-carousel">a</div>
    <div class="item-carousel">
        <div class="b">
            <img/>
            .
            .
            .
        </div>
    </div>
    <div class="item-carousel">c</div>
    <div class="item-carousel">d</div>
</carousel-component>

All slides of carousel must have .item-carousel

Preview

API Documentation

you can see here or in web

Author

Alex Marcos Gutierrez TMTFactory

License

MIT

angular2-carousel's Issues

Removing a item from a carousel

Hello,

I'm using the carousel to create a list of items, each letter is a carousel item.

I pass an array of letters to the component and create several letters of the abcdario, when the user selects one of these letters I remove it from the string array, but in the property of the carousel they continue :(

Here the logic from component:

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import {CarouselComponent} from "angular2-carousel";

@Component({
  selector: 'app-teste',
  templateUrl: './teste.component.html',
  styleUrls: ['./teste.component.css']
})

export class TesteComponent implements OnInit {

  @Input() letras : string[]
  @Input() letrasSelecionadas : string[]

  @ViewChild('carousel') carousel : CarouselComponent

  ngOnInit() {
    
  }

  enviarALetraSelecionada()
  {
    this.letrasSelecionadas.push(this.letras[this.carousel.carousel.activeIndex])
    this.letras.splice(this.carousel.carousel.activeIndex, 1)
    
    this.carousel.reInit()
    this.carousel.update()
    }


}

And rendering it in HTML:

<carousel-component #carousel>
  <div *ngFor="let letra of letras" class="item-carousel letra">
    {{letra}}
  </div>
</carousel-component>

<button (click)="enviarALetraSelecionada()">Enviar</button>
<br>
LETRAS SELECIONADAS:

<span *ngFor="let letraSelecionada of letraSelecionadas">
  {{letraSelecionadas}}
</span>

I'm grateful if you can help

activeIndex does not exist on type

Hi, I'm trying to modify the carousel so that when I reach a certain slide it triggers a text change in another div (a caption).

I figured out, through the API, that i need to set a function like:
fooIndexActive() { if (this.CarouselComp.activeIndex(1)) { el.text("foo") }; }

but i get the typescript error 'property activeIndex does not exist on type 'CarouselComponent'.
Am I doing something wrong?

Looping not working

Hi, I am using this library for a slider and don't know how to make it loop through elements as when I try with the [loop]="true" it doesn't change anything.
Is that the right way to activate looping? thanks in advance!

Initially it's not working correctly. But after resizing it's coming perfectly. Why so?

Initially it's not working correctly. But after resizing it's coming perfectly. Why so?

Initial state:

After resizing:

My code:

<carousel-component class="style-carousel" [mode]="'horizontal'" [morePairSlides]="3" [angle]="25" [margin]="-50" #topCarousel style="width: 100%" (onReachEnd)="topCarousel.slideTo(0)"> <div class="item-carousel" ><button class="btn blue-btn" id="item-1">Ethanol</button> </div > <div class="item-carousel" ><button class="btn blue-btn" id="item-2">50% KOH</button></div> <div class="item-carousel" ><button class="btn blue-btn" id="item-3">Water</button></div> <div class="item-carousel" ><button class="btn blue-btn" id="item-4">3N HCL</button></div> <div class="item-carousel" ><button class="btn blue-btn" id="item-5">Hexane</button></div> <div class="item-carousel"><buttonclass="btn blue-btn" id="item-6">Other</button></div> </carousel-component>

css:
`.item-carousel div,
.item-carousel .btn{
height: 100%;
width: 100%;
}
.item-carousel div{
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

.carousel .item-carousel {
border: none;
}

:host carousel-component{
display: block;
overflow: hidden;
padding: 8px 6px;
width: 50%;
margin: 0 auto;
margin-top: 7%;
}
h1{
font-size: 3vh;
font-weight: 200;
color: #1976d2;
}

.item-carousel{
background-color: rgba(255,255,255,0);
display: -ms-flexbox!important;
display: -webkit-flex!important;
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;
width: 100px!important;
height: 40px!important;
top:0vh;
border: none !important;
}

.item-carousel div,
.item-carousel button{
height: 40px;
width: 70px;
}
.item-carousel div{
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

.parameter-option{
margin-right: /* 2%; */0%;
}
.parameters-content{
font-size: 1.8vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.parameters-content button,
.parameters-content select,
.parameters-content input{
font-size: 1.5vh;
}
p.show-code{
color: #ab2300;
}
p{
font-size: 1.8vh;
}

:host carousel-component.style-carousel.ready .item-carousel{
-webkit-transition: all 500ms !important;
-moz-transition:all 500ms!important;
-o-transition: all 500ms!important;
transition: all 500ms!important;
}
:host carousel-component.style-carousel.ready .item-carousel.actual{
height: 40px!important;
/* top:-2.5vh; /
width: 100px !important;
z-index: 2 !important;
opacity: 1 !important;
/ transform: translateZ(4px) !important; */
}

:host carousel-component.style-carousel.ready .item-carousel.prev{
margin-top: 6.75% !important;
height: 35px!important;
/* top:-2.5vh; /
width: 100px !important;
z-index: 1 !important;
opacity: 0.3 !important;
}
:host carousel-component.style-carousel.ready .item-carousel .prev:last-child{
margin-top: 6.75% !important;
height: 35px!important;
/ top:-2.5vh; /
width: 100px !important;
z-index: 1 !important;
opacity: 0.5 !important;
}
:host carousel-component.style-carousel.ready .item-carousel.next{
margin-top: 6.75% !important;
height: 35px!important;
/ top:-2.5vh; /
width: 100px !important;
z-index: 1 !important;
opacity: 0.3 !important;
}
:host carousel-component.style-carousel.ready .item-carousel .next:first-child{
margin-top: 6.75% !important;
height: 35px!important;
/ top:-2.5vh; /
width: 100px !important;
z-index: 1 !important;
opacity: 0.5 !important;
}
:host carousel-component.cube-mode.ready >>> .container{
perspective: 10%!important;
}
/ :host carousel-component .container{
width: 100px!important;
width: 40px!important;
} /
/ Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
h1{
font-size: 2.5vh;
}
.button-toggle,
p{
font-size: 1.7vh;
}
.parameters-content {
font-size: 1.7vh;
}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
:host carousel-component{
width: 100px;
}
h1{
font-size: 2.7vh;
}
.button-toggle{
font-size: 1.6vh;
}

}
@media (min-width: 2000px) {
:host carousel-component.cube-mode.ready >>> .container{
perspective: 15%!important;
}
.item-carousel{
width: 100px!important;
height: 40px!important;
}
}
.container .carousel .item-carousel {
border: none !important;
}

`

Support SSR

Hi, could you please add support for server side rendering.
Currently, an unhandled exception "window is not defined" error is being thrown.
Thanks in advance!

center carousel item clicked???

how to check whether the carousel item clicked , is the center carousel item or not?????

Error NgModule.declarations in angular 8

Hi
I am using angular 8 and then I got this error when I type ng serve
ERROR in Value at position 0 in the NgModule.declarations of CarouselModule is not a reference: [object Object]

below are my dependencies

"dependencies": {
    "@angular/animations": "~8.2.13",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.13",
    "@angular/compiler": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.13",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.13",
    "@angular/platform-browser-dynamic": "~8.2.13",
    "@angular/pwa": "^0.803.16",
    "@angular/router": "~8.2.13",
    "@angular/service-worker": "~8.2.13",
    "@ng-bootstrap/ng-bootstrap": "^5.1.2",
    "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
    "angular2-carousel": "^1.0.17",
    "bootstrap": "^4.3.1",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.5.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.16",
    "@angular/cli": "~8.3.16",
    "@angular/compiler-cli": "~8.2.13",
    "@angular/language-service": "~8.2.13",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.12.3",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "typescript": "^3.4.5"
  }

unable to get styles in firefox,IE

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

Problem in IE

Hi,
working excellent in chrome ,firefox.but in IE i am getting cube mode like this...and mouse moves very hard...not as like in other browser...

is there any solutions??
is there any changes in css file??

In IE:

In firefox:

Carousel is not working with ngFor

Please check this . When i apply for loop then this show blank screen.

`<carousel-component class="cube-mode" [mode]="'horizontal'" [perspective]="100" #topCarousel>

`

Looping images available

It is posible looping images?

Angular 7

Hello,

Compatible with Angular 7 ?

thanks

Bug when third item reached

Hi, Good evening,

Before all, congratulations for your carousel, it's awesome. Said this, I have a bug when "touch sliding" to the third of six items.

I've noticed this is because when you apply to the ".carousel" element style="transform: rotateY(-90deg)" the item gets width 0, making imposible to slide again. I'll try to fix it by my own, but would be great if you can help, thanks.