JQuery Slider For Rails

As we know these days in almost all applications there are image sliders which keep rotating and displaying images one by one like a slide show.

To integrate the same functionality there is a gem which we can use to create our own image slider.

The steps to do it are as follows : 

• Add this gem to your Gemfile

gem 'jquery-sliders-rails'

then run bundle install.

• Adding the js file

After installing the gem we need to add the js file of this gem to our application.js file in app/assets/javascripts folder

//= require jquery.sliders

• Adding the css file

After adding the js file we need to add the css file in app/assets/stylesheets/application.css

*= require jquery.sliders

• Adding the slider in the html.erb page

<!-- =========slider script starts=========-->
<script type="text/javascript">
  $(document).ready(function () {
    $("#slideshow").sliders({
        interval: 2000
      });
  });
</script>
<!-- ==========Slider script ends==========-->


<!-- =========Slider Styling starts========-->
<style>
.sliders {
  height: 600px;
  width: 80%;
  margin:auto;
  margin-top:30px;
}

.slide {
  height: inherit;
  width: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
}
</style>
<!-- ==========Slider Styling ends==========-->


<!-- ============Slider html starts==========-->
<div id="slideshow" class="sliders" style:"clear:both;">
  <div class="active-slide slide">
    <%= image_tag("train.jpg") %>
  </div>
  <div class="slide">
    <%= image_tag("bus.jpg") %>
  </div>
  <div class="slide">
    <%= image_tag("car.jpg") %>
  </div>
</div>
<!-- ============Slider html ends===========-->

And our slider is ready with 3 images sliding one by one at an interval of 2 seconds.