1
作成したスライドショーに2つの問題があります。私の最初の問題は、私の背中の矢印が機能しないことです。だから私はそれをクリックしても何も起こらない。私の2番目の問題は、このスライドショーを無限にしようとしていることです。それで、スライドショーの最後に行くと（スライド17）、次のボタンで画像番号1に戻ってほしいと思っています。それぞれのスライドに「次の」と「前のもの」があると思っていましたが、それを元のイメージに戻します（イメージ17の次のイメージはイメージ1ですが）うーん、それはうまくいきませんでした。スライドショーを無限にしようとしていて、戻る矢印が機能していません
**ちなみに、私は実際に子犬のスライドショーを作っているわけではありません（しかし、もっと楽しいでしょうか？）。あなたのラジオボタンに名前を与える必要があり
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
box-shadow: 10px 10px 5px #888888;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
}
.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label { display: block; }
}<ul class="slides">
<input type="radio" id="img-1" checked>
<li class="slide-container">
<div class="slide">
<img src="http://www.windowsmode.com/wp-content/uploads/2015/08/Cute-Black-Dog.jpg">
</div>
<div class="nav">
<label for="img-17" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" id="img-2">
<li class="slide-container">
<div class="slide">
<img src="http://cdn-www.dailypuppy.com/dog-images/riley-the-golden-retriever_61755_2016-09-27_w450.jpg">
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" id="img-3">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-085.jpg">
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" id="img-4">
<li class="slide-container">
<div class="slide">
<img src="https://peopledotcom.files.wordpress.com/2017/05/downward-dog-3.jpg?w=2000&h=1334">
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" id="img-5">
<li class="slide-container">
<div class="slide">
<img src="http://cdn.akc.org/content/hero/famous_dog_names_header_.jpg">
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" id="img-6">
<li class="slide-container">
<div class="slide">
<img src="http://www.dogster.com/wp-content/uploads/2017/01/laryngeal-paralysis-in-dogs.jpg">
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-7" class="next">›</label>
</div>
</li>
<input type="radio" id="img-7">
<li class="slide-container">
<div class="slide">
<img src="http://www.wallpaperstop.com/wallpapers/animal-wallpapers/dog-wallpapers/dog-picture-1280x1024-0010.jpg">
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-8" class="next">›</label>
</div>
</li>
<input type="radio" id="img-8">
<li class="slide-container">
<div class="slide">
<img src="https://karinalyudmilova.files.wordpress.com/2014/12/dogs.png">
</div>
<div class="nav">
<label for="img-7" class="prev">‹</label>
<label for="img-9" class="next">›</label>
</div>
</li>
<input type="radio" id="img-9">
<li class="slide-container">
<div class="slide">
<img src="http://ichef.bbci.co.uk/news/1024/cpsprodpb/E178/production/_91002775_dogspl.jpg">
</div>
<div class="nav">
<label for="img-8" class="prev">‹</label>
<label for="img-10" class="next">›</label>
</div>
</li>
<input type="radio" id="img-10">
<li class="slide-container">
<div class="slide">
<img src="http://www.petinsurance.com/images/VSSimages/consumer/v5/banner_dog_insurance.jpg">
</div>
<div class="nav">
<label for="img-9" class="prev">‹</label>
<label for="img-11" class="next">›</label>
</div>
</li>
<input type="radio" id="img-11">
<li class="slide-container">
<div class="slide">
<img src="https://www.petmd.com/sites/default/files/petmd-teacup-dogs.jpg">
</div>
<div class="nav">
<label for="img-10" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
<input type="radio" id="img-12">
<li class="slide-container">
<div class="slide">
<img src="https://tse1.mm.bing.net/th?id=OIP.TRIchMXZiuFXfm-845GdYgEsDI&pid=15.1&P=0&w=247&h=165">
</div>
<div class="nav">
<label for="img-11" class="prev">‹</label>
<label for="img-13" class="next">›</label>
</div>
</li>
<input type="radio" id="img-13">
<li class="slide-container">
<div class="slide">
<img src="http://www.dw.com/image/36553143_303.jpg">
</div>
<div class="nav">
<label for="img-12" class="prev">‹</label>
<label for="img-14" class="next">›</label>
</div>
</li>
<input type="radio" id="img-14">
<li class="slide-container">
<div class="slide">
<img src="http://www.pets4homes.co.uk/images/articles/1362/large/the-five-main-reasons-behind-why-dogs-bite-52ff9d965af7b.jpg">
</div>
<div class="nav">
<label for="img-13" class="prev">‹</label>
<label for="img-15" class="next">›</label>
</div>
</li>
<input type="radio" id="img-15">
<li class="slide-container">
<div class="slide">
<img src="http://www.greenfieldanimalhospital.com/clients/10589/images/dog.jpg">
</div>
<div class="nav">
<label for="img-14" class="prev">‹</label>
<label for="img-16" class="next">›</label>
</div>
</li>
<input type="radio" id="img-16">
<li class="slide-container">
<div class="slide">
<img src="https://tse4.mm.bing.net/th?id=OIP.mLgGlpjW8HZi4RWHm5oGigEsCp&pid=15.1&P=0&w=299&h=170">
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-17" class="next">›</label>
</div>
</li>
<input type="radio" id="img-17">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-068.jpg">
</div>
<div class="nav">
<label for="img-16" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
回答が役に立ちましたか？ – Cheshire
はい、完璧に動作しました！ –