teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問slickのdotsをスライダーの画像の右下に埋め込む方法と、aタグをhover、active状態にしたとき画像を表示させたい。

編集履歴

質問編集履歴

6

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

2021/07/05 12:19

投稿

kyota0606
kyota0606

スコア0

title CHANGED
File without changes
body CHANGED
@@ -49,7 +49,7 @@
49
49
  -------------------------------↓をスライダーの右下に固定表示させたい--------------------------------
50
50
  <ul class="slick-dots">
51
51
  <li class="slick-active">
52
- <buttun type="buttun"></buttun>
52
+ <buttuon type="button"></buttuon>
53
53
  </li>
54
54
  <li>
55
55
  <buttun type="button"></buttun>

5

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

2021/07/05 12:19

投稿

kyota0606
kyota0606

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,3 @@
1
- こんにちは。現在HTML,CSS,jQueryを使って初案件で超大急ぎのコーディング案件をしているのですが、以下の方法がどうしてもわからなくてめちゃめちゃ困ってます。どなたかお力を貸してください。本当にお願いします。
2
-
3
1
  1、slickのdots（丸い点）をスライダーの右下に表示させる方法。
4
2
 
5
3
  試したことは、slick-dotsを一つのブロック要素と考えて、スライダーの画像にpositon relativeをかけて、slick-dotsにposition absoluteをかけて位置を調整しようと試みましたがダメでした。

4

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

2021/07/05 11:51

投稿

kyota0606
kyota0606

スコア0

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,9 @@
8
8
 
9
9
  2 HTML　nav-list nav-list-item aをhoverしたときに星マーク(小さな画像)を表示、クリックした時に星マークがついた状態を維持させる方法。
10
10
 
11
+ 試したことは、content"url()"を使って表示させたい画像のソースを打ち込んでみましたが反応なしでした。
12
+ あとは、list-style-type　noneになっていたのでそれを解除したうえで、上の書き方をしたりしてみましたがやはりだめした。
13
+
11
14
  ### 発生している問題・エラーメッセージ
12
15
 
13
16
  ```

3

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

2021/07/05 11:05

投稿

kyota0606
kyota0606

スコア0

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

2

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

2021/07/05 10:59

投稿

kyota0606
kyota0606

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,13 @@
1
1
  こんにちは。現在HTML,CSS,jQueryを使って初案件で超大急ぎのコーディング案件をしているのですが、以下の方法がどうしてもわからなくてめちゃめちゃ困ってます。どなたかお力を貸してください。本当にお願いします。
2
2
 
3
- 1、スライドのコントロールナビ（丸い点）が表示させる方法。(slick)
4
- 2、星マークをグローバルナビのhover時とactive時に表示させる方法。
3
+ 1、slickのdots（丸い点）をスライダーの右下に表示させる方法。
5
4
 
5
+ 試したことは、slick-dotsを一つのブロック要素と考えて、スライダーの画像にpositon relativeをかけて、slick-dotsにposition absoluteをかけて位置を調整しようと試みましたがダメでした。
6
+ その他、ネットの記事などにあったものをコピペ→自分のコード内でパラメーターをいじくってみましたがどれも反応なしでした。
7
+
8
+
9
+ 2 HTML　nav-list nav-list-item aをhoverしたときに星マーク(小さな画像)を表示、クリックした時に星マークがついた状態を維持させる方法。
10
+
6
11
  ### 発生している問題・エラーメッセージ
7
12
 
8
13
  ```
@@ -27,31 +32,7 @@
27
32
  <li class="nav-list-item"><a href="#">予約</a></li>
28
33
  </ul>
29
34
  </div>
30
- <div id="navArea">
35
+
31
-
32
- <nav>
33
- <div class="nav-mobile">
34
- <ul class="nav-list">
35
- <li class="nav-list-item"><a href="#">個人グループ利用</a></li>
36
- <li class="nav-list-item"><a href="#">団体利用</a></li>
37
- <li class="nav-list-item"><a href="#">客室</a></li>
38
- <li class="nav-list-item"><a href="#">食事</a></li>
39
- <li class="nav-list-item"><a href="#">施設の紹介</a></li>
40
- <li class="nav-list-item"><a href="#">予約</a></li>
41
- </ul>
42
- </div>
43
- </nav>
44
-
45
- <div class="toggle_btn">
46
- <span></span>
47
- <span></span>
48
- <span></span>
49
- </div>
50
-
51
- <div id="mask"></div>
52
-
53
- </div>
54
- </header>
55
36
  <div class="main">
56
37
  <div class="main-slider">
57
38
  <ul class="main-slider-list" id="main-slider">
@@ -63,6 +44,8 @@
63
44
  <li class="main-slider-item top-pic"><img src="image/enjoy.png" alt=""></li>
64
45
  </ul>
65
46
  </div>
47
+
48
+ -------------------------------↓をスライダーの右下に固定表示させたい--------------------------------
66
49
  <ul class="slick-dots">
67
50
  <li class="slick-active">
