slider missing component added

2024-08-18 07:43:58 +01:00
parent 0c60c31371
commit 3258f97bdc
3 changed files with 97 additions and 23 deletions
@@ -0,0 +1,83 @@
+"use client"
+// NOTE React-Slick and slick-carousel goes together. DO install both
+import React from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import Image from 'next/image'
+
+export default function FeaturedScreenTwo() {
+    const settings = {
+        dots: true,
+        autoplay: true,
+        infinite: true,
+        centerMode: true,
+        
+        className: 'center',
+        centerPadding: '60px',
+      
+        slidesToShow: 5,
+        slidesToScroll: 1,
+        speed: 4000,
+        // autoplaySpeed: 2000,
+        cssEase: "linear",
+      
+        responsive: [
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 5,
+              slidesToScroll: 1,
+            //   initialSlide: 1,
+            //   infinite: true,
+            //   dots: true,
+            },
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 1,
+            },
+          },
+          {
+            breakpoint: 480,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1,
+            },
+          },
+        ],
+      };
+    
+    return (
+        <div className='carousel-container'>
+          <Slider
+            {...settings}
+          >
+            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
+            </div>
+          </Slider>
+        </div>
+      );
+}