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
    • 192
    Comment on it

    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..

 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: