The track can be wrapped by a slider element for CSS styling. Fix lint errors.

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;margin:0!important;padding:0!important}.splide__pagination{display:inline-flex;align-items:center}.splide__pagination li{list-style-type:none;display:inline-block}.splide{position:relative;visibility:hidden}.splide__slide{position:relative;box-sizing:border-box;list-style-type:none!important}.splide__slide img{vertical-align:bottom}.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__sr{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.splide__track{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;margin:0!important;padding:0!important}.splide__pagination{display:inline-flex;align-items:center}.splide__pagination li{list-style-type:none;display:inline-block}.splide{position:relative;visibility:hidden}.splide__slide{position:relative;box-sizing:border-box;list-style-type:none!important}.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__sr{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.splide__track{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}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/arrows/index.js

@@ -57,13 +57,17 @@ export default ( Splide, Components, name ) => {
 		 * Called when the component is mounted.
 		 */
 		mount() {
-			const Elements = Components.Elements;
+			const Elements     = Components.Elements;
+			const arrowsOption = Splide.options.arrows;
+
 			arrows = Elements.arrows;
 
 			// If arrows were not found in HTML, let's generate them.
-			if ( ( ! arrows.prev || ! arrows.next ) && Splide.options.arrows ) {
+			if ( ( ! arrows.prev || ! arrows.next ) && arrowsOption ) {
 				arrows = createArrows();
-				root.insertBefore( arrows.wrapper, Elements.track );
+				const slider = Elements.slider;
+				const parent = arrowsOption === 'slider' && slider ? slider : root;
+				parent.insertBefore( arrows.wrapper, parent.firstChild );
 			}
 
 			if ( arrows ) {

src/js/components/elements/index.js

@@ -62,7 +62,9 @@ export default ( Splide ) => {
 		mount() {
 			const message = 'was not found.';
 
-			this.track = child( root, classes.track );
+			this.slider = child( root, classes.slider );
+
+			this.track = find( root, `.${ classes.track }` );
 			exist( this.track, `A track ${ message }` );
 
 			this.list = child( this.track, classes.list );
@@ -109,7 +111,7 @@ export default ( Splide ) => {
 	 * @return {Element|null} - A found element or null.
 	 */
 	function findParts( className ) {
-		return child( root, className ) || child( Elements.track, className );
+		return child( root, className ) || child( Elements.slider, className );
 	}
 
 	/**

src/js/components/layout/index.js

@@ -168,7 +168,7 @@ export default ( Splide, Components ) => {
 		 */
 		get numInView() {
 			return Resolver.numInView;
-		}
+		},
 	};
 
 	/**

src/js/components/layout/resolvers/horizontal.js

@@ -144,6 +144,6 @@ export default ( Splide, Components, options ) => {
 			}
 
 			return options.perPage;
-		}
+		},
 	}
 }

src/js/components/layout/resolvers/vertical.js

@@ -149,6 +149,6 @@ export default ( Splide, Components, options ) => {
 			}
 
 			return options.perPage;
-		}
+		},
 	}
 }

src/js/components/pagination/index.js

@@ -43,6 +43,13 @@ export default ( Splide, Components, name ) => {
 	 */
 	let data = {};
 
+	/**
+	 * Hold a parent element of pagination.
+	 *
+	 * @type {Element}
+	 */
+	let parent;
+
 	/**
 	 * Pagination component object.
 	 *
@@ -62,13 +69,9 @@ export default ( Splide, Components, name ) => {
 		mount() {
 			data = createPagination();
 
-			const root = Splide.root;
-
-			if ( Splide.options.pagination === 'top' ) {
-				root.insertBefore( data.list, Components.Elements.track );
-			} else {
-				root.appendChild( data.list );
-			}
+			const slider = Components.Elements.slider;
+			parent = Splide.options.pagination === 'slider' && slider ? slider : Splide.root;
+			parent.appendChild( data.list );
 
 			bind();
 		},
@@ -89,7 +92,7 @@ export default ( Splide, Components, name ) => {
 		 */
 		destroy() {
 			if ( data && data.list ) {
-				Splide.root.removeChild( data.list );
+				parent.removeChild( data.list );
 			}
 
 			Splide.off( ATTRIBUTES_UPDATE_EVENT );

src/js/components/sync/index.js

@@ -78,7 +78,7 @@ export default ( Splide ) => {
 			if ( isNavigation ) {
 				sibling.emit( 'navigation:mounted', Splide );
 			}
-		}
+		},
 	};
 
 	/**

src/js/constants/classes.js

@@ -20,6 +20,7 @@ const ROOT = 'splide';
  */
 export const ELEMENT_CLASSES = {
 	root      : ROOT,
+	slider    : `${ ROOT }__slider`,
 	track     : `${ ROOT }__track`,
 	list      : `${ ROOT }__list`,
 	slide     : `${ ROOT }__slide`,

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

@@ -0,0 +1,5 @@
+.splide {
+  &__slider {
+    position: relative;
+  }
+}