###目的
スライダーで表示している画像と連動して、同じ画像を別の場所に表示させたいです。
###現状
このようなスライダーがあります。
https://jsfiddle.net/bbc1knka/
上のスライダーのコードは下記です。
html
1<!-- 【スライダー】 --> 2<p>▼▼クリックで画像がスライドします。▼▼</p> 3<div class="slider"> 4 5 <input type="radio" name="radio_slider" id="radio_slider1" value="1" checked> 6 <input type="radio" name="radio_slider" id="radio_slider2" value="2"> 7 <input type="radio" name="radio_slider" id="radio_slider3" value="3"> 8 9 <div class="inner_slider"> 10 <label for="radio_slider2"><img src="http://bit.ly/2sNLCTb" class="img1"></label> 11 <label for="radio_slider3"><img src="http://bit.ly/2FtAkX4" class="img2"></label> 12 <label for="radio_slider1"><img src="http://bit.ly/2FrhxLM" class="img3"></label> 13 </div> 14 15</div> 16 17<!-- 【連動画像】 --> 18<p>▼▼ここに画像を連動して表示させたい。▼▼</p> 19<div class="linkimg"> 20<img src="選択中の画像URL?" class="link"> 21</div>
css
1/* 【スライダー】 */ 2.slider { 3width: 200px; 4height: 150px; 5overflow: hidden; 6} 7.img1 { 8position: absolute; 9left: 0; 10top: 0; 11} 12.img2 { 13position: absolute; 14left: 200px; 15top: 0; 16} 17.img3 { 18position: absolute; 19left: 400px; 20top: 0; 21} 22.img4 { 23position: absolute; 24left: 600px; 25top: 0; 26} 27 28.inner_slider { 29position: relative; 30width: 800px; 31left: 0; 32top: 0; 33transition: all .3s ease-in-out; 34} 35.inner_slider > img { 36 width: inherit; 37 height: inherit; 38 object-fit: contain; 39} 40 41#radio_slider1:checked ~ .inner_slider { 42transform: translateX(0); 43} 44#radio_slider2:checked ~ .inner_slider { 45transform: translateX(-200px); 46} 47#radio_slider3:checked ~ .inner_slider { 48transform: translateX(-400px); 49} 50#radio_slider4:checked ~ .inner_slider { 51transform: translateX(-600px); 52}
###■難しいところ
ただし、【スライダー】の部分のHTMLの構造は変えずに、javascriptかCSSのみで、【連動画像】を連動させたいのです。
そのようなことはできますでしょうか?
css、javascriptにお詳しい方、どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/27 01:51
2018/02/27 02:17
退会済みユーザー
2018/02/27 02:56
2018/02/27 03:29
退会済みユーザー
2018/02/27 04:08 編集
退会済みユーザー
2018/02/27 04:08 編集