Custom lof Slider for wordpress
Put this at header
=======================================================================
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<link rel=”stylesheet” type=”text/css” href=”https://amanurrahman.com/jqslider/css/layout.css” />
<link rel=”stylesheet” type=”text/css” href=”https://amanurrahman.com/jqslider/css/style2.css” />
<style>
ul.lof-main-wapper li {
position:relative;
}
</style>
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
<!–<script language=”javascript” type=”text/javascript” src=”httpss://amanurrahman.com/jqslider/js/jquery.js”></script>–>
<script language=”javascript” type=”text/javascript” src=”httpss://amanurrahman.com/jqslider/js/jquery.easing.js”></script>
<script language=”javascript” type=”text/javascript” src=”httpss://amanurrahman.com/jqslider/js/script.js”></script>
<script type=”text/javascript”>
$(document).ready( function(){
var buttons = { previous:$(‘#jslidernews2 .button-previous’) ,
next:$(‘#jslidernews2 .button-next’) };
$(‘#jslidernews2′).lofJSidernews( { interval:5000,
easing:’easeInOutQuad’,
duration:1200,
auto:true,
mainWidth:684,
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons } );
});
</script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
<script>
$(document).ready(function() {
$(“#tabs”).tabs();
});
</script>
=============================
Body Section
=============================
<div id=”slider”>
<div id=”jslidernews2″ style=”width:980px; height:300px;”>
<div><div></div></div>
<div >Previous</div>
<!– MAIN CONTENT –>
<div style=”width:684px; height:300px;”>
<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/thumbl_980x340.png” title=”Newsflash 2″ >
<div>
<h4><?php the_title();?></h4>
<p><?php the_excerpt();?>
<a href=”<?php the_permalink();?>”>Read more </a>
</p>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<!– END MAIN CONTENT –>
<!– NAVIGATOR –>
<div>
<div>
<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/lofthumbs/791902news3.jpg” />
<h3> <?php the_title();?></h3>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
</div>
<!—————– END OF NAVIGATOR ———————>
<div>Next</div>
</div>
</div>