testimonials

Author: niallam22

client/src/Testimonial.js

@@ -1,29 +1,44 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Pagination, EffectCoverflow, Thumbs, Autoplay } from 'swiper';
+import { Navigation, Pagination, EffectCoverflow, Thumbs, Autoplay, FreeMode } from 'swiper';
 import { useState } from 'react';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import 'swiper/css/thumbs';
+import "swiper/css/free-mode";
 
 export default function TestimonialSection() {
 
     const [thumbsSwiper, setThumbsSwiper] = useState(null);
 
   return (
+    <>
     <section id="testimonial" className="spacer">
       <div className="testimonial-section">
         <div className="testi-user-img">
-          <Swiper
-            className="gallery-thumbs"
-            spaceBetween={10}
-            slidesPerView={4}
-            // slideToClickedSlide
-            watchSlidesProgress
-            onSwiper={setThumbsSwiper}
-          >
+        <Swiper
+        className="gallery-thumbs"
+        effect={'coverflow'}
+        grabCursor={true}
+        centeredSlides={true}
+        loop={true}
+        slidesPerView={'auto'}
+        coverflowEffect={{
+          rotate: 0,
+          stretch: 0,
+          depth: 100,
+          modifier: 5.5,
+        }}
+        pagination={{ el: '.swiper-pagination', clickable: true }}
+        autoplay={{
+          delay: 3000, 
+          disableOnInteraction: false 
+        }}
+        thumbs={{swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null}}
+        modules={[EffectCoverflow, Pagination, Navigation, Autoplay, Thumbs, FreeMode]}
+      >
             <SwiperSlide>
               <img className="u3" src="http://placekitten.com/100/150" alt="" />
             </SwiperSlide>
@@ -41,16 +56,13 @@ export default function TestimonialSection() {
         <div className="user-saying">
           <Swiper
             className="testimonial"
-            spaceBetween={30}
             direction="vertical"
-            pagination={{ clickable: true }}
-            modules={[Navigation, Pagination, EffectCoverflow, Thumbs, Autoplay]}
-            autoplay={{
-              delay: 3000, 
-              disableOnInteraction: false 
-            }}
-            // thumbs={{ swiper: ".gallery-thumbs" }}
-            thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
+            onSwiper={setThumbsSwiper}
+            spaceBetween={10}
+            slidesPerView={1}
+            freeMode={true}
+            watchSlidesProgress={true}
+            modules={[FreeMode, Navigation, Thumbs]}
           >
             <SwiperSlide>
               <div className="quote">
@@ -96,5 +108,7 @@ export default function TestimonialSection() {
         </div>
     </div>
     </section>
+    </>
+    
     )
 }

client/src/assets/css/App.css

@@ -6,16 +6,16 @@ a{
 }
 body{
     color: #222;
-}
-img{
+} */
+/* img{
     max-width: 100%;
 }
 main{
     padding: 10px;
     max-width: 960px;
     margin: 0 auto;
-}
-header{
+} */
+/* header{
     display:flex;
     justify-content:space-between;
     margin-top: 20px;
@@ -33,7 +33,10 @@ header a.logo{
 header nav{
     display:flex;
     gap: 24px;
-}
+} */
+
+
+
 
 div.post{
     display: grid;
@@ -71,7 +74,7 @@ div.post p.summary{
     line-height: 1.8rem;
 }
 
-form.login, form.register{
+/* form.login, form.register{
     max-width: 400px;
     margin: 0 auto;
 }
@@ -194,7 +197,7 @@ body > section {
 }
 
 .textContainer{
-	width:50%;
+	width: 45%;
 }
 .textContainer p{
 	width: 100% !important;
@@ -3129,6 +3132,7 @@ justify-content: center;
 padding-left: 100px;
 padding-right: 100px;
 }
+
 .swiper-container.testimonial {
 /* height: 100vh; */
 }
@@ -3171,4 +3175,23 @@ display: block;
 margin-bottom: 30px;
 }
 
+@media all and (max-width: 920px) {
+	.testimonial-section .quote {
+		padding-left: 75px;
+	}
+}
+
+@media all and (max-width: 766px) {
+	.testi-user-img{
+		display: none;
+	}
+	.testimonial-section .user-saying {
+		width: 100% !important;
+	}
+	
+	.testimonial-section .quote {
+		padding-left: 100px;
+	}
+}
+
 /* Modal */