編集履歴

質問編集履歴

コードを最新にしました。

2019/07/26 07:54

投稿

UKYO9311

スコア31

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -192,87 +192,73 @@
-//ドット
-  .slick-dots
-{
-    position: absolute;
-    bottom: -25px;
-    display: inline-block !important;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-}
-.slick-dots li
-{
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin: 0 5px;
+@media screen and (max-width: 767px) {
-    padding: 0;
+    .slick-slide img{
-    cursor: pointer;
+        margin-top: 62px;
-}
+    }
-.slick-dots li button
-{
-    font-size: 0;
-    line-height: 0;
+    .slick-next{
-    display: block;
+        display: none!important;
+        }
-    width: 20px;
-    height: 20px;
-    padding: 5px;
+    .slick-prev{
+        display: none!important;
+        }
+    }
-    cursor: pointer;
-    color: transparent;
-    border: 0;
-    outline: none;
-    background: transparent;
-}
-.slick-dots li button:hover,
-.slick-dots li button:focus
-{
-    outline: none;
-}
-.slick-dots li button:hover:before,
-.slick-dots li button:focus:before
-{
-    opacity: 1;
-}
-.slick-dots li button:before
-{
-    font-family: 'slick';
-    font-size: 6px;
-    line-height: 20px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 20px;
-    height: 20px;
-    content: '●';
-    text-align: center;
-    opacity: .25;
-    color: black;
+  .progress-bars {
+      position: absolute;
+      top: 80%;
+      left: 0;
+      right: 0;
+      overflow: hidden;
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      padding-bottom: 10px;
+  }
+  .progress-bar-box {
+      height: 2px;
+      width: 25%;
+      margin: 10px;
-    -webkit-font-smoothing: antialiased;
+      font-size: 1.2rem;
+      font-weight: bold;
+      span{
+        display: block!important;
+        margin-top: 10px;
+      }
+  }
-    -moz-osx-font-smoothing: grayscale;
+  .progress-bar-box:nth-child(even) {
+    background-color: #aaa;
 }
-.slick-dots li.slick-active button:before
+.progress-bar-box:nth-child(odd) {
-{
-    opacity: .75;
-    color: black;
+    background-color: #aaa;
 }
+  .bar {
+      height: 100%;
+      width: 0px;
+  }
 ```
@@ -283,72 +269,40 @@
 $(document).ready(function() {
-  var time = 2;
-  var $bar,
-    $slick,
-    isPause,
-    tick,
-    percentTime;
-  $slick = $('.slider');
-  $slick.slick({
-    arrows: true,
-    dots: true,
-    speed: 1200,
-    prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
+  const barColors = ['#fff', '#fff', '#fff','#fff'];
-    nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
-    adaptiveHeight: false
-  });
-  $bar = $('.slider-progress .progress');
-  function startProgressbar() {
+  $.fn.startBar = function(index) {
-    resetProgressbar();
+      this
-    percentTime = 0;
+          .eq(index)
-    isPause = false;
+          .css({ backgroundColor: barColors[index]})
-    tick = setInterval(interval, 30);
+          .animate({ width: '100%' }, 3400 );
   }
+  $('.slider').slick({
+      autoplay: true,
+      arrows: true,
+      dots: false,
+      speed: 800,
+      autoplaySpeed: 3000,
+      prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
+      nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
+      adaptiveHeight: true
+  }).on('afterChange', function(event, slick, currentSlide) {
+    if (currentSlide === 0)
-  $bar = $('.slick-dots li').children("button");
+        $('.bar').startBar(currentSlide);
+        $('.bar').css({width: 0}).startBar(currentSlide);
+        $('.bar').css({width: 0});
+  });
+  $('.bar').startBar(0);
-  $('.slider-wrapper').on({
-    mouseenter: function() {
-      isPause = false;
-    },
-    mouseleave: function() {
-      isPause = false;
-    }
-  })
+});
-  function startProgressbar() {
-    resetProgressbar();
-    percentTime = 0;
-    isPause = false;
-    tick = setInterval(interval, 10);
-  }
+```
-  function interval() {
-    if(isPause === false) {
-      percentTime += 0.5 / (time + 0.1);
-      $bar.css({
+### 補足
-        width: percentTime+"%"
-      });
-      if(percentTime >= 100)
-        {
-          $slick.slick('slickNext');
-          startProgressbar();
-        }
-    }
-  }
-  function resetProgressbar() {
-    $bar.css({
-     width: 0+'%'
-    });
-    clearTimeout(tick);
-  }
-  startProgressbar();
+![イメージ説明](f793b87f549784f2f08a62e8291d8d2a.png)
-});
+二週目からこのようになってしまいます。
-```

参考サイトを追加しました。

2019/07/26 07:54

投稿

UKYO9311

スコア31

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -11,6 +11,10 @@
 ![イメージ説明](9b9c6d1a4078ddf84ec635aa5ade79b3.png)
+このサイトを参考に作っています。
+https://peaceday.jp/2019/
 ### 発生している問題・エラーメッセージ
 スライダーは正常に動いていて、エラーは出ていません。

不要なコードを削除致しました。

2019/07/26 02:15

投稿

UKYO9311

スコア31

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -13,7 +13,7 @@
 ### 発生している問題・エラーメッセージ
-スライダー自体は正常に動いていて、エラーは出ていません。
+スライダーは正常に動いていて、エラーは出ていません。
 ### 該当のソースコード

補足を削除。補足分は解決したため。

2019/07/25 08:48

投稿

UKYO9311

スコア31

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -347,21 +347,4 @@
   startProgressbar();
 });
-```
+```
-### 補足
-デベロッパーツールをみてみると、
-```css
-.slick-dots{
-    position: absolute;
-    bottom: -25px;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-}
-```
-が効いてないみたいです。。。現在追って調べ中です。

補足追加

2019/07/24 07:04

投稿

UKYO9311

スコア31

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -347,4 +347,21 @@
   startProgressbar();
 });
-```
+```
+### 補足
+デベロッパーツールをみてみると、
+```css
+.slick-dots{
+    position: absolute;
+    bottom: -25px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+}
+```
+が効いてないみたいです。。。現在追って調べ中です。