new animation and responsive

Author: César R. Contreras

package-lock.json

@@ -3,7 +3,13 @@
   "version": "1.0.1",
   "author": "c1sar",
   "description": "Angular 6 Simple slider",
-  "keywords": ["Angular 6", "angular", "slider", "slide", "c1sar"],
+  "keywords": [
+    "Angular 6",
+    "angular",
+    "slider",
+    "slide",
+    "c1sar"
+  ],
   "bugs": {
     "url": "https://github.com/c1sar/ng2-slider/issues"
   },

package.json

@@ -1,9 +1,10 @@
 <section #sliderSection class="slider">
-  <div [class]="(slide.className) ? 'slide ' + slide.className : 'slide'" *ngFor="let slide of slides">
-    <img [src]="slide.img" alt="">
+  <div [class]="(slide.className) ? 'slide ' + slide.className : 'slide'"
+    *ngFor="let slide of slides"
+    [style.background-image]="'url('+slide.img+')'">
     <span *ngIf="slide.html" [innerHtml]="slide.html"></span>
-    <h2 *ngIf="slide.title" [innerHtml]="slide.title"></h2>
-    <p *ngIf="slide.description" [innerHtml]="slide.description"></p>
+    <h2 *ngIf="slide.title" [innerHtml]="slide.title" [class.h2-no-button]="!slide.button && !slide.description"></h2>
+    <p *ngIf="slide.description" [class.p-no-button]="!slide.button" [innerHtml]="slide.description"></p>
     <button *ngIf="slide.button" class="btn btn-primary" type="button" (click)="clickEvent(slide)" i18n>
       {{slide.button.text}}
       <span class="line-1"></span>
@@ -15,7 +16,7 @@ <h2 *ngIf="slide.title" [innerHtml]="slide.title"></h2>
 </section>
 
 <section class="bullet-container">
-  <span class="bullet" *ngFor="let x of slides; index as i;"  
+  <span class="bullet" *ngFor="let x of slides; index as i;"
   [class.square]="squareBullets"
   [class.active]="i+1==currentSlidePos" (click)="setSlide(i+1)"></span>
 </section>

projects/slider/src/lib/slider.component.html

@@ -14,24 +14,26 @@ $mobile-tablet-portrait: "(max-width: 991px)";
 .slider {
   width: 100%;
   position: relative;
-  height: 100%;
-  min-height: 37.5rem;
+  min-height: inherit;
   overflow-y: hidden;
   display: flex;
-  align-items: center;
   overflow-x: hidden;
   .slide {
     width: 100%;
     min-width: 100%;
-    height: 100%;
-    min-height: 37.5rem;
+    min-height: inherit;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     position: relative;
     user-select: none;
     pointer-events: none;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+
     img {
       position: absolute;
       top: 0;
@@ -53,6 +55,9 @@ $mobile-tablet-portrait: "(max-width: 991px)";
     margin-right: 0.3125rem;
     user-select: none;
     pointer-events: none;
+    &.h2-no-button {
+      margin-bottom: 6.25rem;
+    }
   }
   p {
     margin: -3.75rem 2.375rem 0.625rem 2.375rem;
@@ -62,11 +67,16 @@ $mobile-tablet-portrait: "(max-width: 991px)";
     font-family: inherit;
     line-height: 1.25rem;
     text-align: center;
+
+    &.p-no-button {
+      margin-bottom: 6.25rem;
+    }
   }
   .btn {
     z-index: 20;
     user-select: none;
     pointer-events: visible;
+    margin-bottom: 6.25rem;
   }
 }
 
@@ -104,8 +114,8 @@ $mobile-tablet-portrait: "(max-width: 991px)";
       background-color: $color-primary-500;
     }
     @media (hover: none) {
-      &:hover { 
-        background-color: $color-white; 
+      &:hover {
+        background-color: $color-white;
       }
 
       &.active {
@@ -233,7 +243,7 @@ $a-size: 0.0063rem;
     transition: background-color 0.2s ease-in-out;
     background-color: transparent;
   }
-  
+
   .line-1, .line-2, .line-3, .line-4 {
     background-color: $color-primary-500;
   }

projects/slider/src/lib/slider.component.scss

@@ -1,4 +1,8 @@
 
 * {
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
+}
+
+lib-slider {
+  min-height: 100vh;
+}