How to create wordpress vertical slider using cycle.js?

We have seen various wordpress sliders in themes which has navigation in horizontal direction but we will try to create a post slider which will navigate vertically. We will create the wordpress vertical slider with the help of cycle.js jquery plugin.First download the cycle.js plugin for wordpress vertical slider and place the plugin file in js folder.

Please enter a valid URL and content for your button.

Our tutorial will require change in 3 files index.php , style.css , functions.php.

Style.css

/* Wrapper Style*/
#wrap1
{
padding-top:22px;
padding-bottom:15px;
position:relative;
display:block;
margin-bottom:60px;
width:960px;
height:300px;
}
/*slider style*/
#slider
{
width:960px;
height:300px;
position:absolute;
display:block;
overflow:hidden;
}</code>

.info
{
padding:20px;
width:400px;
height:280px;
display:block;
position:relative;
background:#000;
opacity:0.6;
z-index:999;
font-family:Tahoma;
font-size:14px;
color:#ccc;
bottom:292px;
left:52%;
}
.info .game-title
{
position:relative;
text-decoration:none;
display:block;
margin-top:30px;
font-family:Georgia;
font-size:24px;
color:#fff;
}
#controller
{
position:absolute;
top:30px;
bottom:10px;
left:94%;
padding:10;
color:#ccc;
width:5%;
background:#000;
opacity:.6;
float:left;
z-index:999;
height:280px;
}
#next
{
background: url(img/slider-bottom-pagination.png) center;
width:19px;
height:16px;
display:block;
position:absolute;
z-index:999;
bottom:0;
left:12px;
}
#prev
{
transform:rotate(180deg);
left:12px;
width:19px;
height:16px;
background: url(img/slider-bottom-pagination.png) center;
display:block;
position:absolute;
z-index:999;
}

#next:hover
{
background: url(img/slider-bottom-pagination-hov.png) center;
width:19px;
height:16px;
display:block;
position:absolute;
z-index:999;
bottom:0;
left:12px;
}
#prev:hover
{
transform:rotate(180deg);
left:12px;
width:19px;
height:16px;
background: url(img/slider-bottom-pagination-hov.png) center;
display:block;
position:absolute;
z-index:999;
}
#pager
{
margin-top:100px;
width:100%;
text-align:center;
display:block;
position:absolute;
cursor:pointer;
z-index:999;
}
#pager a
{
font-size:.0em;
color:transparent;
transform:rotate(90deg);
width:10px;
height:10px;
display:inline-block;
position:relative;
border: 1px solid #FFF;
border-radius:20px;
background:#FFF;
margin:10px;
}
#pager a:hover
{
font-size:.0em;
color:transparent;
transform:rotate(90deg);
width:10px;
height:10px;
display:inline-block;
position:relative;
border: 1px solid #993408;
border-radius:20px;
background:#993408;
margin:10px;
}

Index.php
In script tag in this file add below code which actually loads the jquery plugin:

<script src=\"<?php bloginfo( \'template_directory\' );?>/js/jquery-2.1.1.min.js\"></script>
<script type=\"text/javascript\" src=\"<?php bloginfo( \'template_directory\' );?>/js/jquery.cycle.all.js\" /></script>

<script type=\"text/javascript\">
$(\'#slider\').cycle({ 
    fx:      \'scrollVert\', 
    pager:   \'#pager\',
    prev:    \'#prev\', 
    next:    \'#next\',
    timeout:  0 
});
</script>

Add below code where you want to put your slider on the page.

<div id=\"wrap1\" >
            <div id=\"controller\">
                <div id=\"pager\"> </div>
                <div id=\"prev\"> </div>
                <div id=\"next\"> </div>
            </div>
            <div id=\"slider\">
                   <?php
                       query_posts(array( \'category_name\' => \'featured\' , \'posts_per_page\'=>5 ));
                       if ( have_posts() ): while( have_posts() ): the_post();
                   ?>
                    <div id=\"items\">
                            <?php global $post_id; if ( get_the_post_thumbnail($post_id) != \'\' ) { the_post_thumbnail(\'featured\'); }
                            else {

 echo \'<a href=\"\'; the_permalink(); echo \'\" class=\"thumbnail-wrapper\">\';
 echo \'<img src=\"\';
 echo catch_that_image();
 echo \'\" alt=\"\" />\';
 echo \'</a>\';

}?>
                        <div class=\"info\">
                            <p class=\"game-title\"><?php the_title();?></p>
<?php if ( $post->post_excerpt ) { 
                 the_excerpt();  
} else {
                 the_content(); 
}
?>
                        </div><!--End caption-->
                        </div>
                        <?php
                            endwhile;
                            endif;
                            wp_reset_query();
                        ?>
            
            </div><!--End slider-->
        </div><!--End Wrap-->

Function Content
Functions.php
This file will contain the function catch_that_image().This function will show the first image in the post as featured image else it will show post featured image.

function catch_that_image() {
  global $post, $posts;
  $first_img = \'\';
  ob_start();
  ob_end_clean();
  $output = preg_match_all(\'/<img.+src=[\'\"]([^\'\"]+)[\'\"].*>/i\', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = \"/path/to/default.png\";
  }
  return $first_img;
}

 

%d bloggers like this: