質問編集履歴

誤字の修正を行いました。

2021/07/05 12:19

投稿

kyota0606

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -100,7 +100,7 @@
             <li class="slick-active">
-                <buttun type="buttun"></buttun>
+                <buttuon type="button"></buttuon>
             </li>

余計な部分を取り除きました。

2021/07/05 12:19

投稿

kyota0606

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,7 +1,3 @@
-こんにちは。現在HTML,CSS,jQueryを使って初案件で超大急ぎのコーディング案件をしているのですが、以下の方法がどうしてもわからなくてめちゃめちゃ困ってます。どなたかお力を貸してください。本当にお願いします。
 1、slickのdots（丸い点）をスライダーの右下に表示させる方法。

②に試したことを書き足しました。

2021/07/05 11:51

投稿

kyota0606

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,6 +18,12 @@
+試したことは、content"url()"を使って表示させたい画像のソースを打ち込んでみましたが反応なしでした。
+あとは、list-style-type　noneになっていたのでそれを解除したうえで、上の書き方をしたりしてみましたがやはりだめした。
 ### 発生している問題・エラーメッセージ

タイトル変えるの忘れてました。

2021/07/05 11:05

投稿

kyota0606

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~【大至急】助けてください\|~~slickとcssのhover,activeについて。
1	+ slickのdotsをスライダーの画像の右下に埋め込む方法と、aタグをhover、active状態にしたとき画像を表示させたい。

test CHANGED Viewed

File without changes

実装したいを詳しく書きました。ソースコードを削って必要だと思われるところだけ残しました。

2021/07/05 10:59

投稿

kyota0606

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,9 +2,19 @@
-1、スライドのコントロールナビ（丸い点）が表示させる方法。(slick)
-2、星マークをグローバルナビのhover時とactive時に表示させる方法。
+1、slickのdots（丸い点）をスライダーの右下に表示させる方法。
+試したことは、slick-dotsを一つのブロック要素と考えて、スライダーの画像にpositon relativeをかけて、slick-dotsにposition absoluteをかけて位置を調整しようと試みましたがダメでした。
+その他、ネットの記事などにあったものをコピペ→自分のコード内でパラメーターをいじくってみましたがどれも反応なしでした。
+2 HTML　nav-list nav-list-item aをhoverしたときに星マーク(小さな画像)を表示、クリックした時に星マークがついた状態を維持させる方法。
@@ -56,77 +66,33 @@
         </div>
-        <div id="navArea">
+    <div class="main">
-            <nav>
-                <div class="nav-mobile">
+        <div class="main-slider">
-                    <ul class="nav-list">
+            <ul class="main-slider-list" id="main-slider">
-                        <li class="nav-list-item"><a href="#">個人グループ利用</a></li>
+                <li class="main-slider-item"><img src="image/campfire.png" alt="キャンプファイヤー">
+                </li>
-                        <li class="nav-list-item"><a href="#">団体利用</a></li>
+                <li class="main-slider-item top-pic"><img src="image/bbq.png" alt="焼き肉"></li>
+                <li class="main-slider-item top-pic"><video class="slick-video" src="image/video.mp4" type="video/mp4"
+                        autoplay muted></video></li>
-                        <li class="nav-list-item"><a href="#">客室</a></li>
+                <li class="main-slider-item top-pic"><img src="image/enjoy.png" alt=""></li>
-                        <li class="nav-list-item"><a href="#">食事</a></li>
-                        <li class="nav-list-item"><a href="#">施設の紹介</a></li>
-                        <li class="nav-list-item"><a href="#">予約</a></li>
-                    </ul>
+            </ul>
-                </div>
-            </nav>
-            <div class="toggle_btn">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-            <div id="mask"></div>
         </div>
-    </header>
-    <div class="main">
-        <div class="main-slider">
-            <ul class="main-slider-list" id="main-slider">
+-------------------------------↓をスライダーの右下に固定表示させたい--------------------------------
-                <li class="main-slider-item"><img src="image/campfire.png" alt="キャンプファイヤー">
-                </li>
-                <li class="main-slider-item top-pic"><img src="image/bbq.png" alt="焼き肉"></li>
-                <li class="main-slider-item top-pic"><video class="slick-video" src="image/video.mp4" type="video/mp4"
-                        autoplay muted></video></li>
-                <li class="main-slider-item top-pic"><img src="image/enjoy.png" alt=""></li>
-            </ul>
-        </div>
         <ul class="slick-dots">
