Merge pull request #103 from Web-Dev-Path/feature/implement-slider

Author: luke-buttifant

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Header.js component
 - reCAPTCHA
 - useIntersect Hook, Reveal container for scrolling using intersection API
+- A new swipable feature on CardColumns.js
 
 ### Fixed
 
@@ -37,3 +38,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - installed yarn
 - normalized buttons' and links' styling
 - updated `package.json` commands for macOs
+
+

components/CardsColumns.js

@@ -1,3 +1,9 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination, Navigation } from 'swiper';
+import 'swiper/css';
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
 import Card from './Card';
 import Container from './Container';
 import styles from '../styles/CardsColumns.module.scss';
@@ -11,22 +17,42 @@ export default function CardsColumns({
   linkText,
 }) {
   return (
-    <Container>
-      <div className={styles.inner__content}>
-        {titles.map((title, index) => {
-          return (
-            <Card
-              title={title}
-              image={images[index]}
-              altTag={altTags[index]}
-              content={content[index]}
-              link={links[index]}
-              linkText={linkText[index]}
-              key={index}
-            />
-          );
-        })}
-      </div>
-    </Container>
+      <Container>
+        <Swiper className={styles.swiper}
+          mousewheel={true}
+          grabCursor={true}
+          modules={[Pagination]}
+          pagination
+          centerInsufficientSlides={true}
+          slidesPerView={1.09}
+          breakpoints={{
+            769: {
+              slidesPerView: 2,
+              spaceBetween: 50,
+            },
+            1334: {
+              slidesPerView: 3,
+              spaceBetween: 50,
+            }
+          }}
+        >
+          {titles.map((title, index) =>
+            <SwiperSlide key={index} className={styles.swiperSlide}>
+              <div className={styles.inner__content}>
+                <Card
+                  title={title}
+                  image={images[index]}
+                  altTag={altTags[index]}
+                  content={content[index]}
+                  link={links[index]}
+                  linkText={linkText[index]}
+                  key={index}
+                />
+              </div>
+            </SwiperSlide>
+          )}
+
+        </Swiper>
+      </Container>
   );
 }

package.json

@@ -17,6 +17,7 @@
     "react-dom": "17.0.1",
     "react-google-recaptcha": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
-    "sass": "^1.35.1"
+    "sass": "^1.35.1",
+    "swiper": "^8.2.2"
   }
 }

styles/Card.module.scss

@@ -7,9 +7,10 @@
   border-radius: 1.5rem;
   box-shadow: $box-shadow;
   min-width: 32%;
+  height: 37rem;
 
   @include desktop {
-    flex-basis: 32%;
+
     margin: 1.5rem 1.5rem 0 1.5rem;
 
     &:first-child,

styles/CardsColumns.module.scss

@@ -3,14 +3,18 @@
 
 .inner__content {
   margin: 0 auto;
-  padding-bottom: 12rem;
+  padding-bottom: 4rem;
   justify-content: center;
 
   @include desktop-breakpoint-plus {
     display: flex;
   }
 
   @include desktop-breakpoint-minus {
-    padding-bottom: 5rem;
+    padding-bottom: 1rem;
   }
 }
+
+.swiper{
+  margin-bottom: 6rem;
+}

yarn.lock

@@ -114,6 +114,13 @@ debug@^2.1.3:
   dependencies:
     ms "2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -340,11 +347,24 @@ scheduler@^0.20.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 styled-jsx@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
   integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
 
+swiper@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.2.2.tgz#d16e9d92ec9b5548399c06f2cda9c400f9f32352"
+  integrity sha512-t7Tts4ZD2ahM3InsHDlZ6YY4gi47zepGHx25cACd6fzgcVdAtYLbUihnEmck0HsDzqtkhciyfKsoUEhummZDEA==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 to-querystring@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/to-querystring/-/to-querystring-1.1.1.tgz#98de5b00c79768a98ca48a2c09a960238d960265"