編集履歴

質問編集履歴

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

2019/07/26 07:54

投稿

UKYO9311

スコア31

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -386,167 +386,139 @@
-//ドット
-  .slick-dots
-{
-    position: absolute;
-    bottom: -25px;
-    display: inline-block !important;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
+@media screen and (max-width: 767px) {
+    .slick-slide img{
+        margin-top: 62px;
+    }
+    .slick-next{
+        display: none!important;
+        }
+    .slick-prev{
+        display: none!important;
+        }
+    }
+  .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;
+      font-size: 1.2rem;
+      font-weight: bold;
+      span{
+        display: block!important;
+        margin-top: 10px;
+      }
+  }
+  .progress-bar-box:nth-child(even) {
+    background-color: #aaa;
 }
-.slick-dots li
+.progress-bar-box:nth-child(odd) {
-{
-    position: relative;
+    background-color: #aaa;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin: 0 5px;
-    padding: 0;
-    cursor: pointer;
 }
-.slick-dots li button
-{
-    font-size: 0;
+  .bar {
-    line-height: 0;
+      height: 100%;
-    display: block;
-    width: 20px;
+      width: 0px;
-    height: 20px;
-    padding: 5px;
-    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;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-.slick-dots li.slick-active button:before
-{
-    opacity: .75;
-    color: black;
-}
 ```
@@ -568,140 +540,76 @@
 $(document).ready(function() {
+  const barColors = ['#fff', '#fff', '#fff','#fff'];
-  var time = 2;
+  $.fn.startBar = function(index) {
-  var $bar,
-    $slick,
-    isPause,
-    tick,
+      this
-    percentTime;
+          .eq(index)
+          .css({ backgroundColor: barColors[index]})
+          .animate({ width: '100%' }, 3400 );
+  }
-  $slick = $('.slider');
+  $('.slider').slick({
-  $slick.slick({
+      autoplay: true,
-    arrows: true,
+      arrows: true,
-    dots: true,
+      dots: false,
-    speed: 1200,
+      speed: 800,
+      autoplaySpeed: 3000,
-    prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
+      prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
-    nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
+      nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
-    adaptiveHeight: false
+      adaptiveHeight: true
+  }).on('afterChange', function(event, slick, currentSlide) {
+    if (currentSlide === 0)
+        $('.bar').startBar(currentSlide);
+        $('.bar').css({width: 0}).startBar(currentSlide);
+        $('.bar').css({width: 0});
   });
-  $bar = $('.slider-progress .progress');
-  function startProgressbar() {
-    resetProgressbar();
-    percentTime = 0;
-    isPause = false;
-    tick = setInterval(interval, 30);
-  }
-  $bar = $('.slick-dots li').children("button");
-  $('.slider-wrapper').on({
+  $('.bar').startBar(0);
-    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

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,6 +24,14 @@
+このサイトを参考に作っています。
+https://peaceday.jp/2019/
 ### 発生している問題・エラーメッセージ

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

2019/07/26 02:15

投稿

UKYO9311

スコア31

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -28,7 +28,7 @@
-スライダー自体は正常に動いていて、エラーは出ていません。
+スライダーは正常に動いていて、エラーは出ていません。

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

2019/07/25 08:48

投稿

UKYO9311

スコア31

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

補足追加

2019/07/24 07:04

投稿

UKYO9311

スコア31

test CHANGED Viewed

File without changes

test CHANGED Viewed

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