JSFiddle - React, Tailwind, and code Playground
HTML
<p>▼▼画像クリックでスライド▼▼</p>
<!-- 【スライダーA】 -->
<section id="A">
<div class="slider">
<input type="radio" name="slider-a" id="slider-a1" class="slider1" value="a1" checked>
<input type="radio" name="slider-a" id="slider-a2" class="slider2" value="a2">
<input type="radio" name="slider-a" id="slider-a3" class="slider3" value="a3">
<div class="inner_slider">
<label for="slider-a2"><img src="http://bit.ly/2sNLCTb" class="img1"></label>
<label for="slider-a3"><img src="http://bit.ly/2FtAkX4" class="img2"></label>
<label for="slider-a1"><img src="http://bit.ly/2FrhxLM" class="img3"></label>
</div>
</div>
<div class="hukusei">複製ボタン</div>
</section>
<!-- 【スライダーB】 -->
<section id="B">
<div class="slider">
<input type="radio" name="slider-b" id="slider-b1" class="slider1" value="b1" checked>
<input type="radio" name="slider-b" id="slider-b2" class="slider2" value="b2">
<div class="inner_slider">
<label for="slider-b2"><img src="http://bit.ly/2oySzSB" class="img1"></label>
<label for="slider-b1"><img src="http://bit.ly/2ozsrXV" class="img2"></label>
</div>
</div>
<div class="hukusei">複製ボタン</div>
</section>
<!-- 【複製画像】 -->
<p>▼▼ここに複製▼▼</p>
<div class="linkimg"></div>
<!-- 質問 -->
<p>質問➀:複製は、『クリックした「複製ボタン」と同じsectionの画像』を表示したい</p>
<p>質問➁:複製は、常に1つだけ表示したい。(現状は「複製ボタン」を押すたびに追加されていってしまう。)</p>
CSS
/* 【スライダー】のCSS */
.slider {
width: 200px;
height: 150px;
overflow: hidden;
}
.img1 {
position: absolute;
left: 0;
top: 0;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}
.img3 {
position: absolute;
left: 400px;
top: 0;
}
.img4 {
position: absolute;
left: 600px;
top: 0;
}
.inner_slider {
position: relative;
width: 800px;
left: 0;
top: 0;
transition: all .3s ease-in-out;
}
.inner_slider > img {
width: inherit;
height: inherit;
object-fit: contain;
}
.slider1:checked ~ .inner_slider {
transform: translateX(0);
}
.slider2:checked ~ .inner_slider {
transform: translateX(-200px);
}
.slider3:checked ~ .inner_slider {
transform: translateX(-400px);
}
/* 装飾のCSS */
p:first-child {
background: #65beff;
}
p {
background: #FF6565;
padding: 5px;
}
.linkimg {
border: 2px solid #FF6565;
width: 200px;
height: 150px;
}
.hukusei {
background: #0a7cff;
width: 150px;
padding: 5px;
border-radius: 10px;
color: #FFF;
font-weight: bold;
text-align: center;
margin: 10px;
cursor: pointer;
}
JavaScript
$(".hukusei").click(function(){
$("div:first").clone().appendTo(".linkimg");
})