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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

1回答

1298閲覧

スライドショーをひとつのスライドショーにまとめる方法が知りたいです。

nomura02

総合スコア133

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/10 06:32

編集2021/01/11 00:25

何か少しでもヒントを頂けますと嬉しいです。

スライドショーの切り替えについて

静的HTMLにslickを使ってスライドショーを実装しています。
https://teratail.com/questions/202267
↑こちらを参考にさせていただきました。

4枚の画像が切り替わるスライドショーを4つ用意し、
それを更に1つのスライドショーにまとめてユーザーが切り替えられるようにしたいです。
イメージ説明

[スライドショー完成までの計画]
1 「プログレスバーと画像前次ボタン付きのスライドショー」(A)を4つ用意する
2 (A)をさらにひとつのスライドショーにまとめ、スライド出来るようにする。
イメージ説明

##現在のエラーと分からないこと
・4つ用意したが、二個目以降のスライドショーのプログレスバーが動かない。
・とりあえず形になってほしい気持ちから4つのスライダーを「big-slider」に変えてJSの方に追記したところ、大カオスな状態になった。
・仮に上記が解決されたとしてこの計画では、画像切替ボタンも動いてしまう。操作ボタンは、動かないでほしいのです。

JS

1$('.big-slider').slick({ 2 arrows: true, 3 dots: false, 4 speed: 1200, 5 prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">', 6 nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">', 7 adaptiveHeight: true 8}).on('afterChange', function(event, slick, currentSlide) { 9 if (currentSlide === 0) 10 $('.bar').css({width: 0}); 11 $('.bar').startBar(currentSlide); 12});

** 該当のソースコード**

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Q202267</title> 6 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 7 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 8 <script src="./js/main.js"></script> 9 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 10 <link rel="stylesheet" type="text/css" href="css/style.css"/> 11</head> 12<body> 13 14<div class="big-slider"> 15 <div class="containerA container"> 16 <div class="slider"> 17 <div> 18 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" /> 19 </div> 20 <div> 21 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" /> 22 </div> 23 <div> 24 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" /> 25 </div> 26 <div> 27 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" /> 28 </div> 29 </div> 30 31 <div class="progress-bars"> 32 <div class="progress-bar-box"><div class="bar"></div></div> 33 <div class="progress-bar-box"><div class="bar"></div></div> 34 <div class="progress-bar-box"><div class="bar"></div></div> 35 <div class="progress-bar-box"><div class="bar"></div></div> 36 </div> 37 </div> 38 39 40 <div class="containerB container"> 41 <div class="slider"> 42 <div> 43 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" /> 44 </div> 45 <div> 46 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" /> 47 </div> 48 <div> 49 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" /> 50 </div> 51 <div> 52 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" /> 53 </div> 54 </div> 55 56 <div class="progress-bars"> 57 <div class="progress-bar-box"><div class="bar"></div></div> 58 <div class="progress-bar-box"><div class="bar"></div></div> 59 <div class="progress-bar-box"><div class="bar"></div></div> 60 <div class="progress-bar-box"><div class="bar"></div></div> 61 </div> 62 </div> 63 64 65 <div class="containerC container"> 66 <div class="slider"> 67 <div> 68 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" /> 69 </div> 70 <div> 71 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" /> 72 </div> 73 <div> 74 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" /> 75 </div> 76 <div> 77 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" /> 78 </div> 79 </div> 80 81 <div class="progress-bars"> 82 <div class="progress-bar-box"><div class="bar"></div></div> 83 <div class="progress-bar-box"><div class="bar"></div></div> 84 <div class="progress-bar-box"><div class="bar"></div></div> 85 <div class="progress-bar-box"><div class="bar"></div></div> 86 </div> 87 </div> 88 89 90 <div class="containerD container"> 91 <div class="slider"> 92 <div> 93 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" /> 94 </div> 95 <div> 96 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" /> 97 </div> 98 <div> 99 <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" /> 100 </div> 101 <div> 102 <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" /> 103 </div> 104 </div> 105 106 <div class="progress-bars"> 107 <div class="progress-bar-box"><div class="bar"></div></div> 108 <div class="progress-bar-box"><div class="bar"></div></div> 109 <div class="progress-bar-box"><div class="bar"></div></div> 110 <div class="progress-bar-box"><div class="bar"></div></div> 111 </div> 112 </div> 113 114</div> 115</body> 116</html>

CSS

1/* Slider */ 2.container { 3 position: relative; 4} 5 6.slider{ 7 width: 55%; 8} 9 10.slick-slide img { 11 display: block; 12 width: 100%; 13 height: 55vh; 14 margin-top: 4px !important; 15} 16 17 18.slick-prev { 19 width: 65px; 20 border: none; 21 border-radius: none; 22 position: absolute; 23 top: 50%; 24 -webkit-transform: translateY(-20%); 25 transform: translateY(-20%); 26 right: -30%; 27 padding: 0.25em 0.5em; 28 z-index: 400; 29} 30 31.slick-next { 32 width: 65px; 33 border: none; 34 border-radius: none; 35 position: absolute; 36 top: 50%; 37 -webkit-transform: translateY(-20%); 38 transform: translateY(-20%); 39 right: -60%; 40 padding: 0.25em 0.5em; 41 z-index: 400; 42} 43 44@media screen and (max-width: 767px) { 45 .slick-next { 46 display: none !important; 47 } 48 .slick-prev { 49 display: none !important; 50 } 51} 52 53.progress-bars { 54 max-width: 55%; 55 position: absolute; 56 top: 100%; 57 left: 0; 58 right: 0; 59 display: flex; 60} 61 62.progress-bar-box { 63 height: 5px; 64 width: 25%; 65} 66 67.progress-bar-box:nth-child(even) { 68 background-color: #aaa; 69} 70 71.progress-bar-box:nth-child(odd) { 72 background-color: #aaa; 73} 74 75.bar { 76 height: 100%; 77 width: 0; 78} 79 80

JS

1$(document).ready(function() { 2 3 const barColors = ['#f00', '#ff0', '#f00','#ff0']; 4 5 $.fn.startBar = function(index) { 6 this 7 .eq(index) 8 .css({ backgroundColor: barColors[index]}) 9 .animate({ width: '100%' }, 3000 ); 10 } 11 12 $('.slider').slick({ 13 autoplay: true, 14 arrows: true, 15 dots: false, 16 speed: 1200, 17 autoplaySpeed: 3000, 18 prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">', 19 nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">', 20 adaptiveHeight: true 21 }).on('afterChange', function(event, slick, currentSlide) { 22 if (currentSlide === 0) 23 $('.bar').css({width: 0}); 24 $('.bar').startBar(currentSlide); 25 }); 26 27 $('.bar').startBar(0); 28}); 29 30 31// $('.big-slider').slick({ 32// arrows: true, 33// dots: false, 34// speed: 1200, 35// prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">', 36// nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">', 37// adaptiveHeight: true 38// }).on('afterChange', function(event, slick, currentSlide) { 39// if (currentSlide === 0)### ヘディングのテキスト 40// $('.bar').css({width: 0}); 41// $('.bar').startBar(currentSlide); 42// }); 43

環境

  • PC:Windows
  • エディタ:VScode

試したこと

  1. デバッグツールで表示されてるエラーとにらめっこしていたのですが、

エラーがなくなっても解決されなかったので、質問させて頂きました。
0. JS内のcode記載する順番が悪いのだろうかと思い、前後させてみましたが、うまくいきませんでした。
0. https://webcode-lab.com/topics/blogid/8/
を参考にさせて頂き、「$() 関数」が競合云々という問題じゃないということが分かりました。


[現在…]
アドバイス頂いた「任意で切り替え」を自分なりに解釈し、そもそもこれをslickでやろうとしていること自体が問題なのではないか?と思いはじめて来たのですが、皆様のご意見を頂けますと幸いです。

もし、必要な情報がありましたら、追記させていただきます。
宜しくお願いします。

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

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

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

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

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

m.ts10806

2021/01/10 08:55

1回プログレスバー忘れて「任意で切り替え」だけやってみてはどうでしょう。
nomura02

2021/01/10 09:02

すみません「任意で切り替え」について調べたのですが分からず… もう少しヒントをいただけますと踏み込んだ理解ができるかと思いますが宜しければご教示頂けますと幸いです…すみません…
guest

回答1

0

自己解決

https://swiperjs.com/demos/180-nested.html
こちらにある、スリックではなくスワイパーで作ったほうが、完成形に近いものが作れそうです。
見ていただいた皆さん、ありがとうございます。
もし、良いアイディアがありましたら、また教えていただけますと幸いです。

投稿2021/01/12 01:00

nomura02

総合スコア133

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問