Merge pull request #17 from dynamicweb/indicator-fix-rtl-mode

Change loop to go in both directions and better ltr support

.vscode/settings.json

@@ -61,5 +61,6 @@
                 "cmd": "powershell -command \"& {&'Start-Sleep' -s 0.3}\"; \"& {&'copy' dist/js/*.min.* docs/assets/js/}\" "
             },
         ]
-    }    
+    },
+    "liveServer.settings.port": 5501
 }

Changelog.md

@@ -1,9 +1,22 @@
-## [v1.3.0] - 18-01-2021
+# [v1.4.0] - 02-02-2022
+
+## Bugfixes
+
+- Bone
 
 ## Changed
+
+- CSS changed for nav arrows for better LTR support - specifically added <code>left</code> rules for <code>.slider-nav</code>
+- Changed loop of slides to also include go to end when on first slide [[#16](https://github.com/dynamicweb/swiffy-slider/issues/16)]
+- Update doc and configuration for noloop that it covers the new behavior above
+
+# [v1.3.1] - 18-01-2022
+
+## Changed
+
 - renamed ´slide-visible-first´ to ´.slider-item-first-visible´ that was added in 1.3.0 due to naming error.
 
-## [v1.3.0] - 18-01-2021
+# [v1.3.0] - 18-01-2022
 
 ## Bugfixes
 
@@ -19,13 +32,14 @@
 
 - Added support for <code>.slider-nav-autohide</code> to support hiding previous and next navigation arrows when first or last slide is visible [#8](https://github.com/dynamicweb/swiffy-slider/issues/8)
 
-## [v1.2.0] - 03-12-2021
+# [v1.2.0] - 03-12-2021
 
 ## Bugfixes
 
 - None
 
 ## Changed
+
 - Changed the use of <code>zoom</code> in css to <code>transform: scale()</code>
 - Changed javascript to use <code>"</code> instead <code>'</code> consistently
 - Changed all event listeners to be passive to increase performance even further
@@ -37,7 +51,7 @@
 - Configure animation threshold for the intersection observer that sets <code>.slide-visible</code> when sliding. New attribute <code>data-slider-nav-animation-threshold</code>
 - <code>swiffyslider.setVisibleSlides</code> can now be called with a threshold overwriting the default 0.3
 
-## [v1.1.0] - 16-11-2021
+# [v1.1.0] - 16-11-2021
 
 ## Bugfixes
 
@@ -54,11 +68,11 @@
 
 - BREAKING slider-item-shadow has been removed since it uses ::after which disables touch sliding on mobile devices
 
-## [v1.0.2] - 08-11-2021
+# [v1.0.2] - 08-11-2021
 
 - Fix z-index issue with nav and indicators (#1)
 
-## [v1.0.1] - 08-11-2021
+# [v1.0.1] - 08-11-2021
 
 Welcome to the first release of Swiffy Slider.
 

dist/css/swiffy-slider.css

@@ -217,6 +217,7 @@
 .slider-nav {
     position: absolute;
     top: 0;
+    left: 0;
     bottom: 0;
     border: 0;
     background-color: transparent;
@@ -341,6 +342,7 @@
 
 .slider-nav.slider-nav-next {
     right: 0;
+    left: unset;
 }
 
 .slider-nav-visible .slider-nav {
@@ -476,16 +478,16 @@
         scroll-snap-align: var(--swiffy-slider-snap-align);
     }
     .slider-nav-outside-expand .slider-nav {
-        margin-left: -5rem;
+        margin-left: -4rem;
     }
     .slider-nav-outside-expand .slider-nav.slider-nav-next {
-        margin-right: -5rem;
+        margin-right: -4rem;
     }
     .slider-nav-sm.slider-nav-outside-expand .slider-nav {
-        margin-left: -4rem;
+        margin-left: -3.5rem;
     }
     .slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next {
-        margin-right: -4rem;
+        margin-right: -3.5rem;
     }
     .slider-indicators-sm.slider-indicators {
         display: none;

dist/js/swiffy-slider-extensions.js

@@ -1,6 +1,6 @@
 const swiffysliderextensions = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         draggingtimer: null,
         init(rootElement = document.body) {
             for (const sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {

dist/js/swiffy-slider.esm.js

@@ -1,6 +1,6 @@
 export const swiffyslider = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         init(rootElement = document.body) {
             for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
                 this.initSlider(sliderElement);
@@ -57,8 +57,10 @@ export const swiffyslider = function() {
                     container.scrollLeft + container.offsetWidth :
                     container.scrollLeft - container.offsetWidth;
             }
-            if ((container.scrollLeft + container.offsetWidth) > (container.scrollWidth - ((gapWidth / 2) + 1)) && next) {
-                if (noloop) return;
+            if (container.scrollLeft < 1 && !next && !noloop) {
+                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+            }
+            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
                 scrollLeftPosition = 0;
             }
             container.scroll({
@@ -119,7 +121,7 @@ export const swiffyslider = function() {
             const percentSlide = (container.scrollLeft / slidingAreaWidth);
             for (let scrollIndicatorContainers of sliderElement.querySelectorAll(".slider-indicators")) {
                 let scrollIndicators = scrollIndicatorContainers.children;
-                let activeIndicator = Math.round((scrollIndicators.length - 1) * percentSlide);
+                let activeIndicator = Math.abs(Math.round((scrollIndicators.length - 1) * percentSlide));
                 for (let element of scrollIndicators)
                     element.classList.remove("active");
                 scrollIndicators[activeIndicator].classList.add("active");