Add themes.

dist/css/splide-core.min.css

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{display:flex;flex-wrap:wrap;margin:0!important;padding:0!important}.splide__pagination{display:inline-flex;align-items:center}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{position:relative;visibility:hidden}.splide.is-active{visibility:visible}.splide__slide{position:relative;box-sizing:border-box;list-style-type:none!important;margin:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{display:flex;flex-wrap:wrap;margin:0!important;padding:0!important}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{position:relative;visibility:hidden}.splide.is-active{visibility:visible}.splide__slide{position:relative;box-sizing:border-box;list-style-type:none!important;margin:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.0.2
+ * Version  : 2.1.0
  * License  : MIT
  * Copyright: 2019 Naotoshi Fujita
  */

gulpfile.js

@@ -48,11 +48,32 @@ const css = {
 		path: './src/sass/core/*.scss',
 		dest: './dist/css',
 	},
-	themes: {
-		path: [
-			'./src/sass/themes/default/*.scss',
-		],
-		dest: './dist/css/themes',
+	default: {
+		path    : './src/sass/core/*.scss',
+		dest    : './dist/css/themes',
+		basename: 'splide-default',
+		merge   : {
+			filename: 'splide.css',
+			path    : './src/sass/themes/default/*.scss',
+		},
+	},
+	skyblue: {
+		path    : './src/sass/core/*.scss',
+		dest    : './dist/css/themes',
+		basename: 'splide-skyblue',
+		merge   : {
+			filename: 'splide.css',
+			path    : './src/sass/themes/sky-blue/*.scss',
+		},
+	},
+	seagreen: {
+		path    : './src/sass/core/*.scss',
+		dest    : './dist/css/themes',
+		basename: 'splide-sea-green',
+		merge   : {
+			filename: 'splide.css',
+			path    : './src/sass/themes/sea-green/*.scss',
+		},
 	},
 };
 
@@ -86,13 +107,19 @@ gulp.task( 'build:sass', done => {
 				.pipe( concat( settings.merge.filename ) );
 		}
 
-		stream
+		stream = stream
 			.pipe( sassGlob() )
 			.pipe( sass() )
 			.pipe( postcss( [
 				cssnano( { reduceIdents: false } ),
 				autoprefixer( { overrideBrowserslist: [ '> 5%' ] } )
-			] ) )
+			] ) );
+
+		if ( settings.basename ) {
+			stream = stream.pipe( rename( { basename: settings.basename } ) );
+		}
+
+		stream
 			.pipe( rename( { suffix: '.min' } ) )
 			.pipe( gulp.dest( settings.dest ) );
 	} );

src/sass/core/object/modifiers/_ttb.scss

@@ -7,5 +7,9 @@
         display: block;
       }
     }
+
+    > #{$root}__pagination {
+      width: auto;
+    }
   }
 }

src/sass/core/object/objects/_pagination.scss

