add bullets

cases.html

@@ -35,10 +35,23 @@
                 <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
                 <p>隱藏</p>
             </button>
-            <div class="container-fluid" style="padding:0;margin:0;">
+            <div class="container-fluid" style="padding:0;margin:0; position: relative;">
                 <div class="sec-00__slider">
 
                 </div>
+                <div class="sec-00__bulletList">
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                  </div>
             </div>
         </section>
         <nav class="navbar navbar-expand-lg navbar-light navbar-main shadow-sm">

css/list-style.css

@@ -25,6 +25,7 @@ body {
   -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
           box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
   line-height: 12px;
+  z-index: 3;
 }
 
 .sec-00.bannerClose {
@@ -76,6 +77,88 @@ body {
   display: none;
 }
 
+.sec-00__bulletList {
+  position: absolute;
+  bottom: 21px;
+  left: calc(50% - 655px);
+  width: 1310px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sec-00__bullet {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  opacity: 1;
+}
+
+.sec-00__bullet::after {
+  content: "";
+  background: #ee7800;
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 2px;
+}
+
+.sec-00 .bullet-active::after {
+  width: 0;
+  -webkit-animation-name: progress;
+  animation-name: progress;
+  -webkit-animation-duration: 4s;
+  animation-duration: 4s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
 @-webkit-keyframes slidein {
   100% {
     height: 0px;

css/list-style.scss

@@ -21,6 +21,7 @@ body {
         font-size: 11px;
         box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
         line-height: 12px;
+        z-index: 3;
     }
     &.bannerClose {
         height: 0;
@@ -69,8 +70,81 @@ body {
     .slick-prev:before, .slick-next:before {
         display: none;
     }
+    &__bulletList {
+        position: absolute;
+        bottom: 21px;
+        left: calc(50% - 655px);
+        width: 1310px;
+        box-sizing: border-box;
+        display: flex;
+        z-index: 10;
+        background-color: rgba(0,0,0,.1);
+    }
+    &__bullet {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        background-color: rgba(0,0,0,.1);
+        flex: 1 1 auto;
+        opacity: 1;
+        &::after {
+            content: "";
+            background: #ee7800;
+            position: absolute;
+            width: 0;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border-radius: 2px;
+        }
+    }   
+    .bullet-active::after {
+        width: 0;
+        -webkit-animation-name: progress;
+        animation-name: progress;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+    }
 }
 
+@keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
+@-webkit-keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
 @-webkit-keyframes slidein {
   100% {
       height: 0px;

css/style.css

@@ -25,6 +25,7 @@ body {
   -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
           box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
   line-height: 12px;
+  z-index: 3;
 }
 
 .sec-00.bannerClose {
@@ -76,6 +77,88 @@ body {
   display: none;
 }
 
+.sec-00__bulletList {
+  position: absolute;
+  bottom: 21px;
+  left: calc(50% - 655px);
+  width: 1310px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sec-00__bullet {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  opacity: 1;
+}
+
+.sec-00__bullet::after {
+  content: "";
+  background: #ee7800;
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 2px;
+}
+
+.sec-00 .bullet-active::after {
+  width: 0;
+  -webkit-animation-name: progress;
+  animation-name: progress;
+  -webkit-animation-duration: 4s;
+  animation-duration: 4s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
 @-webkit-keyframes slidein {
   100% {
     height: 0px;

css/style.scss

@@ -21,6 +21,7 @@ body {
         font-size: 11px;
         box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
         line-height: 12px;
+        z-index: 3;
     }
     &.bannerClose {
         height: 0;
@@ -69,8 +70,81 @@ body {
     .slick-prev:before, .slick-next:before {
         display: none;
     }
+    &__bulletList {
+        position: absolute;
+        bottom: 21px;
+        left: calc(50% - 655px);
+        width: 1310px;
+        box-sizing: border-box;
+        display: flex;
+        z-index: 10;
+        background-color: rgba(0,0,0,.1);
+    }
+    &__bullet {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        background-color: rgba(0,0,0,.1);
+        flex: 1 1 auto;
+        opacity: 1;
+        &::after {
+            content: "";
+            background: #ee7800;
+            position: absolute;
+            width: 0;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border-radius: 2px;
+        }
+    }   
+    .bullet-active::after {
+        width: 0;
+        -webkit-animation-name: progress;
+        animation-name: progress;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+    }
 }
 
+@keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
+@-webkit-keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
 @-webkit-keyframes slidein {
     100% {
         height: 0px;

index_designerList.html

@@ -47,10 +47,23 @@
               <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
               <p>隱藏</p>
             </button>
-            <div class="container-fluid" style="padding:0;margin:0;">
+            <div class="container-fluid" style="padding:0;margin:0;position: relative;">
                 <div class="sec-00__slider">
                     
                 </div>
+                <div class="sec-00__bulletList">
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                </div>
             </div>
         </section>
         <nav class="navbar navbar-expand-lg navbar-light navbar-main">

js/index-designer.js

@@ -141,18 +141,42 @@ function detectBrowser(agent){
 
 function renderSec00(data) {
     let temp = data[0]['data'];
+    renderBullet(temp);
     renderBannerStr('sec-00__slider', temp);
     $(".sec-00__slider").slick({
         dots: false,
-        speed: 800,
+        speed: 500,
         autoplay: true,
-        autoplaySpeed: 5000,
+        autoplaySpeed: 4000,
         arrows: true,
         prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
         nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
     });
+    $('.sec-00__bullet').removeClass('bullet-active');
+    $('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
+    // $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
+    //     console.log(currentSlide);
+    //     console.log($('.slick-active').data('slick-index'));
+    //   });
+    $('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
+        console.log(currentSlide);
+        console.log($('.slick-active').data('slick-index'));
+        $('.sec-00__bullet').removeClass('bullet-active');
+        $('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
+      });
+    
 }
 
+function renderBullet(data) {
+    let str = '';
+    for(let i = 0; i < data.length; i++){
+       str += '<div class="sec-00__bullet"></div>'     
+    }
+    console.log('bullet');
+    $('.sec-00__bulletList').html(str);
+}
+
+
 function renderBannerStr(sec, data) {
     let str = '';
     for(let i = 0; i < data.length; i++){

js/index.js

@@ -66,16 +66,38 @@ function detectBrowser(agent){
 
 function renderSec00(data) {
     let temp = data[0]['data'];
+    renderBullet(temp);
     renderBannerStr('sec-00__slider', temp);
     $(".sec-00__slider").slick({
         dots: false,
-        speed: 800,
+        speed: 500,
         autoplay: true,
-        autoplaySpeed: 5000,
+        autoplaySpeed: 4000,
         arrows: true,
         prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
         nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
     });
+    $('.sec-00__bullet').removeClass('bullet-active');
+    $('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
+    // $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
+    //     console.log(currentSlide);
+    //     console.log($('.slick-active').data('slick-index'));
+    //   });
+    $('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
+        console.log(currentSlide);
+        console.log($('.slick-active').data('slick-index'));
+        $('.sec-00__bullet').removeClass('bullet-active');
+        $('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
+    });
+}
+
+function renderBullet(data) {
+    let str = '';
+    for(let i = 0; i < data.length; i++){
+       str += '<div class="sec-00__bullet"></div>'     
+    }
+    console.log('bullet');
+    $('.sec-00__bulletList').html(str);
 }
 
 function renderBannerStr(sec, data) {