jQuery slideshow with separate div containing image specific text

Tags: javascript,jquery,html,css,slider

Problem :

I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.

I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.

Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.

The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)

I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.

Thank you in advance, Carl

Solution :

So, as suggested in the comments


It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.


    <div class="slide">
        <img src="http://placekitten.com/g/500/230" alt="" />
        <div class="text">Text</div>


<div id="thumbnails">Thumbnails</div>


#slides {
    height: 550px; /* or what ever amount is big enough to fit the text there too */
    float: left;
    position: relative;
    z-index: 5;

#thumbnails {
    float: left;
    clear: both;
    position: relative;
    z-index: 10;
    top: -110px; 

.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }

    CSS Howto..

    how to Put a img and text middle of a div

    How to use custom CSS to change the distance between the header and top of the page/where the page starts? [closed]

    Find how an element's css has changed after jQuery “toggle” function has been used

    How to select any item preceded by some word in CSS

    How to restrict the css star selector * to a class and all decendants?

    meteorjs how to import a wrapbootstrap theme

    How do you target div last-child within another div?

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    How to deal with collapsing margins on html & body?

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How to deselect a table's head and certain tds with css

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How do I make a div with guide lines?

    How to auto resize the parent node according to its children

    How to set fixed auto width in tab-content bootstrap?

    How to center equally spaced anchor tags in

    How to have proper spacing between items in the navbar regardless of word size?

    How to set css class 'active' by using C#?

    how to float the section tags in html5

    How to override w3.css for table border

    How to stretch background image of a table cell with CSS?

    How to change a CSS property dynamically in Angular

    How to set ID or css selector for new row added in table using javascript

    How to use CSS to position div popup when using :hover…?

    how to change the css of default select2 placeholder color?

    What is SVG and how does it work?

    How to make a GWT-like CaptionPanel manually

    How can I solve this styling issues?

    How to add css to dynamic div Id

    How to create a vertical column in a table using css