1z10 1z10 - 5 months ago 22
jQuery Question

(CSS-Javascript-Jquery) How to make thumbnails slider for a carousel?

I'm trying to make a carousel with thumbnails navigation. Something like this Carousel
Due to I don't know how much thumbnails there will be, it should be something like a slider, with previous and next buttons.
I tried with an unordered list but only the first li is shown. What is wrong with this code?

Here is my code:



.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

The problem is with the following CSS rule:

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

This will affect both the main image and each thumbnail, resulting in all thumbnails being stacked on top of each other, because of position:absolute.

Simply changing the selector from .carousel img to .carousel img.main will fix the issue.

Besides this, your HTML tags aren't properly closed. Below is the corrected 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>