Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • JQuery Slider For Rails

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 611
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: