diff --git a/package.json b/package.json
index acfb29f..1ae1459 100755
--- a/package.json
+++ b/package.json
@@ -19,46 +19,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^7.2.2",
-    "@angular/core": "^7.2.2",
-    "@angular/forms": "^7.2.2",
+    "@angular/common": "~8.1.2",
+    "@angular/core": "~8.1.2",
+    "@angular/forms": "~8.1.2",
     "@angular/http": "^7.2.2",
-    "@angular/platform-browser": "^7.2.2",
-    "@angular/platform-browser-dynamic": "^7.2.2",
-    "@angular/router": "^7.2.2",
+    "@angular/platform-browser": "~8.1.2",
+    "@angular/platform-browser-dynamic": "~8.1.2",
+    "@angular/router": "~8.1.2",
     "@ionic-native/core": "^5.0.0",
-    "@ionic-native/device": "^5.5.1",
+    "@ionic-native/device": "^5.21.5",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
-    "@ionic/angular": "^4.1.0",
+    "@ionic/angular": "^5.0.1",
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
     "rxjs": "~6.5.1",
-    "zone.js": "~0.8.29",
+    "zone.js": "~0.9.1",
     "tslib": "^1.9.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.13.8",
-    "@angular-devkit/build-angular": "~0.13.8",
+    "@angular-devkit/architect": "~0.801.2",
+    "@angular-devkit/build-angular": "~0.801.2",
     "@angular-devkit/build-ng-packagr": "~0.11.0",
-    "@angular-devkit/core": "~7.3.8",
-    "@angular-devkit/schematics": "~7.3.8",
-    "@angular/cli": "~7.3.8",
-    "@angular/compiler": "~7.2.2",
-    "@angular/compiler-cli": "~7.2.2",
-    "@angular/language-service": "~7.2.2",
-    "@ionic/angular-toolkit": "~1.5.1",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/core": "~8.1.2",
+    "@angular-devkit/schematics": "~8.1.2",
+    "@angular/cli": "~8.1.2",
+    "@angular/compiler": "~8.1.2",
+    "@angular/compiler-cli": "~8.1.2",
+    "@angular/language-service": "~8.1.2",
+    "@ionic/angular-toolkit": "~2.2.0",
+    "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~12.0.0",
-    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
+    "codelyzer": "~5.0.0",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
     "ng-packagr": "^4.2.0",
     "node-sass": "^4.12.0",
     "protractor": "~5.4.0",
@@ -66,7 +66,7 @@
     "tsickle": ">=0.29.0",
     "tslib": "^1.9.0",
     "tslint": "~5.16.0",
-    "typescript": "~3.1.6"
+    "typescript": "~3.4.3"
   },
   "description": "An Ionic project"
 }
