entirely revamped responsive ui-carousel

README.md

@@ -1,22 +1,20 @@
 # 🌀ui-carousel 
 
-✨  Carousel component for angular 4 and 5
+✨  Carousel component for Angular
 
 ## 💥 Features :
 - 👌 Supports touch events
 - ⚡️ Image lazy loading
 - 😈 No third party library
 - 😎 Easy to use API
-## Install
-``` npm install ui-carousel --save ```
 
 ## Demo :
 
-## [Demo](https://bougarfaoui.github.io/ui-carousel/)
+## [Demo](https://joscmw95.github.io/ui-carousel/index.html)
 
 ## Example :
 ```html
-    <ui-carousel [infinite]="true" [fade]="false" [speed]="200" >
+    <ui-carousel [infinite]="true" [speed]="200" >
         <ui-carousel-item *ngFor="let item of items">
             <img [ui-lazy-load]="item.img">
         </ui-carousel-item>
@@ -26,15 +24,15 @@
 
 ### Inputs 
 
-Inputs           | Type            | Description                                                  
----------------- | --------------- | -----------                                           
-`infinite`       | `boolean`       | Infinite carousel                     
-`arrows`         | `boolean`       | Show/hide Arrows                                                            
-`dots`           | `boolean`       | Show/hide Dots       
-`speed`          | `number`        | Speed (in milliseconds)       
-`fade`           | `bool`          | Enable fade mode                                                             
-`height`         | `string`        | Height of the carousel (in px or %)             
-`width`          | `string`        | Width of the carousel (in px or %)
+Inputs              | Type            | Description                                                  
+------------------- | --------------- | -----------                                           
+`infinite`          | `boolean`       | Infinite carousel (Defaults to true)               
+`arrows`            | `boolean`       | Show/hide Arrows (Defaults to true)                                                            
+`dots`              | `boolean`       | Show/hide Dots (Defaults to true)       
+`speed`             | `number`        | Speed (in milliseconds) (Defaults to 400)             
+`autoPlay`          | `boolean`       | Enable autoplay (Defaults to true) 
+`autoPlaySpeed`     | `number`        | Autoplay interval (in milliseconds) (Defaults to 5000)
+`thresholdFraction` | `number`        | Swipe distance to trigger slide change
 
 ### Directives : 
 

examples/src/app/app.component.html

@@ -4,7 +4,7 @@
     </div>
 
     <div>
-        <a href="#" class="github-icon">
+        <a href="https://github.com/joscmw95/ui-carousel" class="github-icon">
             <span>Github</span>
             <img src="./assets/github.png" alt="">
         </a>
@@ -19,10 +19,6 @@
 <br>
 <br>
 <br>
-<fade-carousel></fade-carousel>
-<br>
-<br>
-<br>
 <custom-dots></custom-dots>
 <br>
 <br>
@@ -37,7 +33,7 @@
 <br>
 
 <!-- <div class="wr">
-    <ui-carousel [infinite]="false" [fade]="false" [speed]="200" >
+    <ui-carousel [infinite]="false" [speed]="200" >
         <ui-carousel-item color="red">
             <img id="img" [ui-lazy-load]="'./assets/1.jpg'" alt="" draggable="false">
         </ui-carousel-item>

examples/src/app/app.module.ts

@@ -3,28 +3,24 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent,  } from './app.component';
 import { InfiniteCarouselComponent } from "./infinite-carousel/infinite-carousel.component";
-import { FadeCarouselComponent } from "./fade-carousel/fade-carousel.component";
 import { FiniteCarouselComponent } from "./finite-carousel/finite-carousel.component";
 import { CustomDotsComponent } from "./custom-dots/custom-dots.component";
 import { CustomArrowsComponent } from "./custom-arrows/custom-arrows.component";
 import { LazyLoadingComponent } from './lazyloading/lazyloading.component';
-import { SelectModule } from 'ng-select'
-import { UICarouselModule } from "ui-carousel";
+import { UICarouselModule } from './ui-carousel';
 
 @NgModule({
   declarations: [
     AppComponent,
     InfiniteCarouselComponent,
     FiniteCarouselComponent,
-    FadeCarouselComponent,
     CustomDotsComponent,
     CustomArrowsComponent,
     LazyLoadingComponent
   ],
   imports: [
     BrowserModule,
-    UICarouselModule,
-    SelectModule
+    UICarouselModule
   ],
   providers: [],
   bootstrap: [AppComponent]

examples/src/app/custom-arrows/custom-arrows.component.css

@@ -91,6 +91,8 @@ ui-carousel{
     margin-left: 10px;
 }
 
-img{
+.responsive-img {
+    height: 300px;
     width: 100%;
+    object-fit: cover;
 }

examples/src/app/custom-arrows/custom-arrows.component.html

@@ -1,23 +1,22 @@
 <div style="text-align:center; margin:10px;font-size: 25px; ">
     Custom arrows
 </div>
-
-<ui-carousel #uiCarousel [infinite]="true" [fade]="false" [speed]="200" [arrows]="false" height="300px" width="700px">
-    <ui-carousel-item>
-        <img src="./assets/2.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <ui-carousel-item>
-        <img src="./assets/1.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <ui-carousel-item>
-        <img src="./assets/3.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <div class="button">Code source</div>
-
+<div style="max-width: 768px; margin: auto; position: relative;">
+    <ui-carousel #uiCarousel [infinite]="true" [speed]="200" [arrows]="false">
+        <ui-carousel-item>
+            <img src="./assets/2.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+        <ui-carousel-item>
+            <img src="./assets/1.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+        <ui-carousel-item>
+            <img src="./assets/3.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+    </ui-carousel>
     <div class="left-arrow" (click)="uiCarousel.prev()">
         <img src="assets/arrow-left.png" alt="">
     </div>
     <div class="right-arrow" (click)="uiCarousel.next()">
         <img src="assets/arrow-right.png" alt="">
     </div>
-</ui-carousel>
+</div>

examples/src/app/custom-dots/custom-dots.component.css

@@ -1,57 +1,28 @@
-:host{
+:host {
     display: block;
     width: 100%;
 }
 
-ui-carousel{
+ui-carousel {
     display: block;
     margin: 0 auto;
 }
-.text{
-    text-align:  center;
+
+.text {
+    text-align: center;
     line-height: 300px;
     font-size: 40px;
     color: #fff;
 }
 
-.button{
-    user-select: none;
-    height: 35px;
-    width: 120px;
-    line-height: 35px;
-    color: gray;
-    background: #fff;
-    text-align: center;
-    border-radius: 2px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    z-index: 5;
-    left: 50%;
-    bottom: 50px;
-    transform: translateX(-50%);
-    -webkit-transform: translateX(-50%);
-    -moz-transform: translateX(-50%);
-    -o-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-
-    transition: all .3s;
-    -webkit-transition: all .3s;
-    -moz-transition: all .3s;
-    -o-transition: all .3s;
-    -ms-transition: all .3s;
-}
-
-.button:hover{
-    cursor: pointer;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
-}
-
-.dots{
+.dots {
     height: 4px;
-    width: 680px;
-    padding: 0 10px;
-    position: absolute;
+    margin: auto;
     bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    position: absolute;
+    padding: 0 10px;
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -62,17 +33,25 @@ ui-carousel{
     justify-content: space-between;
 }
 
-.dot{
+.dot {
     height: 100%;
     width: 200px;
-    background: rgba(256, 256, 256, 0.7);
+    background: rgba(256, 256, 256, 0.6);
     padding: 0 3px;
     border-radius: 1px;
 }
-.dot:hover{
+
+.dot:hover {
+    background: rgba(256, 256, 256, 0.8);
     cursor: pointer;
 }
 
-img{
+.dot.active {
+    background: rgba(256, 256, 256, 0.8);
+}
+
+.responsive-img {
+    height: 300px;
     width: 100%;
+    object-fit: cover;
 }

examples/src/app/custom-dots/custom-dots.component.html

@@ -1,21 +1,21 @@
 <div style="text-align:center; margin:10px;font-size: 25px; ">
     Custom dots
 </div>
-
-<ui-carousel #uiCarousel [infinite]="true" [fade]="false" [speed]="200" height="300px" width="700px" [dots]="false">
-    <ui-carousel-item>
-        <img src="./assets/3.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <ui-carousel-item>
-        <img src="./assets/1.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <ui-carousel-item>
-        <img src="./assets/2.jpg" alt="" draggable="false">
-    </ui-carousel-item>
-    <div class="button">Code source</div>
+<div style="max-width: 768px; margin: auto; position: relative;">
+    <ui-carousel #uiCarousel [infinite]="true" [speed]="200" height="300px" width="700px" [dots]="false">
+        <ui-carousel-item>
+            <img src="./assets/3.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+        <ui-carousel-item>
+            <img src="./assets/1.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+        <ui-carousel-item>
+            <img src="./assets/2.jpg" class="responsive-img" alt="" draggable="false">
+        </ui-carousel-item>
+    </ui-carousel>
     <div class="dots">
         <div class="dot" (click)="uiCarousel.goTo(0)"></div>
         <div class="dot" (click)="uiCarousel.goTo(1)"></div>
         <div class="dot" (click)="uiCarousel.goTo(2)"></div>
     </div>
-</ui-carousel>
+</div>