Here's what I need to do: I have a one-page layout with three image galleries (but I need to make the code for only one, I just copy it for the other two) that are configured as in the image. The 940px area (white) is the centered width and the content area, the slider controls are outside it (the entire layout is 1200 pixels in size if you include gray space), and I simultaneously display 3 images.
Code for this now (#horizontalDiv is # image container):
<div id="horizontalDiv"> <h2>My h2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, perspiciatis, officiis, commodi, quis aut eligendi quaerat recusandae placeat nostrum optio maiores voluptates quas repudiandae atque voluptatibus laboriosam itaque mollitia dignissimos!</p> <div id="imgSlider"> <img src="img/uvaDx.png" alt=""> <img src="img/sliderCantina1.png" alt=""> <img src="img/sliderCantina2.png" alt=""> <img src="img/sliderCantina3.png" alt=""> <img src="img/sliderCantina1.png" alt=""> <img src="img/sliderCantina2.png" alt=""> <img src="img/sliderCantina3.png" alt=""> <img src="img/uvaSx.png" alt=""> </div> </div>
And my layout is as follows:
I have already focused the images, and at the moment I have hidden two control arrows, but the rest are set.
Mostly my problem is
What's the best way to set up a div container for images to show all the images that I have (let's say 50), to be prepared to insert a jquery plugin (still need to decide which, any suggestion ??) that slides across all the images in this div?
I can not do the following:
1) take pictures side by side (tried float: left, but it doesn't work, do I need anything else?)
2) make those from the div “disappear” so that they are not visible (I'm sure I need to use overflow: hidden, but since I cannot display images side by side, I have not tried so far.
I need the simplest solution possible , because I have three images displayed in a div at the same time in my layout, while the others are hidden somewhere horizontally (one for this section and two identical sections with different images below this) also because I need to set up a jquery slider that I'm not very familiar with, so the more complex the markup, the more problems I will have to integrate the slider.
I know that this should be pretty simple, but with all the NivoSlider-like materials that seem to like large images with one image instead of moving ones, I could not find anything that would suit my needs.