hi,
i want add jquery slider in roots theme, please help me
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 -->
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.
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
^ 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.