CSS3では、複数のスライダは一度に1つのメイン画像しか表示しません

Question

私はwebdesignの絶対的なnoobであり、私は主に自分のゲームアートポートフォリオに使用しています。私はHTMLとCSS3にはある程度精通していますが、それは私のコーディングスキルがかなり終わりを告げるところです。

私のポートフォリオにはサムネイル付きの素敵な単純なスライダーが必要でしたが、私はthis oneをオンラインで見つけたので、ほとんどの場合私にとってはうまくいくようです。

私はこのスライダーを私のWebページに複製したいので、私が持っているプロジェクトごとにスライダー全体を専用にして画像で埋め尽くすことができます。

しかし、このスライダーでは私にはできません。それを複製すると、一度にクリックされたサムネイルに対応する1つのメイン画像しか表示されません。ここで

はHTMLです：

<div id="project2"> 

     <!-- Project slider --> 
     <div class="p-slider"> 
      <input type="radio" name="slide_switch" id="id1"/> 
      <label for="id1"> 
       <img src="images/content/3D/turtleneck_staf_2.jpg"/> 
      </label> 
      <img src="images/content/3D/turtleneck_staf_2.jpg"/> 

      <!--Lets show the second image by default on page load--> 
      <input type="radio" name="slide_switch" id="id2" checked="checked"/> 
      <label for="id2"> 
       <img src="images/content/3D/turtleneck_staf_1.jpg"/> 
      </label> 
      <img src="images/content/3D/turtleneck_staf_1.jpg"/> 

      <input type="radio" name="slide_switch" id="id3"/> 
      <label for="id3"> 
       <img src="images/content/3D/turtleneck_staf_3.jpg"/> 
      </label> 
      <img src="images/content/3D/turtleneck_staf_3.jpg"/> 

      <input type="radio" name="slide_switch" id="id4"/> 
      <label for="id4"> 
       <img src="images/content/3D/turtleneck_staf_4.jpg"/> 
      </label> 
      <img src="images/content/3D/turtleneck_staf_4.jpg"/> 

      <input type="radio" name="slide_switch" id="id5"/> 
      <label for="id5"> 
       <img src="images/content/3D/turtleneck_staf_5.jpg"/> 
      </label> 
      <img src="images/content/3D/turtleneck_staf_5.jpg"/> 
     </div> 

     </div> 


     <div id="project3"> 

     <!-- Project slider --> 
     <div class="p-slider"> 
      <input type="radio" name="slide_switch" id="id6"/> 
      <label for="id6"> 
       <img src="images/content/3D/keep_it_low_poly_2.jpg"/> 
      </label> 
      <img src="images/content/3D/keep_it_low_poly_2.jpg"/> 

      <!--Lets show the second image by default on page load--> 
      <input type="radio" name="slide_switch" id="id7" checked="checked"/> 
      <label for="id7"> 
       <img src="images/content/3D/keep_it_low_poly_1.jpg"/> 
      </label> 
      <img src="images/content/3D/keep_it_low_poly_1.jpg"/> 

      <input type="radio" name="slide_switch" id="id8"/> 
      <label for="id8"> 
       <img src="images/content/3D/keep_it_low_poly_3.jpg"/> 
      </label> 
      <img src="images/content/3D/keep_it_low_poly_3.jpg"/> 

      <input type="radio" name="slide_switch" id="id9"/> 
      <label for="id9"> 
       <img src="images/content/3D/keep_it_low_poly_4.jpg"/> 
      </label> 
      <img src="images/content/3D/keep_it_low_poly_4.jpg"/> 

      <input type="radio" name="slide_switch" id="id10"/> 
      <label for="id10"> 
       <img src="images/content/3D/keep_it_low_poly_5.jpg"/> 
      </label> 
      <img src="images/content/3D/keep_it_low_poly_5.jpg"/> 
     </div> 

     </div> 

私はわずかに異なる背景色を持っているために、各プロジェクトを持っていると思ったので、各スライダは、独自の「プロジェクト」divの中に埋め込まれています。

それから私はofcourseのも、両方のスライダがリンクされているCSSのシートがあります。私が使っていた画像が変なアスペクト比（X 966 1920）を持っているので、それはだ、ファンキー割合を無視するようにしてください

.p-slider{ 
width: 83%; 
position: relative; 
padding-top: 41.8%; 
margin: 20px auto; 
margin-bottom: 150px; 
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
} 

.content .p-slider>img{ 
position: absolute; 
left: 0; top: 0; 
transition: all 0.5s; 
width:100%; 
} 

.p-slider input[name='slide_switch'] { 
display: none; 
} 

.p-slider label { 
margin: 18px 0 0 18px; 
border: 3px solid #999; 
float: left; 
cursor: pointer; 
transition: all 0.5s; 
opacity: 0.6; 
} 

.p-slider label img{ 
display: block; 
width: 200px; 
} 

.p-slider input[name='slide_switch']:checked+label { 
border-color: #666; 
opacity: 1; 
} 

.p-slider input[name='slide_switch'] ~ img { 
opacity: 0; 
transform: scale(1.1); 
} 

.p-slider input[name='slide_switch']:checked+label+img { 
opacity: 1; 
transform: scale(1); 
} 

@media screen and (max-width: 800px) { 

.p-slider label img{ 
/*display: block;*/ 
width: 100px; 
} 

} 

を、それについては以下を参照してください。

これが最初の問題です。私は2つのスライダーを持っており、いつでもサムネイルをクリックすると、そのうちの1つだけがメイン画像を表示します。私はそれを何十回もコピーして、各スライダーに対応するメインイメージを表示させたいと思っています。

私の2番目の問題は、このスライダーが見つかったときに本当に反応しなかったということです。ピクセルの代わりにパーセンテージを使って部分的に解決しましたが、これをサムネイルにどのように適用するかわかりません。

ウェブページはモバイルデバイスでも見ることができる必要があります。したがって、これは重要な機能です。

はい、私はおそらく、応答性の高いCSSスライダを作成するためのより良いスマートな方法があることを認識していますが、私が言ったように、私は全然ノブです。これは私のために働く。

Answer 1

あなたはすべての入力に対して同じ名前 "slide_switch" を使用することはできません。それらをグループ化するので、そのうちの1つのみをチェックすることができます。プロジェクトごとに異なる名前を使用する必要があります。

Answer 2

<div class="slider-wrapper"> 
<ul class="s-thumbs"> 
    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li> 
    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li> 
    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li> 
    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li> 
    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li> 
    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li> 
    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li> 
</ul> 
</div><ul class="s-slides"> 
    <li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li> 
    <li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li> 
    <li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li> 
    <li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li> 
    <li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li> 
    <li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li> 
    <li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li> 
</ul> 
</div> 

私はあなたがCSSコードを確認することができ、このリンクであなたのHTMLコード&を与えます。したがって、CSSを使用することで、スライドを作成することも、必要に応じて変更することもできます。

このリンクを確認してください： - http://designmodo.com/slider-css3/ & https://www.sanwebe.com/2012/08/pure-css3-tutorials-examples