68
51
  <buttun type="buttun"></buttun>
@@ -80,55 +63,11 @@
80
63
 
81
64
  -----------------------------------------css---------------------------------------------
82
65
 
83
- .logo-star{
66
+
84
- width: 12px;
85
- height: 12px;
86
- margin-left: 17%;
87
- }
88
- .btn-trigger{
89
- display: none;
90
- }
91
- .nav-list{
92
- display: flex;
93
- margin: 29px 51px 2px 51px;
94
- }
95
- .nav-list-item{
96
- margin-left: 35px;
97
- }
98
- .nav-list-item a{
99
- color: #001976;
100
- }
101
67
  .nav-list:hover{
102
68
  list-style-image: url(image/list.png);
103
69
  }
104
- .nav-list-item p{
105
- color: #001976;
106
- }
107
- .nav-mobile{
108
- display: none;
109
- }
110
70
 
111
- /*-------------------cmn-parts-------------------------*/
112
- #navArea{
113
- display: none;
114
- }
115
- .btn-cmn{
116
- width: 133px;
117
- height: 49px;
118
- background-color: #FFD800;
119
- text-align: center;
120
- padding: 15px 0 13px 0;
121
- cursor: pointer;
122
- }
123
- .btn-cmn a{
124
- font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
125
- color: #001976;
126
- }
127
- .btn-cmn:hover{
128
- opacity: 0.6;
129
- transition: all 0.3s;
130
- }
131
- /*-------------------main content-----------------------*/
132
71
  .main{
133
72
  position: relative;
134
73
  height: 100%;
@@ -140,24 +79,13 @@
140
79
  .main-slider-list{
141
80
  padding: 0px;
142
81
  }
143
-
144
- .sub-title{
145
- font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
146
- "Hiragino Sans",Meiryo,sans-serif;
147
- font-size: 18px;
148
- line-height: 30px;
149
- }
150
82
  .top-pic{
151
83
  width: 100%;
152
84
  height: 50vw;
153
85
  object-fit: cover;
154
86
  }
155
- .slick-video{
156
- display: block;
157
- width: 100%;
158
- height: 100%;
159
- }
160
87
 
88
+ -------------------------------↓はdotsのcssです。------------------------------------
161
89
 
162
90
  .slide-dots {
163
91
  cursor: pointer;
@@ -208,7 +136,7 @@
208
136
  .slick-dots li button:before{
209
137
  content:""!important;
210
138
  }
211
- ---------------------------------------------------------------------------------------------------
139
+ ---------------------------------------slickのJS----------------------------------------
212
140
  $('.main-slider').on('init', function (event, slick, currentSlide, nextSlide) {
213
141
  slideItem = $(".slick-slide")
214
142
  for (let i = 0; i < slick.slideCount; i++) {
@@ -221,14 +149,10 @@
221
149
  });
222
150
  $(function () {
223
151
  $("#main-slider").slick({
224
- autoplay: true,
225
- autoplaySpeed: 3000,
226
152
  dots: true,
227
153
  dotsClass: 'slick-dots',
228
154
  responsive: [{
229
- breakpoint: 800, //ブレイクポイントを指定
155
+ breakpoint: 800,
230
- settings: {
231
- }
232
156
  }]
233
157
  });
234
158
  });
@@ -237,9 +161,7 @@
237
161
 
238
162
  ```
239
163
 
240
- ### 試したこと
241
164
 
242
- ネットで検索したことは全て試しましたが、上手くいきませんでした。
243
165
 
244
166
  ### 補足情報（FW/ツールのバージョンなど）
245
167
 

1

JSが抜けていました

2021/07/05 10:55

投稿

kyota0606
kyota0606

スコア0

title CHANGED
File without changes
body CHANGED
@@ -208,8 +208,33 @@
208
208
  .slick-dots li button:before{
209
209
  content:""!important;
210
210
  }
211
+ ---------------------------------------------------------------------------------------------------
212
+ $('.main-slider').on('init', function (event, slick, currentSlide, nextSlide) {
213
+ slideItem = $(".slick-slide")
214
+ for (let i = 0; i < slick.slideCount; i++) {
215
+ let slideImg = slideItem.filter(function () { return ($(this).data('slick-index') === i) }).find("img").clone()
216
+ let dot = $(".slick-dots").find("li").eq(i).find("button")
217
+ let src = slideImg.attr('src')
218
+ dot.css("background", `url(image/dotsblue.png)`)
219
+ dot.css("background-size", "contain")
220
+ }
221
+ });
222
+ $(function () {
223
+ $("#main-slider").slick({
224
+ autoplay: true,
225
+ autoplaySpeed: 3000,
226
+ dots: true,
227
+ dotsClass: 'slick-dots',
228
+ responsive: [{
229
+ breakpoint: 800, //ブレイクポイントを指定
230
+ settings: {
231
+ }
232
+ }]
233
+ });
234
+ });
211
235
 
212
236
 
237
+
213
238
  ```
214
239
 
215
240
  ### 試したこと