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


Tags: javascript,jquery,html,css,carousel

Problem :

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>



Solution :

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>

    CSS Howto..

    How to make mouse hover not shift background downward? (Beginner CSS)

    How to add a border to only percentage of width of element, CSS Trick

    how to set css position absolute in hover state

    How do I add a shadow to an entire table using just CSS?

    Li tag is not aligning correctly in Chrome. How to fix it?

    how to make a lighting effect using css/html/js [closed]

    How to match columns in a scrolling table with fixed headers

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    How to add style or put a class in a php form_submit button

    How do I desaturate and saturate an image using CSS?

    CSS float: how to form the second row based on tallest DIV?

    How to hover mutiple “div” in the same time?

    Show only small portion of an image [closed]

    How can I get the images in my carousel to center?

    How can i reposition a sub ul in a responsive web site

    How to override css class set in iframe? [duplicate]

    how to make div shadow only in belly part of box - css

    How to make this double line shape with css?

    How to hide a div in the Repeater

    How to recursively remove CSS classes

    How can I flip multiple div at same time?

    How to make a div to represent a dotted line?

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    How to make half-square background in css

    How to make this CSS into a responsive one? [closed]

    How to load Angular.js form to jsFiddle?

    How to override CSS for TextBoxFor field?

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How to change elements display order in CSS?

    Centering Special Javascript Popup, How?