over 8 years ago
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
Now,add the js file and css file to app/assets/javascripts/application.js and app/assets/stylesheets/application.css respectively.
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===========-->
<!-- =========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)