Merge pull request #27 from zulucoda/feature/more-customization

feature: add css override handles and minor bug fixes
zulucoda · Feb 7, 2021 · 84b9467 · 84b9467
2 parents 2edb740 + e2fd3d4
commit 84b9467
Show file tree

Hide file tree

Showing 32 changed files with 17,813 additions and 21,050 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,6 @@ yarn-error.log*
 
 .idea
 
-example/**/node_modules
+example/**/node_modules
+
+example/**/dist
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+lib
+node_modules
+coverage
+example/**/node_modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,47 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+## vnext
+- ~~add css override handles~~
+- customize css properties:
+    1. add width
+    1. update height
+    1. max-width & height for mobile responsiveness
+- dot properties:
+    1. size
+    1. border colour
+    1. has border
+- add arrow
+    1. show arrow
+- play & pause button
+    1. show play & pause button
+- add thumbnails
+    1. show thumbnails
+    1. thumbnail bar position
+- show slide number & total
+- allow infinite scroll
+- add slide transition delay
+- add carousal transition
+- add legend
+
+
+
+
+## [7.0.0] - 2021-02-07
+### Changed
+- add css override handles - [@zulucoda](https://github.com/zulucoda).
+  1. `.swift-slider-container` - override slider container (slider wrapper)
+  1. `.swift-slider-slides` - override slides container
+  1. `.swift-slider-active-slide` - override active slide (current active slide displayed)
+  1. `.swift-slider-slide` - override all slides
+  1. `.swift-slider-dots` - override dots (bullets) container
+  1. `.swift-slider-active-dot` - override active dot (bullet)
+  1. `.swift-slider-dot` - override all dots (bullets)
+  1. `.swift-slider-prev-btn` - override previous button
+  1. `.swift-slider-next-btn` - override next button
+- fixed slider animation - [@zulucoda](https://github.com/zulucoda).
+- fixed intervals when clicking on next and previous buttons - [@zulucoda](https://github.com/zulucoda).
+- improved javascript example - [@zulucoda](https://github.com/zulucoda).
 
 ## [6.5.0] - 2020-07-25
 ### Changed

diff --git a/README.md b/README.md
@@ -122,6 +122,20 @@ class App extends Component {
 }
 ```
 
+### Available CSS Overrides
+
+| Class | Description |
+| :------| :-----------|
+| `.swift-slider-container`   | Override slider container (slider wrapper) |
+| `.swift-slider-slides`  | Override slides container |
+| `.swift-slider-active-slide`   | Override active slide (current active slide displayed) |
+| `.swift-slider-slide`   | Override all slides  |
+| `.swift-slider-dots`  | Override dots (bullets) container  |
+| `.swift-slider-active-dot`  | Override active dot (bullet) |
+| `.swift-slider-dot`  | Override all dots (bullets) |
+| `.swift-slider-prev-btn`  | Override previous button |
+| `.swift-slider-next-btn`  | Override next button |
+
 
 ### License
 MIT License.
diff --git a/example/javascript/app/index.jsx b/example/javascript/app/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Main from './main';
+
+ReactDOM.render(<Main />, document.getElementById('root'));
diff --git a/example/javascript/app/main.jsx b/example/javascript/app/main.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Slider from '../../../lib/react-swift-slider.min';
 
 const data = [
@@ -28,9 +27,20 @@ const data = [
     src:
       'https://media.mfbproject.co.za/repos/ARWP_Infra_Desk_1920_1080_Quad.png',
   },
+  {
+    id: '6',
+    src:
+      'https://media.mfbproject.co.za/repos/ARWP_Running_Desk_1920_1080_Engine.png',
+  },
+  {
+    id: '7',
+    src:
+      'https://media.mfbproject.co.za/repos/ARWP_Rear34Run_Desk_1920_1080_Hero.png',
+  },
 ];
 
-ReactDOM.render(
-  <Slider data={data} enableNextAndPrev />,
-  document.querySelector('.app'),
-);
+const Main = () => {
+  return <Slider data={data} height={900} enableNextAndPrev />;
+};
+
+export default Main;
diff --git a/example/javascript/index.html b/example/javascript/index.html
@@ -3,16 +3,17 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>react-tunes-player example</title>
+        <title>react-swift-slider example</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel='stylesheet' href='style-css-overrides.css'>
     </head>
     <body>
         <!--[if lt IE 8]>
             <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
 
-        <div class="app"></div>
+        <div id="root"></div>
 
         <script src="app/bundle.js" type="text/javascript"></script>
     </body>