fix slide class

index.html

@@ -33,10 +33,10 @@
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
         
-    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="css/style.css">
 </head>
@@ -1175,7 +1175,7 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     
     <script async defer src="js/index.js"></script>
 </body>

js/index.js

@@ -28,7 +28,7 @@ $(".sec-01__slider").slick({
           let str = '';
           for(let i = 0; i < temp.length; i++){
               console.log(temp[i]['imgUrl']);
-              str+= `<div class="sec-00__slider-${i+1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
+              str+= `<div class="sec-00__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
           }
           $('.sec-00__slider').html(str);
           $(".sec-00__slider").slick({
@@ -43,7 +43,7 @@ $(".sec-01__slider").slick({
           let str = '';
           for(let i = 0; i < temp.length; i++){
               console.log(temp[i]['imgUrl']);
-              str+= `<div class="sec-02__slider-${i+1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
+              str+= `<div class="sec-02__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
           }
           $('.sec-02__slider').html(str);
           $(".sec-02__slider").slick({
@@ -158,7 +158,7 @@ $(".sec-01__slider").slick({
           let temp = data[5]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              str+= `<div class="sec-08__slider-${i+1} mx-1" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
+              str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
           }
           $('.sec-08__slider').html(str);
           $(".sec-08__slider").slick({
@@ -186,7 +186,7 @@ $(".sec-01__slider").slick({
           let str = '';
           for(let i = 0; i < temp.length; i++){
               str+= `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-10__slider-${i+1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
+                    <div class="sec-10__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                     <p class="sec-10__cardtxt">${temp[i]['description']}</p>
                     </div>`
           }
@@ -205,7 +205,7 @@ $(".sec-01__slider").slick({
           let str = '';
           for(let i = 0; i < temp.length; i++){
               str+= `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-11__slider-${i+1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
+                    <div class="sec-11__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                     <p class="sec-11__cardtxt">${temp[i]['description']}</p>
                     </div>`
           }

sass/main.scss

@@ -5,7 +5,7 @@ body {
     &__slider {
         width: 100%;
         height: 100%;
-        &-1, &-2, &-3, &-4, &-5 {
+        .slide-item {
             height: 110px;
             background-position: center center;
             background-size: cover;
@@ -121,7 +121,7 @@ body {
     &__slider {
         width: 100%;
         height: 100%;
-        &-1, &-2, &-3, &-4, &-5, &-6{
+        .slide-item{
             height: 32vh;
             background-position: center center;
             background-size: cover;
@@ -355,7 +355,7 @@ body {
 .sec-08 {
     &__slider {
         height: 100%;
-        &-1, &-2, &-3{
+        .slide-item {
             height: 28vh;
             background-position: center center;
             background-size: contain;
@@ -404,7 +404,7 @@ body {
     margin-bottom: 1.5rem;
     &__slider {
         width: 100%;
-        &-1, &-2, &-3, &-4, &-5, &-6 {
+        .slide-item {
             height: 28vh;
             background-position: center center;
             background-size: cover;
@@ -426,7 +426,7 @@ body {
 .sec-11 {
     &__slider {
         width: 100%;
-        &-1, &-2, &-3, &-4, &-5, &-6 {
+        .slide-item {
             height: 28vh;
             background-position: center center;
             background-size: cover;