WordPress.org

Ready to get started?Download WordPress

Forums

CSS image slider Plugin? (1 post)

  1. Droic
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic