CSS image slider Plugin?
-
So I am trying to code an image slider that uses no javascript. This is the code I have so far, though it’s just sitting in my front-page.php.
<div id="box"> <ul id="slider"> <?php $counter = 1; $thumbnails = get_posts('numberposts=5'); $permalink = get_permalink($permalink->ID); foreach ($thumbnails as $thumbnail) { if ( has_post_thumbnail($thumbnail->ID)) { ?> <li id="<?php echo $counter?>"> <?php echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">'; echo get_the_post_thumbnail($thumbnail->ID, 'large'); echo '</a>'; ?> <p><span><a href="<?php echo get_permalink( $thumbnail->ID ) ?>"><?php echo get_the_title($thumbnail) ?></a></span></p> </li> <?php $counter++; } } ?> </ul> <ul id="thumb"> <?php $thumb_counter = 1; $thumbs = get_posts('numberposts=5'); $thumb_permalink = get_permalink($thumb_permalink->ID); foreach ($thumbs as $thumb) { if ( has_post_thumbnail($thumb->ID)) { ?> <li><a href="<?php echo '#' . $thumb_counter?>"><?php echo get_the_post_thumbnail($thumb->ID, 'thumbnail');?></a></li> <?php $thumb_counter++; } } ?> </ul> </div>
CSS:
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } #box { text-align: left; width: 700px; margin: 30px auto 0 auto; background: #444; overflow: hidden; border: 10px solid #444; -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; border-radius: 5px; } ul#slider{ -webkit-border-radius: 10px; margin: 0px; padding: 0px; list-style: none; position: relative; width: 700px; height: 438px; overflow: hidden; } ul#slider a img{ width: 100%; height: 100%; text-align: center; } ul#thumb { overflow: none; margin: 0px 0px 0px 0px; padding: 0px; list-style: none; position: relative; 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; }
I would like to know if it would be smart to make this into a plugin or drop it in the functions file or something like that.
I would also appreciate some feedback on the code, because I am a beginner when it comes to PHP. If you need the entire front-page file, let me know and I’ll put it up.
- The topic ‘CSS image slider Plugin?’ is closed to new replies.