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

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

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

slickスライダーを全く違うデザインで2つ表示したい。

UKYO9311
UKYO9311

総合スコア31

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

3012閲覧

投稿2019/07/26 10:03

前提・実現したいこと

同じページ内で全く違うデザインのスライダーを二つ作りたいです。

一つ目は完成したのですが、二つ目を表示させようとすると一つ目に作ったスライダーのcssが反映されてしまいうまく表示されません。一つ目と二つ目のcssを完全に分けて作業したいのですがいい方法はありますでしょうか??( ; ; )

cssはslick.cssに直接書いてます。

お手数おかけしますが、よろしくお願いいたします。

該当のソースコード

html

1<div class="slider"> 2 <div> 3 4 中略 5 6 <img alt="Alt" src="images/top_kv1-1.jpg" /> 7 </div> 8 <div> 9 10 中略 11 12 <img alt="Alt" src="images/top_kv1-1.jpg" /> 13 </div> 14 <div> 15 16 中略 17 18 <img alt="Alt" src="images/top_kv1-1.jpg" /> 19 </div> 20 <div> 21 22 中略 23 24 <img alt="Alt" src="images/top_kv1-1.jpg" /> 25 </div> 26</div> 27 28<ul class="slider2"> 29 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 30 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 31 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 32 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 33 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 34</ul>

css

1/* Slider */ 2.slider-wrapper{ 3 position: relative; 4 overflow: hidden; 5 width: 100%; 6 7 } 8 9 10 .slick-list { 11 position: relative; 12 overflow: hidden; 13 display: block; 14 margin: 0; 15 padding: 0; 16 } 17 18 .slick-list:focus { 19 outline: none; 20 } 21 22 .slick-list.dragging { 23 cursor: pointer; 24 cursor: hand; 25 } 26 27 .slick-slider .slick-list, 28 .slick-track, 29 .slick-slide, 30 .slick-slide img { 31 height: 100vh; 32 object-fit: cover; 33 } 34 35 .slick-track { 36 position: relative; 37 left: 0; 38 top: 0; 39 display: block; 40 zoom: 1; 41 } 42 43 .slick-track:before, 44 .slick-track:after { 45 content: ""; 46 display: table; 47 } 48 49 .slick-track:after { 50 clear: both; 51 } 52 53 .slick-loading .slick-track { 54 visibility: hidden; 55 } 56 57 .slick-slide { 58 float: left; 59 height: 100%; 60 min-height: 1px; 61 display: none; 62 } 63 64 .slick-slide img { 65 width: 100%; 66 height: 100vh; 67 margin-top: 82px; 68 } 69 70 .slick-slide.dragging img { 71 pointer-events: none; 72 width: 100%; 73 height: 100vh; 74 } 75 76 .slick-initialized .slick-slide { 77 display: block; 78 } 79 80 .slick-loading .slick-slide { 81 visibility: hidden; 82 } 83 84 .slick-vertical .slick-slide { 85 display: block; 86 height: auto; 87 border: 1px solid transparent; 88 } 89 90 .slick-slide > .slick-slider-img { 91 position: relative; 92 display: block; 93 width: 100%; 94 height: 100vh; 95 } 96 97 .slick-slide .image { 98 /*height: 180px;*/ 99 height: 100vh; 100 width: 100%; 101 margin: 0 auto; 102 } 103 104 .slick-slide img { 105 display: block; 106 width: 100%; 107 height: 100vh; 108 } 109 110 .slick-slide img.slick-loading { 111 display: none; 112 } 113 114 115 .slick-prev{ 116 width: 65px; 117 border: none; 118 border-radius: none; 119 position: absolute; 120 top: 50%; 121 transform: translateY(-20%); 122 left: 115px; 123 padding: 0.25em 0.5em; 124 z-index: 400; 125 } 126 127 .slick-next{ 128 width: 65px; 129 border: none; 130 border-radius: none; 131 position: absolute; 132 top: 50%; 133 transform: translateY(-20%); 134 right: 115px; 135 padding: 0.25em 0.5em; 136 z-index: 400; 137 }

js

1$(document).ready(function() { 2 3 const barColors = ['#fff', '#fff', '#fff','#fff']; 4 5 $.fn.startBar = function(index) { 6 this 7 .eq(index) 8 .css({ backgroundColor: barColors[index]}) 9 .animate({ width: '100%' }, 3400 ); 10 } 11 12 $('.slider').slick({ 13 autoplay: true, 14 arrows: true, 15 dots: false, 16 speed: 800, 17 autoplaySpeed: 3000, 18 prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">', 19 nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">', 20 adaptiveHeight: true 21 }).on('afterChange', function(event, slick, currentSlide) { 22 if (currentSlide === 0) 23 $('.bar').startBar(currentSlide); 24 $('.bar').css({width: 0}).startBar(currentSlide); 25 $('.bar').css({width: 0}); 26 }); 27 $('.bar').startBar(0); 28 29 30 31 32 33 $('.slider2').slick({ 34 autoplay: true, 35 dots: false, 36 speed: 800, 37 autoplaySpeed: 3000, 38 adaptiveHeight: true 39 }) 40 41});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

.slider. slider2ごとにCSSを書いてみてはどうでしょうか?

CSS

1/* .slider用*/ 2.slider .slider-wrapper { 3} 4.slider .slick-list { 5} 6(以下略) 7 8/* .slider2用*/ 9.slider2 .slider-wrapper { 10} 11.slider2 .slick-list { 12} 13(以下略)

私がslick使うときはこうしてますよ。

投稿2019/07/26 11:02

mksk

総合スコア247

8zca, jun68ykt👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

UKYO9311

2019/07/27 09:13

回答ありがとうございます!!別々のStyleで表示できました!! 参考にさせてもらいます!!^ ^

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。