How to adding a Responsive jQuery Slider to Roots

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