teratail
回答率
85.46%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.46%
トップスライダーに関する質問
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

449閲覧

複数のスライダーを実装させたい。

shuto0901
shuto0901

総合スコア16

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/13 22:26

0

0

前提・実現したいこと

ページ内に複数のスライダーを実装させたい。

発生している問題・エラーメッセージ

１つ目のスライドショーはスライダーが実装されているが、
２つ、３つめは実装されない。

具体的には
スライドショーのlistタグを囲んでいるdivタグのwidthが
１つ目のスライダー　➡︎　２８８０px
２、３枚目　　　　　➡︎　０px

スライドショーのlistタグのwidthが
１つ目のスライダー　➡︎　３２０px
２、３枚目　　　　　➡︎　０px

上記の2点を修正したいが、どうすればいいのが分からないです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/slick-theme.css">
7    <link rel="stylesheet" href="css/slick.css">
8    <link rel="stylesheet" href="css/style.css">
9    <title>jissen</title>
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11</head>
12<body>
13
14<!-- voice -->
15<section class="voice" id="voice">
16<div class="voice-inner">
17  <div class="voice-top">
18    <ul class="voice-list tab">
19      <li class="voice-item active"><a class="voice-item-btn" href="#tab1">WEB制作コース</a></li>
20      <li class="voice-item"><a class="voice-item-btn" href="#tab2">Comming Soon</a></li>
21      <li class="voice-item"><a class="voice-item-btn" href="#tab3">Comming Soon</a></li>
22    </ul>
23  </div>
24
25
26<div class="voice-content active-content" id="tab1">
27    <div class="voice-block">
28      <ul class="voice-wrap slider">      
29        <li class="voice-box">
30          <div class="voice-icon">
31            <img src="img/男性アイコン.svg" alt="男性アイコン">
32            <p class="voice-name">20代男性</p>
33          </div>
34          <div class="voice-txt">
35            <p class="voice-txts">WEB制作コース。<br class="voice-br">ダミーテキストダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー<span class="voice-txts-sub">テキストダミーテキスト</span></p>
36          </div>
37        </li>
38        <li class="voice-box">
39          <div class="voice-icon">
40            <img src="img/女性アイコン.svg" alt="女性アイコン">
41            <p class="voice-name">20代女性</p>
42          </div>
43          <div class="voice-txt">
44            <p class="voice-txts">WEB制作コース。<br class="voice-br">ダミーテキストダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー<span class="voice-txts-sub">テキストダミーテキスト</span></p>
45          </div>
46        </li>        
47        <li class="voice-box">
48          <div class="voice-icon">
49            <img src="img/男性アイコン.svg" alt="男性アイコン">
50            <p class="voice-name">40代男性</p>
51          </div>
52          <div class="voice-txt">
53            <p class="voice-txts">WEB制作コース。<br class="voice-br">ダミーテキストダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー<span class="voice-txts-sub">テキストダミーテキスト</span></p>
54          </div>
55        </li>
56        <li class="voice-box">
57          <div class="voice-icon">
58            <img src="img/女性アイコン.svg" alt="女性アイコン">
59            <p class="voice-name">30代女性</p>
60          </div>
61          <div class="voice-txt">
62            <p class="voice-txts">WEB制作コース。<br class="voice-br">ダミーテキストダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー<span class="voice-txts-sub">テキストダミーテキスト</span></p>
63          </div>
64        </li>
65      </ul>
66    </div>    
67  </div>     
68<div class="voice-content" id="tab2">
69  <div class="voice-block">
70    <ul class="voice-wrap slider">      
71      <li class="voice-box">
72        <div class="voice-icon">
73          <img src="img/男性アイコン.svg" alt="男性アイコン">
74          <p class="voice-name-sub">Comming Soon</p>
75        </div>
76        <div class="voice-txt">
77          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
78        </div>
79      </li>
80      <li class="voice-box">
81        <div class="voice-icon">
82          <img src="img/男性アイコン.svg" alt="男性アイコン">
83          <p class="voice-name-sub">Comming Soon</p>
84        </div>
85        <div class="voice-txt">
86          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
87        </div>
88      </li>        
89      <li class="voice-box">
90        <div class="voice-icon">
91          <img src="img/男性アイコン.svg" alt="男性アイコン">
92          <p class="voice-name-sub">Comming Soon</p>
93        </div>
94        <div class="voice-txt">
95          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
96        </div>
97      </li>
98      <li class="voice-box">
99        <div class="voice-icon">
100          <img src="img/男性アイコン.svg" alt="男性アイコン">
101          <p class="voice-name-sub">Comming Soon</p>
102        </div>
103        <div class="voice-txt">
104          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
105        </div>
106      </li>
107    </ul>
108  </div>    
109</div>    
110<div class="voice-content" id="tab3">
111  <div class="voice-block">
112    <ul class="voice-wrap slider">      
113      <li class="voice-box">
114        <div class="voice-icon">
115          <img src="img/女性アイコン.svg" alt="女性アイコン">
116          <p class="voice-name-sub">Comming Soon</p>
117        </div>
118        <div class="voice-txt">
119          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
120        </div>
121      </li>
122      <li class="voice-box">
123        <div class="voice-icon">
124          <img src="img/女性アイコン.svg" alt="女性アイコン">
125          <p class="voice-name-sub">Comming Soon</p>
126        </div>
127        <div class="voice-txt">
128          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
129        </div>
130      </li>        
131      <li class="voice-box">
132        <div class="voice-icon">
133          <img src="img/女性アイコン.svg" alt="女性アイコン">
134          <p class="voice-name-sub">Comming Soon</p>
135        </div>
136        <div class="voice-txt">
137          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
138        </div>
139      </li>
140      <li class="voice-box">
141        <div class="voice-icon">
142          <img src="img/女性アイコン.svg" alt="女性アイコン">
143          <p class="voice-name-sub">Comming Soon</p>
144        </div>
145        <div class="voice-txt">
146          <p class="voice-txts">Comming Soon.<br class="voice-br">Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.Comming Soon.<span class="voice-txts-sub">Comming Soon.</span></p>
147        </div>
148      </li>
149    </ul>
150  </div>    
151</div>  
152</div>
153</section>
154<!-- /voice -->
155
156<script src="js/slick.min.js"></script>
157<script src="js/main.min.js"></script>
158<script src="js/javascript.js"></script>
159</body>
160</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806
m.ts10806

2020/05/13 23:06

自身で定義されたCSS、jsのコードをご提示ください。 あとプラグインは公式サイトURLとバージョンも提示してください。
kei344
kei344

2020/05/14 04:00

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップスライダーに関する質問

複数のスライダーを実装させたい。