BxSlider article
<ul id="bxslider"> | |
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?> | |
<!--Each post is wrapped in List item.. --> | |
<li> | |
<div class="thumbnail"> | |
<?php | |
if(has_post_thumbnail()) { ?> | |
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_post_thumbnail( 'thumbnail');?></a> <!-- Image links to Post --> | |
<?php } else { ?> | |
<div class="no-thumb"><h2>No thumbnail for this :D</h2><h3>wrapcode</h3></div> | |
<?php } | |
?> | |
</div> | |
<div class="content"> | |
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> | |
<h2> | |
<?php the_title(); ?> <!-- The Title --> | |
</h2> | |
</a> | |
<p> | |
<?php | |
the_excerpt(); | |
?> | |
</p> | |
</div> | |
</li> <!-- END OF LIST ITEM --> | |
<?php endwhile; endif;?> | |
<?php wp_reset_query();?> | |
</ul> |
function load_jquery() { | |
if (!is_admin()) { | |
wp_enqueue_script('jquery'); | |
} | |
} | |
add_action('init', 'load_jquery'); |
//Start of the loop | |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> | |
//THE CODE GOES HERE | |
<?php endwhile; else: ?> | |
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> | |
<?php endif; ?> //End of the Loop |
function bxslider{ | |
wp_register_script('bxslider', get_bloginfo('template_directory').'/js/jquery.bxSlider.min.js'); | |
wp_enqueue_script('bxslider'); | |
wp_register_script('easing', get_bloginfo('template_directory').'/js/ jquery.easing.1.3.js '); | |
wp_enqueue_script('easing'); | |
wp_register_style('bxslider-style', get_bloginfo('template_directory').'/css/bx_styles.css'); | |
wp_enqueue_style('bxslider-style'); | |
} | |
add_action('init', 'bxslider'); |
<script type=”text/javascript”> | |
jQuery(document).ready(function(){ | |
jQuery(‘#bxslider’).bxSlider({ | |
easing: ‘swing’, | |
auto:true, | |
pause:5000, | |
}); | |
}); | |
</script> |
<ul id="slider1"> | |
<li>Slide one content</li> | |
<li>Slide two content</li> | |
<li>Slide three content</li> | |
<li>And so on...</li> | |
</ul> |
<div id="slider1"> | |
<div>Slide one content</div> | |
<div>Slide two content</div> | |
<div>Slide three content</div> | |
<div>And so on...</div> | |
</div> |
#slider{ | |
width:624px; /*defines width*/ | |
/*any other styling such as background, border, shadow etc. */ | |
} | |
.thumbnail{ | |
float:left; | |
width:265px; | |
height:170px; | |
border-radius:5px; | |
overflow:hidden; | |
} | |
.content{ | |
float:right; | |
/*Other properties of your choice*/ | |
} | |
.content h2{ | |
font-size:20px; | |
line-height:28px; | |
/*Other properties of your choice*/ | |
} | |
.content p{ | |
font-size:12px; | |
line-height:20px; | |
/*Other properties of your choice*/ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment