Fixed component controls to work in IE11

Author: sconix

src/lib/swiper.component.html

@@ -5,8 +5,8 @@
 
   <div [hidden]="config?.scrollbar !== '.swiper-scrollbar'" class="swiper-scrollbar"></div>
 
-  <div [hidden]="config?.prevButton !== '.swiper-button-prev'" class="swiper-button-prev" [attr.disabled]="isAtFirst"></div>
-  <div [hidden]="config?.nextButton !== '.swiper-button-next'" class="swiper-button-next" [attr.disabled]="isAtLast"></div>
+  <div [hidden]="config?.prevButton !== '.swiper-button-prev'" class="swiper-button-prev" [attr.disabled]="isAtFirst || null"></div>
+  <div [hidden]="config?.nextButton !== '.swiper-button-next'" class="swiper-button-next" [attr.disabled]="isAtLast || null"></div>
 
-  <div [hidden]="config?.pagination !== '.swiper-pagination'" class="swiper-pagination" (click)="directiveRef.setIndex($event.target.attributes.index.value)"></div>
+  <div [hidden]="config?.pagination !== '.swiper-pagination'" class="swiper-pagination" (click)="directiveRef.setIndex($event.target.getAttribute('index'))"></div>
 </div>

src/lib/swiper.component.scss

@@ -48,13 +48,16 @@ swiper {
         pointer-events: none;
 
         .swiper-pagination-handle {
+          position: relative;
+
+          padding: 4px;
           margin: 2px;
 
           cursor: pointer;
           pointer-events: all;
 
           .swiper-pagination-bullet {
-            pointer-events: none;
+            margin: 0;
           }
 
           .swiper-pagination-bullet-last,
@@ -105,7 +108,7 @@ swiper {
 
               &.swiper-pagination-bullet-last,
               &.swiper-pagination-bullet-first {
-                margin: 5px -1px;
+                margin: 0 -1px;
               }
             }
           }
@@ -128,7 +131,7 @@ swiper {
             .swiper-pagination-bullet {
               &.swiper-pagination-bullet-last,
               &.swiper-pagination-bullet-first {
-                margin: -1px 5px;
+                margin: -1px 0;
               }
             }
           }

src/lib/swiper.component.ts

@@ -134,18 +134,20 @@ export class SwiperComponent implements DoCheck {
     }
 
     if (options.pagination === '.swiper-pagination' && !options.paginationBulletRender) {
+      options.paginationClickable = false;
+
       if (!this.paginationBulletRender) {
         this.paginationBulletRender = (swiper, index, className) => {
+          let bullet = `<span class="${className} ${className}-middle" index="${index}"></span>`;
+
           if (index === 0) {
-            return '<span class="swiper-pagination-handle" index=' + index + '>' +
-              '<span class="' + className + ' ' + className + '-first"></span></span>';
+            bullet = `<span class="${className} ${className}-first" index="${index}"></span>`;
+
           } else if (index === (swiper.slides.length - 1)) {
-            return '<span class="swiper-pagination-handle" index=' + index + '>' +
-              '<span class="' + className + ' ' + className + '-last"></span></span>';
-          } else {
-            return '<span class="swiper-pagination-handle" index=' + index + '>' +
-              '<span class="' + className + ' ' + className + '-middle"></span></span>';
+            bullet = `<span class="${className} ${className}-last" index="${index}"></span>`;
           }
+
+          return `<span class="swiper-pagination-handle" index="${index}">${bullet}</span>`;
         };
       }
 

tslint.json

@@ -79,7 +79,8 @@
     "radix": true,
     "semicolon": [
       true,
-      "always"
+      "always",
+      "ignore-interfaces"
     ],
     "triple-equals": [
       true,
@@ -107,13 +108,13 @@
       "check-type"
     ],
     "directive-selector": [
-      true,
+      false,
       "attribute",
       false,
       "camelCase"
     ],
     "component-selector": [
-      true,
+      false,
       "element",
       false,
       "kebab-case"