（CSS-Javascript-Jquery）カルーセルのサムネイルスライダーを作成するにはどうすればいいですか？

Question

サムネイルナビゲーションでカルーセルを作ろうとしています。何かのようにthis Carousel サムネイルがどれだけあるか分からないため、前後のボタンを使ってスライダのようなものにする必要があります。 私は順序付けられていないリストを試しましたが、最初のliだけが表示されています。このコードで何が問題になっていますか？ここで

は私のコードです：

.carousel { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 600px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.carousel img.main 
 
.previous { 
 
    position: absolute; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 30px; 
 
    opacity: 0; 
 
    background-color: lightblue; 
 
} 
 
.previous:hover { 
 
    opacity: 0.5; 
 
} 
 
.next { 
 
    position: absolute; 
 
    right: 0px; 
 
    height: 100%; 
 
    width: 30px; 
 
    opacity: 0; 
 
    background-color: lightblue; 
 
} 
 
.next:hover { 
 
    opacity: 0.5; 
 
} 
 
.thumbnavigator { 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 60px; 
 
    width: 100%; 
 
    opacity: 0; 
 
    background-color: purple; 
 
} 
 
.thumbnavigator:hover { 
 
    opacity: 0.5; 
 
} 
 
.thumbnavigator img { 
 
    height: 60px; 
 
    width: auto; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
    display: inline; 
 
}

<div class="carousel"> 
 
    <img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" /> 
 

 
    <div class="previous"> 
 
    </div> 
 

 
    <div class="next"> 
 
    </div> 
 

 
    <div class="thumbnavigator"> 
 
    <!-- Thumbnails list slider --> 
 
     <ul> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
</ul> 
 
    </div> 
 
</div>

Answer 1

問題は、以下のCSSルールである：

.carousel img { 
    position: absolute; 
    width: 100%; 
    height: auto; 
} 

これは結果として、メイン画像と各サムネイルの両方に影響を与えますposition:absoluteのために、すべてのサムネイルがお互いの上に積み重ねられています。

セレクタを.carousel imgから.carousel img.mainに変更するだけで問題を解決できます。

これ以外にも、HTMLタグが正しく閉じられていません。以下は訂正されたHTMLです。

<div class="carousel"> 
    <img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" /> 

    <div class="previous"></div> 
    <div class="next"></div> 

    <div class="thumbnavigator"> 
     <ul> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
     </ul> 
    </div> 
</div>