サムネイルの切り替えがうまくいきません

Question

プログラミング初心者です。

HTMLとCSSでサムネイルを押すとスライドが切り替えれるものを作りたいです。

コードをコピーできるサイトを使用して作成していますが、自分用にコードを書き換える(画像を変更する)とサムネイルの切り替えがうまくいかなくなり困っています。

以下がそのコードになります。

自分用に書き換える時にHTMLのimg srcの画像データを変更していますが、サムネイルの変更ができなくなってしまいます。画像データを変更するのに、ほかにも変更しなければならないコードがあるのでしょうか？

色々調べ持って試行錯誤しましたが、できませんでした。
アドバイスいただければと思います。

<div class="cp_cssslider">
<input type="radio" name="cp_switch" id="photo1" checked/>
<label for="photo1"><img src="umakuikimasen.jpg" /></label>
<img src="umakuikimasen.jpg" />
<input type="radio" name="cp_switch" id="photo2"/>
<label for="photo2"><img src="umakuikimasen2.jpg" /></label>
<img src="umakuikimasen2.jpg" />
<input type="radio" name="cp_switch" id="photo2"/>
<label for="photo2"><img src="umakuikimasen3.jpg" /></label>
<img src="umakuikimasen3.jpg" />
</div>

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
width: 300px;
padding-top: 200px; 
position: relative;
margin: 2em auto;
text-align: center;
}
.cp_cssslider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 3px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}

.cp_cssslider label {
margin: 15px 5px 0 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 40px;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FF7043;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
｝

Comments

[yasutomi]

プログラミング初心者なら質問に初心者マークをつけていただきたいです。

[akintat-2748]

わかりました、次回からそうさせていただきます。

[yasutomi]

次回からではなく今から
初心者マークをつけていただきたいです。

[akintat-2748]

修正させていただきました。

Answer 1

CSSの　.cp_cssslider クラスセレクタ内のpadding-topを画像のサイズに合わせないとだめなんじゃないでしょうか？

Comments

[akintat-2748]

ご返答ありがとうございます。padding-top のサイズを合わせることでサムネイルの切り替えが可能になりました。可能になったのですが、画像が画面いっぱいに表示されてしまうのですがcp_csssliderのボックスサイズを小さくすることは可能でしょうか？

[wintermaples]

うまくいくかわかりませんが、imgタグそのものでwidth, heightを指定してみてはいかがでしょうか？

[akintat-2748]

なるほど、その方法で一度試してみます。とても助かりました、ありがとうございます！

[akintat-2748]

img タグ内で指定したらサイズ調整できました。ありがとうございました。ベストアンサーにさせていただきました。もう一つアドバイス頂きたいのですが、サムネイルの表示位置をメイン画像の横に、縦向きにしたいのですが、何か方法はあるのでしょうか？ 調べてposition: absolute;などを使ってやってみたのですが、サムネイルの画像が重なって表示されてしまってうまくいきませんでした・・・

[wintermaples]

んー、僕はこういう結構テクニカルなcssの扱いをやったことないので一概にすぐにこう！とは答えられないです。ごめんなさい。
javascriptを使用すれば素直に実装できるのですが

[akintat-2748]

なるほど、javascriptを使うという考えがなかったです。ご丁寧にありがとうございました。いろいろ試したいと思います。