@@ -162,220 +128,110 @@
-.logo-star{
+.nav-list:hover{
-    width: 12px;
-    height: 12px;
-    margin-left: 17%;
+    list-style-image: url(image/list.png);
-}
+}
+.main{
-.btn-trigger{
+    position: relative;
-    display: none;
+    height: 100%;
-}
+}
-.nav-list{
+.main-slider{
+    height: 694px;
-    display: flex;
+    overflow: hidden;
-    margin: 29px 51px 2px 51px;
-}
+}
-.nav-list-item{
+.main-slider-list{
-    margin-left: 35px;
+    padding: 0px;
-}
+}
+.top-pic{
+    width: 100%;
+    height: 50vw;
+    object-fit: cover;
+}
+-------------------------------↓はdotsのcssです。------------------------------------
-.nav-list-item a{
+.slide-dots {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+  .slide-dots li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+  .slide-dots li button {
+    position: relative;
+    text-indent: -9999px;
+  }
+  .slide-dots li button::before {
+    content: "●";
     color: #001976;
-}
-.nav-list:hover{
-    list-style-image: url(image/list.png);
-}
-.nav-list-item p{
-    color: #001976;
-}
-.nav-mobile{
-    display: none;
-}
-/*-------------------cmn-parts-------------------------*/
-#navArea{
-    display: none;
-}
-.btn-cmn{
-    width: 133px;
-    height: 49px;
-    background-color: #FFD800;
-    text-align: center;
-    padding: 15px 0 13px 0;
     cursor: pointer;
+    height: 13.5px;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 24px;
+    width: 13.5px;
-}
+  }
-.btn-cmn a{
-    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
-    color: #001976;
-}
-.btn-cmn:hover{
-    opacity: 0.6;
-    transition: all 0.3s;
-}
-/*-------------------main content-----------------------*/
-.main{
-    position: relative;
-    height: 100%;
-}
-.main-slider{
-    height: 694px;
-    overflow: hidden;
-}
-.main-slider-list{
-    padding: 0px;
-}
-.sub-title{
-    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
-    "Hiragino Sans",Meiryo,sans-serif;
-    font-size: 18px;
-    line-height: 30px;
-}
-.top-pic{
-    width: 100%;
-    height: 50vw;
-    object-fit: cover;
-}
-.slick-video{
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-.slide-dots {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-  }
-  .slide-dots li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-  .slide-dots li button {
-    position: relative;
-    text-indent: -9999px;
-  }
-  .slide-dots li button::before {
+  .slide-dots li.slick-active button::before {
     content: "●";
-    color: #001976;
-    cursor: pointer;
-    height: 13.5px;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 24px;
-    width: 13.5px;
-  }
-  .slide-dots li.slick-active button::before {
-    content: "●";
     color: #AAA300;
   }
@@ -418,7 +274,7 @@
 }
----------------------------------------------------------------------------------------------------
+---------------------------------------slickのJS----------------------------------------
 $('.main-slider').on('init', function (event, slick, currentSlide, nextSlide) {
@@ -444,21 +300,13 @@
     $("#main-slider").slick({
-        autoplay: true,
-        autoplaySpeed: 3000,
         dots: true,
         dotsClass: 'slick-dots',
         responsive: [{
-            breakpoint: 800,  //ブレイクポイントを指定
+            breakpoint: 800,
-            settings: {
-            }
         }]
@@ -476,11 +324,7 @@
-### 試したこと
-ネットで検索したことは全て試しましたが、上手くいきませんでした。

JSが抜けていました

2021/07/05 10:55

投稿

kyota0606

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -418,6 +418,56 @@
 }
+---------------------------------------------------------------------------------------------------
+$('.main-slider').on('init', function (event, slick, currentSlide, nextSlide) {
+    slideItem = $(".slick-slide")
+    for (let i = 0; i < slick.slideCount; i++) {
+        let slideImg = slideItem.filter(function () { return ($(this).data('slick-index') === i) }).find("img").clone()
+        let dot = $(".slick-dots").find("li").eq(i).find("button")
+        let src = slideImg.attr('src')
+        dot.css("background", `url(image/dotsblue.png)`)
+        dot.css("background-size", "contain")
+    }
+});
+$(function () {
+    $("#main-slider").slick({
+        autoplay: true,
+        autoplaySpeed: 3000,
+        dots: true,
+        dotsClass: 'slick-dots',
+        responsive: [{
+            breakpoint: 800,  //ブレイクポイントを指定
+            settings: {
+            }
+        }]
+    });
+});