Update Slider

DreaM05 · May 8, 2021 · 0ec6f09 · 0ec6f09
1 parent ce7ab3f
commit 0ec6f09
Show file tree

Hide file tree

Showing 17 changed files with 1,601 additions and 49 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,8 @@
   "rules": {
     "no-var": "off",
     "require-jsdoc": "off",
-    "no-prototype-builtins": "off"
+    "no-prototype-builtins": "off",
+    "getter-return": "off",
+    "no-empty": "off"
   }
 }
diff --git a/ChiefSlider/chief-slider.js b/ChiefSlider/chief-slider.js
@@ -1,4 +1,4 @@
-/*
+/**
  * ChiefSlider by Itchief v2.0.0 (https://github.com/itchief/ui-components/tree/master/simple-adaptive-slider)
  * Copyright 2020 - 2021 Alexander Maltsev
  * Licensed under MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
@@ -31,20 +31,6 @@ var CLASS_CONTROL_HIDE = 'slider__control_hide';
 var CLASS_ITEM_ACTIVE = 'slider__item_active';
 var CLASS_INDICATOR_ACTIVE = 'active';
 
-function hasTouchDevice() {
-  return !!('ontouchstart' in window || navigator.maxTouchPoints);
-}
-
-function hasElementInVew($elem) {
-  var rect = $elem.getBoundingClientRect();
-  var windowHeight = window.innerHeight ||
-    document.documentElement.clientHeight;
-  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
-  var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
-  var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
-  return vertInView && horInView;
-}
-
 function ChiefSlider(selector, config) {
   // элементы слайдера
   var $root = typeof selector === 'string' ?
@@ -68,7 +54,6 @@ function ChiefSlider(selector, config) {
   // determines whether the position of item needs to be determined
   this._balancingItemsFlag = false;
   this._activeItems = [];
-  this._isTouchDevice = hasTouchDevice();
   // текущее значение трансформации
   this._transform = 0;
   // swipe параметры
@@ -325,9 +310,6 @@ ChiefSlider.prototype._updateIndicators = function() {
 
 // move slides
 ChiefSlider.prototype._move = function() {
-  if (!hasElementInVew(this._$root)) {
-    return;
-  }
   var step = this._direction ===
    'next' ? -this._transformStep : this._transformStep;
   var transform = this._transform + step;

diff --git a/ChiefSlider/chief-slider.min.js b/ChiefSlider/chief-slider.min.js
diff --git a/ChiefSlider/examples/chief-slider-01 b/ChiefSlider/examples/chief-slider-01
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ChiefSlider [Example 1]</title>
+  <link rel="stylesheet" href="/examples/libs/chief-slider/chief-slider.min.css">
+  <script defer src="/examples/libs/chief-slider/chief-slider.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const slider = new ChiefSlider('.slider', {
+        loop: false
+      });
+    });
+  </script>
+  <style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    }
+
+    .container {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .slider__container {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .slider__items {
+      counter-reset: slide;
+    }
+
+    .slider__item {
+      flex: 0 0 100%;
+      max-width: 100%;
+      counter-increment: slide;
+      height: 250px;
+      position: relative;
+    }
+
+    .slider__item::before {
+      content: counter(slide) "/5";
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      color: #fff;
+      font-style: italic;
+      font-size: 32px;
+      font-weight: bold;
+      display: block;
+    }
+
+    .slider__item:nth-child(1) {
+      background-color: #f44336;
+    }
+
+    .slider__item:nth-child(2) {
+      background-color: #9c27b0;
+    }
+
+    .slider__item:nth-child(3) {
+      background-color: #3f51b5;
+    }
+
+    .slider__item:nth-child(4) {
+      background-color: #03a9f4;
+    }
+
+    .slider__item:nth-child(5) {
+      background-color: #4caf50;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="container">
+
+    <div class="slider">
+      <div class="slider__container">
+        <div class="slider__wrapper">
+          <div class="slider__items">
+            <div class="slider__item">
+              <!-- Контент 1 слайда -->
+            </div>
+            <div class="slider__item">
+              <!-- Контент 2 слайда -->
+            </div>
+            <div class="slider__item">
+              <!-- Контент 3 слайда -->
+            </div>
+            <div class="slider__item">
+              <!-- Контент 4 слайда -->
+            </div>
+            <div class="slider__item">
+              <!-- Контент 5 слайда -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <a href="#" class="slider__control" data-slide="prev"></a>
+      <a href="#" class="slider__control" data-slide="next"></a>
+    </div>
+
+  </div>
+</body>
+
+</html>
diff --git a/ChiefSlider/examples/chief-slider-02.html b/ChiefSlider/examples/chief-slider-02.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ChiefSlider [Example 2]</title>
+  <link rel="stylesheet" href="/examples/libs/chief-slider/chief-slider.min.css">
+  <script defer src="/examples/libs/chief-slider/chief-slider.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const slider = new ChiefSlider('.slider', {
+        loop: false
+      });
+    });
+  </script>
+  <style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    }
+
+    .container {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .slider__wrapper {
+      overflow: hidden;
+    }
+
+    .slider__item {
+      flex: 0 0 33.3333333333%;
+      max-width: 33.3333333333%;
+      height: 250px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: rgba(255,255,255, 0.8);
+      font-size: 7rem;
+    }
+
+    .slider__item:nth-child(1) {
+      background-color: #f44336;
+    }
+
+    .slider__item:nth-child(2) {
+      background-color: #9c27b0;
+    }
+
+    .slider__item:nth-child(3) {
+      background-color: #3f51b5;
+    }
+
+    .slider__item:nth-child(4) {
+      background-color: #03a9f4;
+    }
+
+    .slider__item:nth-child(5) {
+      background-color: #4caf50;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="container">
+
+    <div class="slider">
+      <div class="slider__wrapper">
+        <div class="slider__items">
+          <div class="slider__item">
+            <!-- Контент 1 слайда -->
+            1
+          </div>
+          <div class="slider__item">
+            <!-- Контент 2 слайда -->
+            2
+          </div>
+          <div class="slider__item">
+            <!-- Контент 3 слайда -->
+            3
+          </div>
+          <div class="slider__item">
+            <!-- Контент 4 слайда -->
+            4
+          </div>
+          <div class="slider__item">
+            <!-- Контент 5 слайда -->
+            5
+          </div>
+        </div>
+      </div>
+      <a href="#" class="slider__control" data-slide="prev"></a>
+      <a href="#" class="slider__control" data-slide="next"></a>
+    </div>
+
+  </div>
+</body>
+
+</html>
diff --git a/ChiefSlider/examples/chief-slider-03.html b/ChiefSlider/examples/chief-slider-03.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ChiefSlider [Example 3]</title>
+  <link rel="stylesheet" href="/examples/libs/chief-slider/chief-slider.min.css">
+  <script defer src="/examples/libs/chief-slider/chief-slider.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const slider = new ChiefSlider('.slider', {
+        loop: true
+      });
+    });
+  </script>
+  <style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    }
+
+    .container {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .slider__wrapper {
+      overflow: hidden;
+    }
+
+    .slider__item {
+      flex: 0 0 50%;
+      max-width: 50%;
+      height: 250px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: rgba(255,255,255, 0.8);
+      font-size: 7rem;
+    }
+
+    .slider__item:nth-child(1) {
+      background-color: #f44336;
+    }
+
+    .slider__item:nth-child(2) {
+      background-color: #9c27b0;
+    }
+
+    .slider__item:nth-child(3) {
+      background-color: #3f51b5;
+    }
+
+    .slider__item:nth-child(4) {
+      background-color: #03a9f4;
+    }
+
+    .slider__item:nth-child(5) {
+      background-color: #4caf50;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="container">
+
+    <div class="slider">
+      <div class="slider__wrapper">
+        <div class="slider__items">
+          <div class="slider__item">
+            <!-- Контент 1 слайда -->
+            1
+          </div>
+          <div class="slider__item">
+            <!-- Контент 2 слайда -->
+            2
+          </div>
+          <div class="slider__item">
+            <!-- Контент 3 слайда -->
+            3
+          </div>
+          <div class="slider__item">
+            <!-- Контент 4 слайда -->
+            4
+          </div>
+          <div class="slider__item">
+            <!-- Контент 5 слайда -->
+            5
+          </div>
+        </div>
+      </div>
+      <a href="#" class="slider__control" data-slide="prev"></a>
+      <a href="#" class="slider__control" data-slide="next"></a>
+    </div>
+
+  </div>
+</body>
+
+</html>