# How to adding a Responsive jQuery Slider to Roots

**URL:** https://discourse.roots.io/t/how-to-adding-a-responsive-jquery-slider-to-roots/1295
**Category:** uncategorized
**Created:** 2014-02-27T06:44:17Z
**Posts:** 5

## Post 1 by @ttthien — 2014-02-27T06:44:17Z

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

---

## Post 2 by @marbaque — 2014-02-27T16:00:39Z

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 -->
```

---

## Post 3 by @JulienMelissas — 2014-02-27T23:58:12Z

I use [bxslider](http://bxslider.com) 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.

---

## Post 4 by @cfx — 2014-02-28T00:39:56Z

Best slider/carousel tutorial out there by far: [http://shouldiuseacarousel.com/](http://shouldiuseacarousel.com/)

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

---

## Post 5 by @JulienMelissas — 2014-02-28T21:08:15Z

^ 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/](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.