Scroll to start item on load if exists

robinpoort · Apr 13, 2018 · 3d91c6c · 3d91c6c
1 parent a420129
commit 3d91c6c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/dist/js/swipr.js b/dist/js/swipr.js
diff --git a/index.html b/index.html
@@ -42,6 +42,10 @@
             padding-left: 80px;
             padding-right: 80px;
         }
+
+        .is-active {
+            background: red;
+        }
     </style>
 </head>
 <body>
@@ -73,6 +77,17 @@
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item is-active" data-swipr-start></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
     </div>
 </div>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "swipr",
   "description": "Swipe through horizontal content. Buttons for non-mobile/non-touch devices. Natural swipe for mobile/touch devices",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "homepage": "https://robinpoort.github.io/swipr/",
   "author": "https://github.com/robinpoort/swipr/graphs/contributors",
   "repository": {

diff --git a/src/js/swipr.js b/src/js/swipr.js
@@ -27,6 +27,7 @@
     var defaults = {
         wrapper: '[data-swipr-wrapper]',
         swiper: '[data-swipr]',
+        startItem: '[data-swipr-start]',
         swiprPreviousButtonClass: 'swipr-prev',
         swiprPreviousButtonContent: 'previous',
         swiprNextButtonClass: 'swipr-next',
@@ -400,7 +401,13 @@
                 hideButtons($swiper);
 
                 // Add initiated class
-                $swiper.parentNode.classList.add(settings.initiatedClass);
+                $swiper.parentNode.classList.add(localSettings.initiatedClass);
+
+                // See if there's a start item
+                var startScroll = $swiper.querySelector(localSettings.startItem);
+                if (startScroll) {
+                    animateScroll($swiper, startScroll.offsetLeft, settings.speed);
+                }
 
                 // Check for scrollbar
                 hasHorizontalScrollbar = $swiper.scrollWidth > $swiper.clientWidth;