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

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

解決済

2回答

2873閲覧

スライダーのドットナビ1つに対して複数の画像を設定することは可能でしょうか

seibi02

総合スコア15

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/10/29 13:45

編集2019/10/31 12:25

前提・実現したいこと

通常スライダーの画像とドットナビの数は1:1ですが、
例えば6枚の画像(A1~C2)に対してドットナビを半分の3つにすることは可能でしょうか
調べてみましたが類似質問やサンプルなども見つからなかったので質問しました。

添付画像のような流れにしたいです。
イメージ説明

sliderはslick sliderしか使ったことがないので slickで実現出来ればベストですが
別のスライダープラグインでも希望動作が可能なら取り入れたいと考えています。
slickでは無理だというような意見だけでも助かりますのでご存じの方お願いいたします。

試したこと

1→2に変化するgifを作成しスライダーに設定しようとも考えましたがスライダーの速度を変更した際に
gifも作り直す必要があるため断念しました。

仕様と経緯

・実際は画像が12枚ありすべてを見てほしい (1と2は関係性のある差分)
・ドットが12個並ぶのは見栄えはよくない、また見る気が失せるのではないか
・当初は動画やgifで対応しようとしたが動作が重くなるので断念

上記の点からこのような仕様でコーディング可能かデザイナーから確認がありました。
現在は実現可能か引き続き調査しながら
代替案としてドットを無くし、全体枚数と現在のスライド番号(1/12など)とprev、nextボタンの設置で打診中です。

ドットを押したときの挙動ですが
1番目ならA1、2番ならB1、3番目ならC1が表示されるようにしたいです。

追記コード(間引き)

customPaging: function(slider, i) { if(i % 2 == 0) { return $('<button type="button" />'); } },

追記コード(奇数偶数による表示切替)

index.html

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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link href="css/reset.css" rel="stylesheet"> 9 <link href="css/slick.css" rel="stylesheet"> 10 <link rel="stylesheet" type="text/css" href="css/slick-theme.css"> 11 <link rel="stylesheet" type="text/css" href="css/style.css"> 12</head> 13<body> 14 <div class="hero"> 15 <div class="dots"></div> 16 <section class="slide_test"> 17 <div class="slide_img img01"></div> 18 <div class="slide_img img02"></div> 19 <div class="slide_img img03"></div> 20 <div class="slide_img img04"></div> 21 <div class="slide_img img05"></div> 22 <div class="slide_img img06"></div> 23 </section> 24 </div> 25 26 27<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 28<script src="js/slick.min.js"></script> 29<script src="js/slider-conf.js"></script> 30 31</body> 32</html>

style.css

css

1img { 2 max-width: 100%; 3 height: auto; 4} 5.hero { 6 position: relative; 7 8} 9 10.dots { 11 position: absolute; 12 right: 50px; 13 bottom: 80px; 14} 15.slick-dots { 16 z-index: 2; 17} 18 19.slide_test { 20 position: relative; 21} 22 23.slide_img { 24 background-size: cover; 25 background-position: center center; 26 background-repeat: no-repeat; 27 overflow: hidden; 28 width: 100%; 29 height: 100vh; 30} 31 32.img01 { 33 background-image: url(http://placehold.it/1920x1080?text=A1); 34} 35.img02 { 36 background-image: url(http://placehold.it/1920x1080?text=A2); 37} 38.img03 { 39 background-image: url(http://placehold.it/1920x1080?text=B1); 40} 41.img04 { 42 background-image: url(http://placehold.it/1920x1080?text=B2); 43} 44.img05 { 45 background-image: url(http://placehold.it/1920x1080?text=C1); 46} 47.img06 { 48 background-image: url(http://placehold.it/1920x1080?text=C2); 49} 50

slider-cong.js

javascript

1$(document).on('ready', function() { 2 $('.slide_test').slick({ 3 arrows: false, 4 dots: true, 5 appendDots: $('.dots'), 6 autoplay: true, 7 autoplaySpeed: 1000, 8  }); 9 10 // $(".slick-dots > li:nth-child(odd)").show(); 11 $(".slick-dots > li:nth-child(even)").hide(); 12 13 $('.slide_test').on('afterChange', function(slick, currentSlide){ 14 $(".slick-dots > li:nth-child(odd)").toggle(); 15 $(".slick-dots > li:nth-child(even)").toggle(); 16 }); 17});

slick-theme.css

css

1.slick-dots 2{ 3 position: absolute; 4 /* bottom: -25px; */ 5

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

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

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

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

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

guest

回答2

0

slickスライダーのdotsを数字にカスタマイズしたいでも回答したんですが、
customPagingを使えば出来そうだと思います。

Dotに複数の画像を割り当てるのは難しいです(無理?)が、Dotを間引いて生成すれば良いと思います。
以下を修正して、1つ飛ばしでDotを生成すれば要望に合いませんか?

JS

1$('.slider').slick({ 2 customPaging: function(slider, i) { 3 return $('<button type="button" />').text(i + 1); 4 }, 5 dots: true, 6});

投稿2019/10/29 14:10

編集2019/10/29 14:19
oikashinoa

総合スコア2826

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

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

seibi02

2019/10/30 08:17

回答ありがとうございます。 間引き方がわからないので自分なりに書いてみた結果(コード追記しました) 以下の問題に当たりました。 ・ドットの間隔が間引いた分空いてしまう ・画像の2、4、6番目にスライドしたときドットに色がつかない ・見えないだけで2、4、6番目のドットがクリック出来てしまう もしこれらの問題を解決できる間引き方がありましたら 教えていただけないでしょうか。
oikashinoa

2019/10/31 03:08 編集

間引き方は正しいです。奇数のドットだけ出ると思います。(returnで返している<button>は適宜直してください。) でしたら間引かずに、ドットを最初は偶数箇所をCSS で隠して、画像切り替えられたら奇数を隠してみては? 最初と最後を繋げてループさせるなら、最後にダミー画像を追加して常に偶数になるようにしてみてください https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child https://tr.you84815.space/slick/events/swipe.html うまく行かなかったときは出力されたhtmlも合わせて貼ると考えやすいので本文に貼ってください
oikashinoa

2019/10/30 11:57

逆に質問ですが、ドットをクリックした時の動きはどう考えてます? 表示しているドットの数と画像が異なるのかと思ってます(動いたらスクショ貼って欲しい)が、ユーザーが混乱しませんかね? このような仕様を検討した理由を質問本文に追記すると他の人からも意見もらえると思いますよ
seibi02

2019/10/31 12:22

すみませんドットの挙動について失念しておりましたので仕様と経緯を記載いたしました。 ドットの仕様上、表示非表示の切り替えでは再現不可能だったんですが かなり近い形で再現できたので一応コードも記載いたしました。 何度もお付き合い頂きありがとうございます。
oikashinoa

2019/10/31 12:40

経緯確認しました。 他のも見つけたので、別回答にて。
guest

0

ベストアンサー

Swiper.jsの以下なら結構希望に近い(ドットがうるさくないという意味)気がします。

  • Pagination / Dynamic Bullets
  • Progress Pagination
  • Scrollbar

A1とA2が関連性があるなら、以下も面白いかも

  • Multiple Slides Per View

投稿2019/10/31 12:43

編集2019/10/31 12:45
oikashinoa

総合スコア2826

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

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

seibi02

2019/11/11 13:06

すみません返信遅くなりました やっと仕様が固まりましてProgress Pagination使用させていただくことになりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問