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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

227閲覧

スライダー時の挙動について

satoru225Simple

総合スコア27

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/25 08:54

編集2019/03/25 08:55

下記ソースコードにて、スライダーを作成しているのですが、
下に表示されている●のキャプションをクリックした際の動作が、
おかしくなってしまいます。

●おかしい挙動例
1つ目のキャプション選択時に3つ目をクリックといったように、
2つ飛ばしで選択すると、スライド中に
余計な要素が入り込んで、スムーズにスライドしてくれません。

html

1 2<div class="inner"> 3<div class="slideshow"> 4 <input type="radio" name="slideshow" id="switch1" checked> 5 <input type="radio" name="slideshow" id="switch2"> 6 <input type="radio" name="slideshow" id="switch3"> 7 <input type="radio" name="slideshow" id="switch4"> 8 <input type="radio" name="slideshow" id="switch5"> 9 <div class="slideContents"> 10 <section id="slide1"> 11 <img src="https://img.app.dcm-gate.com/wp-content/uploads/2020/02/20180215_nekostamp_R.jpg"> 12 </section> 13 <section id="slide2"> 14 <img src="http://d2dcan0armyq93.cloudfront.net/photo/odai/600/f49459ac1abdc1f6130807d9d9d1c610_600.jpg"> 15 </section> 16 <section id="slide3"> 17 <img src="https://img.sirabee.com/wp/wp-content/uploads/2016/02/iStock_000007044896_Medium.jpg"> 18 </section> 19 <section id="slide4"> 20 <img src="https://ddnavi.com/wp-content/uploads/2014/04/0429_neko_s.jpg"> 21 </section> 22 <section id="slide5"> 23 <img src="https://img.sirabee.com/wp/wp-content/uploads/2016/02/iStock_000007044896_Medium.jpg"> 24 </section> 25 </div> 26 <p class="arrow prev"> 27 <i class="ico"></i> 28 <label for="switch1"></label> 29 <label for="switch2"></label> 30 <label for="switch3"></label> 31 <label for="switch4"></label> 32 <label for="switch5"></label> 33 </p> 34 <p class="arrow next"> 35 <i class="ico"></i> 36 <label for="switch1"></label> 37 <label for="switch2"></label> 38 <label for="switch3"></label> 39 <label for="switch4"></label> 40 <label for="switch5"></label> 41 </p> 42 <div id="slideshow-active"> 43 <label for="switch1"></label> 44 <label for="switch2"></label> 45 <label for="switch3"></label> 46 <label for="switch4"></label> 47 <label for="switch5"></label> 48 </div> 49</div> 50 </div> 51 52css 53.inner { 54 width:500px; 55 margin: 0 auto; 56} 57/*ここから下をコピー*/ 58.slideshow { 59 position: relative; 60 overflow: hidden; 61} 62input[name="slideshow"] { 63 display: none; 64} 65 66/* :::::: slideContents :::::: */ 67.slideContents { 68 position: relative; 69 text-align: center; 70 -webkit-user-select: none; 71 user-select: none; 72 transition: transform .6s; 73} 74.slideContents section { 75 position: absolute; 76 top: 0; 77 left: 0; 78 width: 100%; 79 transform: translateX(100%); 80 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 81} 82.slideContents section img { 83 max-width: 100%; 84 box-sizing: border-box; 85 vertical-align: middle; 86} 87 88/* :::::: arrows :::::: */ 89.arrow, 90.arrow label, 91.arrow .ico { 92 position: absolute; 93} 94.arrow { 95 top: 0; 96 margin: 0; 97 98} 99.prev { 100 left: 0; 101} 102.next { 103 right: 0; 104} 105 106.arrow, 107.arrow label { 108 cursor: pointer; 109 width: 50px; 110 height: 100%; 111} 112.arrow label { 113 top: 0; 114 left: 0; 115 z-index: 1; 116} 117.arrow .ico { 118 top: calc(50% - 6px); 119 width: 12px; 120 height: 12px; 121 border-top: 3px solid #000; 122 opacity: 0; 123} 124.prev .ico { 125 left: 50%; 126 border-left: 3px solid #000; 127 transform: rotate(-45deg); 128 transition: left .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s; 129} 130.next .ico { 131 right: 50%; 132 border-right: 3px solid #000; 133 transform: rotate(45deg); 134 transition: right .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s; 135} 136.arrow .ico { 137 opacity: .6; 138} 139.prev .ico { 140 left: calc(50% - 6px); 141} 142.next:hover .ico { 143 right: calc(50% - 6px); 144} 145 146/* :::::: mechanism :::::: */ 147#switch1:checked ~ .slideContents #slide1, 148#switch2:checked ~ .slideContents #slide2, 149#switch3:checked ~ .slideContents #slide3, 150#switch4:checked ~ .slideContents #slide4, 151#switch5:checked ~ .slideContents #slide5 { 152 position: relative; 153 transform: none; 154} 155#switch1:checked ~ .slideContents #slide5, 156#switch1:checked ~ .slideContents #slide4, 157#switch2:checked ~ .slideContents #slide1, 158#switch2:checked ~ .slideContents #slide5, 159#switch3:checked ~ .slideContents #slide2, 160#switch3:checked ~ .slideContents #slide1, 161#switch4:checked ~ .slideContents #slide3, 162#switch4:checked ~ .slideContents #slide2, 163#switch5:checked ~ .slideContents #slide4, 164#switch5:checked ~ .slideContents #slide3 { 165 transform: translateX(-100%); 166} 167#switch1:checked ~ .slideContents #slide3, 168#switch1:checked ~ .slideContents #slide4, 169#switch2:checked ~ .slideContents #slide4, 170#switch2:checked ~ .slideContents #slide5, 171#switch3:checked ~ .slideContents #slide5, 172#switch3:checked ~ .slideContents #slide1, 173#switch4:checked ~ .slideContents #slide1, 174#switch4:checked ~ .slideContents #slide2, 175#switch5:checked ~ .slideContents #slide2, 176#switch5:checked ~ .slideContents #slide3 { 177 transition-duration: 0s; 178} 179 180/* :::::: arrow mechanism :::::: */ 181.arrow label { 182 pointer-events: none; 183} 184#switch1:checked ~ .prev label[for="switch5"], 185#switch2:checked ~ .prev label[for="switch1"], 186#switch3:checked ~ .prev label[for="switch2"], 187#switch4:checked ~ .prev label[for="switch3"], 188#switch5:checked ~ .prev label[for="switch4"], 189#switch1:checked ~ .next label[for="switch2"], 190#switch2:checked ~ .next label[for="switch3"], 191#switch3:checked ~ .next label[for="switch4"], 192#switch4:checked ~ .next label[for="switch5"], 193#switch5:checked ~ .next label[for="switch1"] { 194 pointer-events: auto; 195} 196div#slideshow-active,div#slideshow-active label{ 197 -webkit-transform: translateZ(0); 198 -webkit-transition: all 0.5s ease-out; 199 -moz-transition: all 0.5s ease-out; 200 -o-transition: all 0.5s ease-out; 201 transition: all 0.5s ease-out; 202} 203div#slideshow-active{ 204 text-align: center; 205} 206 207div#slideshow-active label{ 208 display: inline-block; 209 width: 15px; 210 height: 15px; 211 background: #bbb; 212 border-radius: 50%; 213 margin: 0 8px; 214 margin-top: 0px; 215 margin-right: 8px; 216 margin-bottom: 0px; 217 margin-left: 8px; 218} 219#switch1:checked ~ #slideshow-active label:nth-child(1), 220#switch2:checked ~ #slideshow-active label:nth-child(2), 221#switch3:checked ~ #slideshow-active label:nth-child(3), 222#switch4:checked ~ #slideshow-active label:nth-child(4), 223#switch5:checked ~ #slideshow-active label:nth-child(5) { 224 background: #56b329; 225 border-color: #56b329 !important; 226} 227

実機確認
https://codepen.io/satoru1993/pen/vPPNEO?editors=1100

何卒アドバイス等いただけると幸いです。
宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

うーん、CSSでは限界があるような?
多少見た目が変わりますが、

CSS

1.slideContents section { 2 visibility:hidden; 3} 4#switch1:checked ~ .slideContents #slide1, 5#switch2:checked ~ .slideContents #slide2, 6#switch3:checked ~ .slideContents #slide3, 7#switch4:checked ~ .slideContents #slide4, 8#switch5:checked ~ .slideContents #slide5 { 9 visibility:visible; 10}

とかではどうでしょうか?

投稿2019/03/26 03:55

Lhankor_Mhy

総合スコア35869

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

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

Lhankor_Mhy

2019/03/26 04:02

transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1); にして、 opacity で表示コントロールした方が、すこし見た目がいいかもですね。
satoru225Simple

2019/03/26 04:36

ありがとうございます! 試してまた報告します!
satoru225Simple

2019/03/26 04:40

こちら試したところ、うまく行きました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問