Skip to content

Instantly share code, notes, and snippets.

@r4hulp
Last active December 11, 2018 06:22
Show Gist options
  • Save r4hulp/5bfe78d0ddc997af2f034dfebeefe4cd to your computer and use it in GitHub Desktop.
Save r4hulp/5bfe78d0ddc997af2f034dfebeefe4cd to your computer and use it in GitHub Desktop.
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