WP: Simple Banner Slider
<!-- BANNER SLIDER -->
<div id="branding-area">
<div class="banners">
<?php
$loop = new WP_Query(array(
'post_type' => 'brandingslides',
'post_status' => 'publish',
'numberposts' => 4,
'posts_per_page' => -1,
'orderby'=> 'ASC'
));
$bannerCount = 0;
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="slide">
<?php the_post_thumbnail('full'); ?>
<div><?php the_content(); ?></div>
</div>
<?php $bannerCount++ ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<ul class="banner-list">
<?php
for($i=0; $i < $bannerCount; $i++) { echo '<li><a href="javascript:void(0);">'.$bannerCount.'</a></li>'; }
?>
</ul>
<div class="banner-controls">
<a class="prev">prev</a>
<a class="next">next</a>
</div>
</div><!-- end banners -->
</div><!-- end branding area -->
<!-- JQUERY TOOLS TABS SLIDER -->
<script type="text/javascript">
$(document).ready(function() {
$("ul.banner-list").tabs(".banners > .slide", {
effect: 'horizontal',
fadeOutSpeed: "fast",
rotate: true
}).slideshow({
clickable: false,
next: '.next',
prev: '.prev',
interval: 6000,
autoplay: true,
autopause: true
});
});
</script>
<!-- CSS/SCSS -->
<style type="text/css">
#branding-area {
.banners {
position: relative;
height: 406px;
width: 928px;
float:left;
cursor:pointer;
background: #FFF;
padding: 5px;
border: 1px solid #EEE;
.slide {
display:none;
position: absolute;
height: 406px;
overflow: hidden;
div {
position: absolute;
top: 25px;
left: 40px;
width: 360px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=80);
opacity: 0.8;
padding: 0 10px;
background: #FFF;
}
}
img {
width: 928px;
height: 100%;
}
.next, .prev {
float: left;
position: absolute;
top: 40%;
z-index: 9999;
display:block;
width:45px;
height:46px;
cursor:pointer;
font-size:1px;
text-indent:-9999em;
}
.next {
right: -10px;
background: url(images/arrow_right.png) no-repeat;
}
.prev {
left: -10px;
background: url(images/arrow_left.png) no-repeat;
}
ul.banner-list {
clear: both;
list-style: none;
a {
width: 8px;
height: 8px;
float: left;
margin: 3px;
background: url(../images/navigator.png) 0 0 no-repeat;
display: block;
font-size: 1px;
&:hover {
background-position: 0 -8px;
}
.current {
background-position: 0 -16px;
}
}
}
}
}
</style>