How to adding a Responsive jQuery Slider to Roots

hi,
i want add jquery slider in roots theme, please help me :slight_smile:

I am using the bootstrap default carousel and it works fine.

You can this code on your template, it shows 4 images with the header and the excerpt.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">
			<?php 
		   $the_query = new WP_Query(array(
		    'category_name' => 'category_name', 
		    'posts_per_page' => 1,
		    'order' => 'DESC'  
		    )); 
		   while ( $the_query->have_posts() ) : 
		   $the_query->the_post();
		  ?>
		   <div class="item active">
		    <?php the_post_thumbnail('large');?>
		    <div class="carousel-caption">
		     <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		     <p><?php the_excerpt();?></p>
		    </div>
		   </div><!-- item active -->
		  <?php 
		   endwhile; 
		   wp_reset_postdata();
		  ?>
		  <?php 
		   $the_query = new WP_Query(array(
		    'category_name' => 'category_name', 
		    'posts_per_page' => 3, 
		    'offset' => 1 
		    )); 
		   while ( $the_query->have_posts() ) : 
		   $the_query->the_post();
		  ?>
		   <div class="item">
		    <?php the_post_thumbnail('large');?>
		    <div class="carousel-caption">
		     <h4><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h4>
		     <p><?php the_excerpt();?></p>
		    </div>
		   </div><!-- item -->
		  <?php 
		   endwhile; 
		   wp_reset_postdata();
		  ?>
		 </div><!-- carousel-inner -->
		 
		 <!-- Controls -->
		 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
		 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	</div><!-- #myCarousel -->
1 Like

I use bxslider for some projects and it’s very easy to implement.

  • Add bx slider to the plugins of roots, you may have to tell grunt not to run a js hint on the minified version.
  • Change the bx slider css to a less file and import at top of app.less
  • Drop images into the img folder and change the image path in the bxslider.less file to reflect the new image path (I like to put mine into a bxslider folder inside the img folder)
  • Pull your content in from somewhere (I like to use the advanced custom fields’s repeater function for slides)
  • Add your html markup for the slider
  • Call your slider in main.js

Hope that helps, let me know if you need more explanation.

1 Like

Best slider/carousel tutorial out there by far: http://shouldiuseacarousel.com/

What I love about this tutorial is that it works on every theme and even other CMSs :wink:

3 Likes

^ good share. However, I don’t always agree AND when my clients pay me to do something I make sure it gets done. Sometimes it’s not up to us if we choose a slider or not.

Here’s another article on it though: https://yoast.com/opinion-on-sliders/

To be fair - he didn’t ask if he should use a slider, he asked how he should implement one.

2 Likes