diff --git a/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.scss b/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.scss
index 986ac86..f0f68b7 100644
--- a/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.scss
+++ b/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.scss
@@ -22,7 +22,7 @@
     }
 
     ion-footer {
-        height: 44px;
+        height: 57px;
 
         ion-toolbar {
             --min-height: 100%;
diff --git a/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.ts b/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.ts
index 6c2315d..eaabbcd 100644
--- a/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.ts
+++ b/projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component.ts
@@ -16,10 +16,10 @@ const moment = moment_;
 
 export class IonicTimepickerModalComponent implements OnInit, OnDestroy {
 
-  @ViewChild('sliderHours') sliderHours: IonSlides;
-  @ViewChild('sliderMinutes') sliderMinutes: IonSlides;
-  @ViewChild('sliderSeconds') sliderSeconds: IonSlides;
-  @ViewChild('sliderMeridian') sliderMeridian: IonSlides;
+  @ViewChild('sliderHours', { static: false }) sliderHours: IonSlides;
+  @ViewChild('sliderMinutes', { static: false }) sliderMinutes: IonSlides;
+  @ViewChild('sliderSeconds', { static: false }) sliderSeconds: IonSlides;
+  @ViewChild('sliderMeridian', { static: false }) sliderMeridian: IonSlides;
 
   hoursArray: any = [];
   minutesArray: any = [];
@@ -93,7 +93,7 @@ export class IonicTimepickerModalComponent implements OnInit, OnDestroy {
   inItTimePicker(): Observable<any> {
     const myObservable = new Observable(observer => {
       if (this.navParams.get('selectedTime')) {
-        console.log('Selected time =>', this.navParams.get('selectedTime'));
+        // console.log('Selected time =>', this.navParams.get('selectedTime'));
         this.selectedTime = this.navParams.get('selectedTime');
       }
       this.mainObj = this.initTimePickerObject(this.navParams.get('objConfig'));
@@ -115,17 +115,35 @@ export class IonicTimepickerModalComponent implements OnInit, OnDestroy {
 
   // get slider hours active index
   onChangeHoursSlide(event) {
-    this.sliderHoursActiveIndex = event.target.swiper.realIndex;
+    if (event.target.swiper.previousIndex === 0 && this.selectedTime === undefined) {
+      this.sliderHoursActiveIndex = event.target.swiper.realIndex;
+  } else  if ( event.target.swiper.previousIndex === 0 && event.target.swiper.realIndex !== 0) {
+      this.sliderHoursActiveIndex = event.target.swiper.realIndex - event.target.swiper.loopedSlides;
+  } else {
+      this.sliderHoursActiveIndex = event.target.swiper.realIndex;
+  }
   }
 
   // get slider minutes active index
   onChangeMinutesSlide(event) {
-    this.sliderMinutesActiveIndex = event.target.swiper.realIndex;
+    if (event.target.swiper.previousIndex === 0 && this.selectedTime === undefined) {
+      this.sliderMinutesActiveIndex = event.target.swiper.realIndex;
+  } else  if ( event.target.swiper.previousIndex === 0 && event.target.swiper.realIndex !== 0) {
+      this.sliderMinutesActiveIndex = event.target.swiper.realIndex - event.target.swiper.loopedSlides;
+  } else {
+      this.sliderMinutesActiveIndex = event.target.swiper.realIndex;
+  }
   }
 
   // get slider seconds active index
   onChangeSecondsSlide(event) {
-    this.sliderSecondsActiveIndex = event.target.swiper.realIndex;
+    if (event.target.swiper.previousIndex === 0 && this.selectedTime === undefined) {
+      this.sliderSecondsActiveIndex = event.target.swiper.realIndex;
+  } else  if ( event.target.swiper.previousIndex === 0 && event.target.swiper.realIndex !== 0) {
+      this.sliderSecondsActiveIndex = event.target.swiper.realIndex - event.target.swiper.loopedSlides;
+  } else {
+      this.sliderSecondsActiveIndex = event.target.swiper.realIndex;
+  }
   }
 
   // get slider seconds active index
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ed45b25..36efbfc 100755
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <ion-app>
-  <ion-split-pane>
-    <ion-menu>
+  <ion-split-pane contentId="main-content">
+    <ion-menu contentId="main-content" type="overlay">
       <ion-header>
         <ion-toolbar>
           <ion-title>Menu</ion-title>
@@ -18,6 +18,6 @@
         </ion-list>
       </ion-content>
     </ion-menu>
-    <ion-router-outlet main></ion-router-outlet>
+    <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-split-pane>
 </ion-app>
\ No newline at end of file
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 588bb1e..67eb2ab 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -5,8 +5,8 @@ import { IonicModule } from '@ionic/angular';
 import { RouterModule } from '@angular/router';
 
 import { HomePage } from './home.page';
-// import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 @NgModule({
   imports: [
diff --git a/src/app/reactive-form/reactive-form.module.ts b/src/app/reactive-form/reactive-form.module.ts
index 4fee487..74a037e 100644
--- a/src/app/reactive-form/reactive-form.module.ts
+++ b/src/app/reactive-form/reactive-form.module.ts
@@ -6,8 +6,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { ReactiveFormPage } from './reactive-form.page';
-// import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 const routes: Routes = [
   {
diff --git a/src/app/template-driven-form/template-driven-form.module.ts b/src/app/template-driven-form/template-driven-form.module.ts
index d4c4a1d..22b025e 100644
--- a/src/app/template-driven-form/template-driven-form.module.ts
+++ b/src/app/template-driven-form/template-driven-form.module.ts
@@ -4,8 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { TemplateDrivenFormPage } from './template-driven-form.page';
-// import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 const routes: Routes = [
   {
diff --git a/src/app/timepicker-button/timepicker-button.module.ts b/src/app/timepicker-button/timepicker-button.module.ts
index 36a50d6..3772359 100644
--- a/src/app/timepicker-button/timepicker-button.module.ts
+++ b/src/app/timepicker-button/timepicker-button.module.ts
@@ -6,7 +6,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { TimepickerButtonPage } from './timepicker-button.page';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 const routes: Routes = [
   {
diff --git a/src/app/timepicker-button/timepicker-button.page.ts b/src/app/timepicker-button/timepicker-button.page.ts
index aca28ec..bbbe9f2 100644
--- a/src/app/timepicker-button/timepicker-button.page.ts
+++ b/src/app/timepicker-button/timepicker-button.page.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { IonicTimepickerModule } from 'ionic-timepicker';
-import { IonicTimepickerModalComponent } from 'ionic-timepicker';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModalComponent } from 'ionic-timepicker';
+import { IonicTimepickerModalComponent } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker-modal/ionic-timepicker-modal.component';
 
 @Component({
   selector: 'app-timepicker-button',
diff --git a/src/app/timepicker-component/timepicker-component.module.ts b/src/app/timepicker-component/timepicker-component.module.ts
index 15b32a1..9d03c2d 100644
--- a/src/app/timepicker-component/timepicker-component.module.ts
+++ b/src/app/timepicker-component/timepicker-component.module.ts
@@ -6,8 +6,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { TimepickerComponentPage } from './timepicker-component.page';
-// import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 const routes: Routes = [
   {
diff --git a/src/app/timepicker-directive/timepicker-directive.module.ts b/src/app/timepicker-directive/timepicker-directive.module.ts
index 50996a2..31e5d4a 100644
--- a/src/app/timepicker-directive/timepicker-directive.module.ts
+++ b/src/app/timepicker-directive/timepicker-directive.module.ts
@@ -4,8 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { TimepickerDirectivePage } from './timepicker-directive.page';
-// import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
-import { IonicTimepickerModule } from 'ionic-timepicker';
+import { IonicTimepickerModule } from '../../../projects/ionic-timepicker/src/lib/ionic-timepicker.module';
+// import { IonicTimepickerModule } from 'ionic-timepicker';
 
 const routes: Routes = [
   {