@@ -2,6 +2,10 @@
   &__pagination {
     display: inline-flex;
     align-items: center;
+    width: 95%;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0;
 
     li {
       list-style-type: none;

src/sass/themes/sea-green/foundation/_variables.scss

@@ -0,0 +1,17 @@
+// Main color.
+$main-color: #20b2aa;
+
+// Lighter main color.
+$light-main-color: lighten( $main-color, 20% );
+
+// Arrow SVG size.
+$arrow-size: 2.5em !default;
+
+// Pagination indicator width.
+$indicator-width: 20px !default;
+
+// Pagination indicator height.
+$indicator-height: 5px !default;
+
+// Height of a progress bar.
+$progress-bar-height: 3px !default;

src/sass/themes/sea-green/object/modifiers/_nav.scss

@@ -0,0 +1,25 @@
+.splide {
+  $root: &;
+
+  &--nav {
+    > #{$root}__track {
+      > #{$root}__list {
+        > #{$root}__slide {
+          border: 3px solid white;
+          cursor: pointer;
+          opacity: .7;
+          border-radius: 4px;
+
+          &.is-active {
+            border-color: $main-color;
+            opacity: 1;
+          }
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+}

src/sass/themes/sea-green/object/modifiers/_rtl.scss

@@ -0,0 +1,27 @@
+.splide {
+  $root: &;
+
+  &--rtl {
+    > #{$root}__track > #{$root}__arrows, > #{$root}__arrows {
+      #{$root}__arrow {
+        &--prev {
+          right: 1em;
+          left: auto;
+
+          svg {
+            transform: scaleX( 1 );
+          }
+        }
+
+        &--next {
+          left: 1em;
+          right: auto;
+
+          svg {
+            transform: scaleX( -1 );
+          }
+        }
+      }
+    }
+  }
+}

src/sass/themes/sea-green/object/modifiers/_ttb.scss

@@ -0,0 +1,43 @@
+.splide {
+  $root: &;
+
+  &--ttb {
+    > #{$root}__track > #{$root}__arrows, > #{$root}__arrows {
+      #{$root}__arrow {
+        left: 50%;
+        transform: translate( -50%, 0 );
+
+        &--prev {
+          top: 1em;
+
+          svg {
+            transform: rotateZ( -90deg );
+          }
+        }
+
+        &--next {
+          top: auto;
+          bottom: 1em;
+
+          svg {
+            transform: rotateZ( 90deg );
+          }
+        }
+      }
+    }
+
+    > #{$root}__pagination {
+      display: flex;
+      flex-direction: column;
+      bottom: 50%;
+      left: auto;
+      right: 1em;
+      transform: translate( 0, 50% );
+
+      #{$root}__pagination__page {
+        width: $indicator-height;
+        height: $indicator-width;
+      }
+    }
+  }
+}

src/sass/themes/sea-green/object/objects/_arrow.scss

