Merge pull request '[yoga-3] our services carousel' (#8) from feature/yoga-3-services-carousel into main

Reviewed-on: https://gitea.rschneider.hu/rschneider/yogastic/pulls/8

yoga-app/src/components/our.services.component.tsx

@@ -1,11 +1,73 @@
+'use client';
 import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaOurServicesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-our-services-component";
+// import OurServiceItemComponent from "@/components/our.services.item.component";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider ,{Settings} from "react-slick";
 import OurServiceItemComponent from "@/components/our.services.item.component";
 
+
 export interface Props{
     config: YogaOurServicesComponent_Plain
 }
 const OurServiceComponent = ({config: {title,header,description,services}}: Props) => {
+
+    const settings: Settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        swipe: true,
+        responsive: [
+            /**
+             *
+             * col-lg-3 col-md-6 col-sm-6 col-xs-12
+             *
+             * Breakpoint	Class infix	Dimensions
+             * X-Small	None	<576px
+             * Small	sm	≥576px
+             * Medium	md	≥768px
+             * Large	lg	≥992px
+             * Extra large	xl	≥1200px
+             * Extra extra large	xxl	≥1400px
+             */
+            {
+                breakpoint: 992,
+                settings: {
+                    slidesToShow: 4,
+                    slidesToScroll: 1,
+                    infinite: true,
+                    dots: true
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    initialSlide: 1
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    initialSlide: 1
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    console.info(settings)
     return (
         <section className="services_section">
             <div className="container">
@@ -18,12 +80,21 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
                         </div>
                     </div>
                 </div>
-                <div className="row" data-aos="fade-up">
+
+                {/*<div className="row" data-aos="fade-up">*/}
+                {/*    {services.map(*/}
+                {/*        itemConfig =>*/}
+                {/*            <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />*/}
+                {/*    )}*/}
+                {/*</div>*/}
+
+                <Slider {...settings}>
                     {services.map(
                         itemConfig =>
                             <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />
                     )}
-                </div>
+                </Slider>
+
                 <figure className="services_left_shape left_shape mb-0">
                     <YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
                 </figure>

yoga-app/src/components/our.services.item.component.module.css

@@ -0,0 +1,37 @@
+.serviceSlide{
+
+}
+
+button:first-of-type{
+    left: 6px;
+    z-index: 1;
+}
+
+button:last-of-type{
+    right: 6px;
+}
+
+.serviceSlide{
+    margin: 0 6px;
+
+}
+
+:global(.slick-active){
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+:global(div:nth-child(1 of .slick-active)){
+    padding-left: 0;
+    padding-right: 3px;
+}
+
+:global(div:nth-last-child(1 of .slick-active)){
+    padding-left: 3px;
+    padding-right: 0;
+}
+
+/*:global(div.slick-active):nth-last-child(n!*){*/
+/*    padding-left: 6px;*/
+/*    padding-right: 0;*!*/
+/*}*/

yoga-app/src/components/our.services.item.component.tsx

@@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
 import {StrapiFile} from "@/types/types";
 import strapiApi from "@/api/strapi/strapi-api";
+import styles from './our.services.item.component.module.css'
 
 export interface Props {
     config: YogaSingleService_Plain
@@ -11,7 +12,8 @@ const OurServiceItemComponent = ({config: {header,description,image}}: Props) =>
     const imageFile: StrapiFile = image as StrapiFile;
     return (
 
-        <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div className={styles.serviceSlide}>
+        {/*<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">*/}
             <div className="services_box_content">
                 <div className="services_box_upper_portion">
                     <figure className="mb-0">