JQuery Slider as Substitute for Bootstrap Carousel for Rails

Hello readers,

We all may have integrated Bootstrap Carousel with templates in order to make images sliding one after the another, giving our template a lively look.

JQuery slider is quite a popular substitute for Bootstrap Carousel and at the same time, it is very easy to incorporate into our application. Let's proceed with that :

Firstly,add this gem to the gemfile

gem 'jquery-sliders-rails'

Now,add the js file and css file to app/assets/javascripts/application.js and app/assets/stylesheets/application.css respectively.

//= require jquery.sliders

*= require jquery.sliders

Now, the last thing is slider's incorporation with the desired template

    <!-- =========slider script starts=========-->
    <script type="text/javascript">
      $(document).ready(function () {
        $("#slide_show").sliders({
            interval: 3000
          });
      });
    </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="slide_show" class="sliders" style:"clear:both;">
      <div class="active-slide slide">
        <%= image_tag("image_1.jpg") %>
      </div>
      <div class="slide">
        <%= image_tag("image_2.jpg") %>
      </div>
      <div class="slide">
        <%= image_tag("image_3.jpg") %>
      </div>
       <div class="slide">
        <%= image_tag("image_4.jpg") %>
      </div>
    </div>
    <!-- ============Slider html ends===========-->

This implementation provides four images showing up one after another with given properties and styling.

Thanks for reading..