@@ -0,0 +1,41 @@
+.splide {
+  &__arrow {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY( -50% );
+    border: none;
+    padding: 0;
+    background: transparent;
+
+    svg {
+      width: $arrow-size;
+      height: $arrow-size;
+      fill: $main-color;
+      transition: fill .2s linear;
+    }
+
+    &:hover {
+      cursor: pointer;
+      svg {
+        fill: $light-main-color;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--prev {
+      left: 1em;
+
+      svg {
+        transform: scaleX( -1 );
+      }
+    }
+
+    &--next {
+      right: 1em;
+    }
+  }
+}

src/sass/themes/sea-green/object/objects/_pagination.scss

@@ -0,0 +1,35 @@
+.splide {
+  &__pagination {
+    position: absolute;
+    z-index: 1;
+    bottom: 1em;
+    left: 50%;
+    transform: translateX( -50% );
+    padding: 0;
+
+    &__page {
+      display: inline-block;
+      width: $indicator-width;
+      height: $indicator-height;
+      background: #ccc;
+      border-radius: $indicator-height / 2;
+      margin: 3px;
+      padding: 0;
+      transition: all .2s linear;
+      border: none;
+
+      &.is-active {
+        background: $main-color;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background: $light-main-color;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}

src/sass/themes/sea-green/object/objects/_progress.scss

@@ -0,0 +1,9 @@
+.splide {
+  &__progress {
+    &__bar {
+      width: 0;
+      height: $progress-bar-height;
+      background: $main-color;
+    }
+  }
+}

src/sass/themes/sea-green/object/objects/_root.scss

@@ -0,0 +1,3 @@
+.splide {
+  padding: 3em;
+}

src/sass/themes/sea-green/object/objects/_slide.scss

@@ -0,0 +1,5 @@
+.splide {
+  &__slide {
+    border-radius: 4px;
+  }
+}

src/sass/themes/sea-green/object/objects/_spinner.scss

@@ -0,0 +1,6 @@
+.splide {
+  &__spinner {
+    border: 2px solid $main-color;
+    border-left-color: transparent;
+  }
+}

src/sass/themes/sea-green/splide-sea-green.scss

@@ -0,0 +1,5 @@
+@import 'foundation/**';
+
+@import 'object/objects/**';
+
+@import 'object/modifiers/**';

src/sass/themes/sky-blue/foundation/_variables.scss

@@ -0,0 +1,14 @@
+// Main color.
+$main-color: #00bfff;
+
+// Lighter main color.
+$light-main-color: lighten( $main-color, 20% );
+
+// Arrow SVG size.
+$arrow-size: 2.5em !default;
+
+// Dots indicator size.
+$dot-size: 10px !default;
+
+// Height of a progress bar.
+$progress-bar-height: 3px !default;

src/sass/themes/sky-blue/object/modifiers/_nav.scss

@@ -0,0 +1,24 @@
+.splide {
+  $root: &;
+
+  &--nav {
+    > #{$root}__track {
+      > #{$root}__list {
+        > #{$root}__slide {
+          border: 3px solid transparent;
+          cursor: pointer;
+          opacity: .7;
+
+          &.is-active {
+            border-color: $main-color;
+            opacity: 1;
+          }
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+}

src/sass/themes/sky-blue/object/modifiers/_rtl.scss

@@ -0,0 +1,27 @@
+.splide {
+  $root: &;
+
+  &--rtl {
+    > #{$root}__track > #{$root}__arrows, > #{$root}__arrows {
+      #{$root}__arrow {
+        &--prev {
+          right: 1em;
+          left: auto;
+
+          svg {
+            transform: scaleX( 1 );
+          }
+        }
+
+        &--next {
+          left: 1em;
+          right: auto;
+
+          svg {
+            transform: scaleX( -1 );
+          }
+        }
+      }
+    }
+  }
+}

src/sass/themes/sky-blue/object/modifiers/_ttb.scss

@@ -0,0 +1,38 @@
+.splide {
+  $root: &;
+
+  &--ttb {
+    > #{$root}__track > #{$root}__arrows, > #{$root}__arrows {
+      #{$root}__arrow {
+        left: 50%;
+        transform: translate( -50%, 0 );
+
+        &--prev {
+          top: 1em;
+
+          svg {
+            transform: rotateZ( -90deg );
+          }
+        }
+
+        &--next {
+          top: auto;
+          bottom: 1em;
+
+          svg {
+            transform: rotateZ( 90deg );
+          }
+        }
+      }
+    }
+
+    > #{$root}__pagination {
+      display: flex;
+      flex-direction: column;
+      bottom: 50%;
+      left: auto;
+      right: .5em;
+      transform: translate( 0, 50% );
+    }
+  }
+}

src/sass/themes/sky-blue/object/objects/_arrow.scss

@@ -0,0 +1,41 @@
+.splide {
+  &__arrow {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY( -50% );
+    border: none;
+    padding: 0;
+    background: transparent;
+
+    svg {
+      width: $arrow-size;
+      height: $arrow-size;
+      fill: $main-color;
+      transition: fill .2s linear;
+    }
+
+    &:hover {
+      cursor: pointer;
+      svg {
+        fill: $light-main-color;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--prev {
+      left: 1em;
+
+      svg {
+        transform: scaleX( -1 );
+      }
+    }
+
+    &--next {
+      right: 1em;
+    }
+  }
+}

src/sass/themes/sky-blue/object/objects/_pagination.scss

@@ -0,0 +1,36 @@
+.splide {
+  &__pagination {
+    position: absolute;
+    z-index: 1;
+    bottom: .5em;
+    left: 50%;
+    transform: translateX( -50% );
+    padding: 0;
+
+    &__page {
+      display: inline-block;
+      width: $dot-size;
+      height: $dot-size;
+      background: #ccc;
+      border-radius: 50%;
+      margin: 3px;
+      padding: 0;
+      transition: all .2s linear;
+      border: none;
+
+      &.is-active {
+        transform: scale( 1.4 );
+        background: $main-color;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background: $light-main-color;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}

src/sass/themes/sky-blue/object/objects/_progress.scss

@@ -0,0 +1,9 @@
+.splide {
+  &__progress {
+    &__bar {
+      width: 0;
+      height: $progress-bar-height;
+      background: $main-color;
+    }
+  }
+}

src/sass/themes/sky-blue/object/objects/_spinner.scss

@@ -0,0 +1,6 @@
+.splide {
+  &__spinner {
+    border: 2px solid $main-color;
+    border-left-color: transparent;
+  }
+}

src/sass/themes/sky-blue/splide-sky-blue.scss

@@ -0,0 +1,5 @@
+@import 'foundation/**';
+
+@import 'object/objects/**';
+
+@import 'object/modifiers/**';