style: adicionando estilo ao carrossel

src/scripts/components/slider.js

@@ -1,17 +1,45 @@
 export class Slider {
-    constructor() {}
+  constructor() {}
 
-    selectors() {}
+  selectors() {}
 
-    events() {}
+  events() {}
 }
 
-
-
-$('.slider-info').slick({
-    infinite: true,
-    slidesToShow: 4,
-    slidesToScroll: 1,
-    arrows: true,
-    dots: true
-  });
+$(".slider-info").slick({
+  infinite: true,
+  slidesToShow: 4,
+  slidesToScroll: 1,
+  variableWidth: true,
+  arrows: true,
+  dots: true,
+  responsive: [
+    {
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        infinite: true,
+        dots: false,
+        arrows: false,
+        vertical: true,
+        verticalScrolling: false,
+        swipe: false,
+        
+      },
+    },
+    {
+      breakpoint: 375,
+      settings: {
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        infinite: true,
+        dots: false,
+        arrows: false,
+        vertical: true,
+        verticalScrolling: false,
+        swipe: false,
+      },
+    },
+  ],
+});

src/styles/partials/container.scss

@@ -1,9 +1,16 @@
 .container {
     width: 81.875%;
-    // margin: 40px 0 0 130px;
     display: flex;
     justify-content: center;
     flex-direction: column;
     margin: 40px auto;
 }
 
+$breakpoint-tablet: 1024px;
+@media (max-width: $breakpoint-tablet) {
+    .container {
+        max-width: 100vw;
+        width: 100%;
+        margin: 0 16px;
+    }
+}

src/styles/partials/slider.scss

@@ -23,12 +23,11 @@ h2 {
                 height: auto;
                 min-height: 424px;
                 list-style: none;
-                &:not(:first-child){
+                &:not(:first-child) {
                     margin-left: 21px;
                 }
                 & img {
-                    width: 100%;
-                    max-width: 279px;
+                    width: 100%;                   
                     object-fit: contain;
                     height: 212px;
                     border-radius: 8px;
@@ -61,7 +60,6 @@ h2 {
     }
 }
 
-
 .slick-prev,
 .slick-next {
     cursor: pointer;
@@ -70,13 +68,88 @@ h2 {
 .slick-prev {
     left: -40.36px;
     &:before {
-        content: url('svgs/right arrow.svg');
+        content: url("svgs/right arrow.svg");
     }
 }
 
 .slick-next {
     right: -40.36px;
     &:before {
-        content: url('svgs/left arrow.svg');
+        content: url("svgs/left arrow.svg");
+    }
+}
+
+.slick-dots li button:before {
+    top: 25px;
+    color: $slider-ellipse-color;
+    width: 10.01px;
+    height: 10.01px;
+    opacity: unset;
+}
+
+.slick-dots li.slick-active button:before {
+    border: 0.5px solid $slider-ellipse-color;
+    color: transparent;
+    border-radius: 100px;
+    width: 15.49px;
+    height: 15.49px;
+    opacity: unset;
+}
+
+$breakpoint-tablet: 1024px;
+@media (max-width: $breakpoint-tablet) {
+    .slider-container {
+        margin-top: 60px;
+        margin-bottom: 128px;
+        position: relative;
+        .slider {
+            width: 100vw;
+            margin: 0 auto;          
+            & ul {
+                margin-top: 38px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                & .slider-content {
+                    width: 100vw;
+                    padding: 16px;
+                    height: auto;
+                    min-height: 710px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    &:not(:first-child) {
+                        margin-left: 0;
+                    }
+                    & img {
+                        width: 100%;                                       
+                        object-fit: cover;
+                        height: 570px;
+                        border-radius: 8px;
+                    }
+                    & h3 {
+                        font-weight: 700;
+                        font-size: 24px;
+                        line-height: 28px;
+                        color: $title-item-list-color;
+                        height: 60px;
+                        margin: 24px 24px 8px 24px;
+                    }
+                    & p {
+                        padding: 0 24px 0 24px;
+                        font-weight: 400;
+                        font-size: 16px;
+                        line-height: 24px;
+                        &::-webkit-scrollbar {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .slick-dots li button{
+        display: none;
     }
 }

src/styles/utils/variables.scss

@@ -12,4 +12,3 @@ $title-list-color: #000000;
 $title-item-list-color: #333333;
 $description-item-list-color: #858585;
 $slider-ellipse-color: #858585;
-$slider-arrow-color: #858585;

src/templates/index.html

@@ -136,6 +136,5 @@
             src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
         ></script>
         <script src="bundle.js"></script>
-        <!-- <script src="../scripts/components/slider.js"></script> -->
     </body>
 </html>