Merge pull request #152 from femioladeji/responsive-number-of-slides

Responsive number of slides
femioladeji · Jan 30, 2022 · 2f707cb · 2f707cb
2 parents 444ad40 + 015d35e
commit 2f707cb
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 169 deletions.
diff --git a/docs/App.js b/docs/App.js
@@ -14,6 +14,7 @@ import CustomArrow from './views/pages//Examples/CustomArrow';
 import CustomIndicator from './views/pages//Examples/CustomIndicator';
 import PauseHover from './views/pages//Examples/PauseHover';
 import MultipleSlides from './views/pages/Examples/MultipleSlides';
+import ResponsiveSlides from './views/pages/Examples/Responsive';
 import CanSwipe from './views/pages//Examples/CanSwipe';
 import Autoplay from './views/pages//Examples/Autoplay';
 import Methods from './views/pages//Examples/Methods';
@@ -58,6 +59,7 @@ const App = () => {
           <Route exact path="/multiple-slides" component={MultipleSlides} />
           <Route exact path="/can-swipe" component={CanSwipe} />
           <Route exact path="/autoplay" component={Autoplay} />
+          <Route exact path="/responsive" component={ResponsiveSlides} />
           <Route exact path="/methods" component={Methods} />
           <Route exact path="/callback" component={Callback} />
           <Route exact path="/next" component={Next} />

diff --git a/docs/views/codeStrings.js b/docs/views/codeStrings.js
@@ -686,3 +686,61 @@ const MultipleSlidesExample = () => {
 export default MultipleSlidesExample;
 
 `;
+
+export const responsive = `
+import React, { useState } from "react";
+import { Slide } from "react-slideshow-image";
+
+const ResponsiveExample = () => {
+  const style = {
+    textAlign: 'center',
+    background: 'teal',
+    padding: '200px 0',
+    fontSize: '30px'
+  };
+
+  const properties = {
+    duration: 3000,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: false,
+    indicators: true,
+    responsive: [
+        {
+            breakpoint: 1024,
+            settings: {
+                slidesToShow: 3,
+                slidesToScroll: 3
+            }
+        },
+        {
+            breakpoint: 500,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 2
+            }
+        }
+    ]
+  };
+
+  return (
+    <div>
+      <div>
+        <Slide {...properties}>
+          <div style={style}>First Slide</div>
+          <div style={style}>Second Slide</div>
+          <div style={style}>Third Slide</div>
+          <div style={style}>Fourth Slide</div>
+          <div style={style}>Fifth Slide</div>
+          <div style={style}>sixth Slide</div>
+          <div style={style}>Seventh Slide</div>
+          <div style={style}>Eight Slide</div>
+        </Slide>
+      </div>
+    </div>
+  );
+};
+
+export default ResponsiveExample;
+
+`;
diff --git a/docs/views/components/SideBar.js b/docs/views/components/SideBar.js
@@ -6,6 +6,57 @@ const Sidebar = ({ isOpen }) => {
 
   const setMargin = isOpen ? '0' : '-60%';
 
+  const menuList = [
+    {
+      title: 'Zoom In Effect',
+      path: '/zoom-in'
+    },
+    {
+      title: 'Zoom Out Effect',
+      path: '/zoom-out'
+    },
+    {
+      title: 'Fade Effect',
+      path: 'fade-effect'
+    },
+    {
+      title: 'Custom Arrow',
+      path: '/custom-arrows'
+    },
+    {
+      title: 'Custom Indicators',
+      path: '/custom-indicators'
+    },
+    {
+      title: 'Pause on hover',
+      path: '/pause-hover'
+    },
+    {
+      title: 'Multiple Slides',
+      path: '/multiple-slides'
+    },
+    {
+      title: 'Responsive',
+      path: '/responsive'
+    },
+    {
+      title: 'Can swipe',
+      path: '/can-swipe'
+    },
+    {
+      title: 'Autoplay toggle',
+      path: '/autoplay'
+    },
+    {
+      title: 'Methods',
+      path: '/methods'
+    },
+    {
+      title: 'Callback',
+      path: '/callback'
+    }
+  ];
+
   return (
     <div className="sidebar" style={{ marginLeft: setMargin }}>
       <div className="sidebar-items">
@@ -17,39 +68,15 @@ const Sidebar = ({ isOpen }) => {
         </div>
         {dropDowns ? (
           <div className="dropdown-container">
-            <NavLink activeClassName="is-active" to="/zoom-in">
-              Zoom In Effect
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/zoom-out">
-              Zoom Out Effect
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/fade-effect">
-              Fade Effect
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/custom-arrows">
-              Custom Arrow
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/custom-indicators">
-              Custom Indicators
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/pause-hover">
-              Pause on hover
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/multiple-slides">
-              Multiple Slides
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/can-swipe">
-              Can swipe
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/autoplay">
-              Autoplay toggle
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/methods">
-              Methods
-            </NavLink>
-            <NavLink activeClassName="is-active" to="/callback">
-              Callback
-            </NavLink>
+            {menuList.map(each => (
+              <NavLink
+                key={each.path}
+                activeClassName="is-active"
+                to={each.path}
+              >
+                {each.title}
+              </NavLink>
+            ))}
           </div>
         ) : (
           ''