0

So what i am trying to do here is to create a slide show which will show both image and text box with one click and i cannot seem to get it right so anyone here can help me?

CSS: 
#divs
    color:black;
    width: 350px;
    height: 350px;
    overflow: hidden;
    position: relative;
    margin: 0px auto; }

#divs div{
    width: 330px;
    height: 330px;
    position: absolute;
    top:0; }

#divs div{
    z-index: 1;
    opacity: 0;
    transition:all linear 1s;
    -moz-transition:all linear 1s;
    -webkit-transition:all linear 1s;
}

#divs div:target {
    opacity:1;}


#images {
    width: 350px;
    height: 350px;
    overflow: hidden;
    position: relative;
    margin: 0px auto; }
#images img {
    width: 330px;
    height: 330px;
    position: absolute;
    top:0; }
#slider a{
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E5F2;
    padding: 6px 12px;
    color: #222;
}
#slider a:hover{
    background: #C6E4F2;
}
#images img{
    z-index: 1;
    opacity: 0;
    transition:all linear 1s;
    -moz-transition:all linear 1s;
    -webkit-transition:all linear 1s;
}

#images img.tab{
    z-index: 1;
    opacity: 1;
    transition:all linear 1s;
    -moz-transition:all linear 1s;
    -webkit-transition:all linear 1s;
}

#images img:target {
    opacity:1;}

HTML:

<div id="images">
        <img id="image1" src="pics/Pic1.jpg" class="tab">
        <img id="image2" src="pics/Pic2.jpg" >
        <img id="image3" src="pics/Pic3.jpg" >
        <img id="image4" src="pics/Pic4.jpg" >
        <img id="image5" src="pics/Pic5.jpg" >
        <img id="image6" src="pics/Pic6.jpg" >
    </div>    

    <div id="divs">
        <div id="div1"> The sequel to the puzzle hit of 2002 is back and masterfully delivers the next dimension of its classic 3D matching game. 3 new game cubes, featuring the Bomb, Dual and Ghost Cube, bring exciting twists to every aspect of this addictive puzzle game<br>
    There's never a dull moment as Ghost Cubes randomly teleport in the new Morph-Fun modes. Use the Bomb Cube to blast cubes and rearrange level layouts.<br>
    </div>
        <div id="div2">After your ship washes up on the shore of a seemingly deserted island, it quickly becomes clear that the island is not only inhabited, but that it is also home to a powerful volcano. Your presence has awoken and angered the volcano and put the entire island in jeopardy <br>
    Fortunately, the islanders are masters at the great game of SKIP-BO™ and are willing to teach you their favorite game. Only you can play SKIP-BO™ with the friendly inhabitants of the island, calm the active volcano, and restore the quiet peace of this tropical paradise.
        </div></div>  
    <div id="slider">
        <p>
            <a href="#image1">1</a> 
            <a href="#image2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
            <a href="#image5">5</a>
            <a href="#image6">6</a>
        </p>
    </div>
    <div id="slider">
        <p>
            <a href="#div1">1</a> 
            <a href="#div2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
            <a href="#image5">5</a>
            <a href="#image6">6</a>
        </p>
    </div>
2
Contributors
1
Reply
12
Views
3 Years
Discussion Span
Last Post by minitauros
0

Of course you are encouraged to create such a slideshow yourself, because it's a nice opportunity and a very good way to practice your programming. However, there are thousands of slideshow plugins out there, and if there is no real need or desire to create one yourself, why don't you pick one of those and use that? :)

The basics of a slider:

One viewport div with overflow: none.
One container div.
A lot of slide divs that may contain other divs with images, text, etc.

The slides go into the container div. They should be lined up horizontally, creating one large slide. When the user presses a button, you slide this gigantic slide (the container div) to the left or right, so that a different part of it comes into view in the viewport div.

Hope that's of any help!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.