CSS slidshow – move thumbs from bottom to side?

[we5inelgr]

Hi all,

How can I modify this code, so that the thumbs are on the right side of the large pictures, instead of the bottom (like they are now). Put them in two different TDs (but would that mess up the DIVs)? Or, is there some other way?

The CSS:

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

img {border: none;}

a {outline: none;}

body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background: url(images/post-BG.png) repeat;
    text-align: center;
    color: #fff;
}

h1 {
    margin: 30px 0 0 0;
    text-shadow: #d6d6d6 0px 1px 2px;
    color: #030303
}

h3 {
    margin: 10px 0 10px 0;
    text-shadow: #d6d6d6 0px 1px 2px;
    color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;

    }

    50% { 
        opacity: 0;
    }

    100% { 
        opacity: 1;
    }
}

#box {
    text-align: left;
    width: 700px;
    margin: 30px auto 0 auto;
    background: #000;
    overflow: hidden;
    border: 10px solid #000;
    -webkit-box-shadow: #131313 0px 2px 10px;
    -moz-box-shadow: #131313 0px 3px 10px;
    box-shadow: #131313 0px 3px 10px;   
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

ul#slider{
    -webkit-border-radius: 10px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: relative;
    width: 700px;
    height: 438px;
    overflow: hidden;   
}

ul#thumb {
    overflow: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    position: relative;
    background: #000;
    overflow: auto;
    width: 700px;
}

ul#thumb a {
    -webkit-transition: opacity .2s ease-in-out;
    border: 1px solid #979797;
    width: 35px;
    height: 35px;
    display: block;
    overflow: hidden;
    float: right;
    margin: 10px 0px 0px 10px;
    opacity: 0.75;
}

ul#thumb a:hover {
    opacity: 1;
} 

ul#slider li {  
    width: 700px;
    height: 438px;
    position: absolute;
    }

ul#slider li p {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: inherit;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    width: 100%;
}

ul#slider li p span {
    line-height: 1.2em;
    padding: 10px;
    display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
    0% {
        left:-700px;

    }

    100% { 
        left:0px;
    }
}


ul#slider li:target {
    -webkit-animation-name: moveTarget; 
    -webkit-animation-duration: .5s; 
    -webkit-animation-iteration-count: 1;
    top:0px;
    left: 0px;
    z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
    0% {
        left:0px;

    }
    50% {
        left:700px;

    }
    100% { 
        left:-700px;
        z-index: 5;
    }
}

ul#slider li:not(:target) {
    -webkit-animation-name: moveIt; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 1;
    top:0px;
    left: 0px;
}

</style>

The HTML:

<div id="box">

<ul id="slider">
    <li id="1" >
        <img src="pic1.png" alt="pic1" width="700" height="438" />
        <p><span>Description 1.</span></p>
    </li>
    <li id="2">
        <img src="pic2.png" alt="pic2" width="700" height="438" />
        <p><span>Description 2.</span></p>
    </li>
    <li id="3">
        <img src="pic3.png" alt="pic3" width="700" height="438" />
        <p><span>Description 3.</span></p>
    </li>
</ul>

<ul id="thumb">
    <li><a href="#1"><img src="thmb1.png" alt="thmb1" width="50" height="50" /></a></li>
    <li><a href="#2"><img src="thmb2.png" alt="thmb2" width="50" height="50" /></a></li>
    <li><a href="#3"><img src="thmb3.png" alt="thmb3" width="50" height="50" /></a></li>
</ul>

</div>

Thanks.

[chrisburton]

Please put this in a pen

[Paulie_D]

Please put this in a pen

And use image placeholders

Lorempixel.com or Placehold.it can help there.

[we5inelgr]

Thanks for the replies, but sorry…I don’t understand. What’s that pen and how to use it beside pasting code in?

[chrisburton]

That helps us see what is wrong with your problem and also allows us to make changes to it.

You paste your HTML code in the HTML box (left), CSS in the CSS box (middle) and if you have Javascript, that goes in the right box. Then click save and post the link.

[we5inelgr]

oh ok. got it. thanks.

here it is:

http://codepen.io/we5inelgr/pen/gtxvG

[we5inelgr]

Interesting. Thanks much, especially for the explaination!

One other thing, why would image #3 load as the main image instead of image #1? Yet, Image #1 is first in line for the thumbs?

[dyr]

https://css-tricks.com/on-target/

As Chris describes in this article….

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

When your PEN loads the hash is empty and therefore there exist 0 :target matches. You can test this by opening the console, selecting the correct frame, and examining the hash property of the location object: location.hash outputs "" when viewing your PEN before clicking on any of the thumbs.

I haven’t used :target to make an image slider like this without JavaScript. In a real world setting you might always visit the page with a hash in the URL. Or you could use JavaScript to add a hash to the URL if none exists when the page loads.

// Extremely basic example, adding this to
// wahhabb's codepen does make it so #1 is active.
// You probably won't want to hard code '#1'
var hash = window.location.hash
if (!hash) { window.location.hash = "#1" }

[Author]

Posts