🛠 #1252 move controls in DOM first

metafizzy · Jan 16, 2023 · 777b362 · 777b362
1 parent 527d6e5
commit 777b362
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/css/flickity.css b/css/flickity.css
@@ -95,6 +95,7 @@ https://flickity.metafizzy.co
   top: 50%;
   width: 44px;
   height: 44px;
+  z-index: 1; /* above viewport */
   border-radius: 50%;
   /* vertically center */
   transform: translateY(-50%);
@@ -127,6 +128,7 @@ https://flickity.metafizzy.co
   position: absolute;
   width: 100%;
   bottom: -25px;
+  z-index: 1; /* above viewport */
   text-align: center;
   display: flex;
   justify-content: center;

diff --git a/js/page-dots.js b/js/page-dots.js
@@ -100,7 +100,7 @@ proto.activatePageDots = function() {
   this.pageDots.setDots( this.slides.length );
   this.focusableElems.push( ...this.pageDots.dots );
   this.pageDots.holder.addEventListener( 'click', this.handlePageDotsClick );
-  this.element.append( this.pageDots.holder );
+  this.element.insertBefore( this.pageDots.holder, this.viewport );
 };
 
 proto.onPageDotsClick = function( event ) {

diff --git a/js/prev-next-button.js b/js/prev-next-button.js
@@ -148,7 +148,7 @@ proto.updatePrevNextButton = function( button, disabledIndex ) {
 proto.activatePrevNextButtons = function() {
   this.prevButton.element.addEventListener( 'click', this.handlePrevButtonClick );
   this.nextButton.element.addEventListener( 'click', this.handleNextButtonClick );
-  this.element.append( this.prevButton.element, this.nextButton.element );
+  this.element.prepend( this.prevButton.element, this.nextButton.element );
   this.on( 'deactivate', this.deactivatePrevNextButtons );
 };