The HTML
For develping a Full-Screen Background image slider you need to create the necessary HTML markups for your slider and then add references to necessary script files.
<div class="fluid_container">
<div class="fluid_dg_wrap fluid_dg_emboss pattern_1 fluid_dg_white_skin" id="fluid_dg_wrap_4">
<div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg"></div>
<div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg"></div>
<div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg"></div>
<div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg"></div>
<div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg"></div>
<div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg"></div>
</div>
</div>
The CSS
We have to link it’s default css file.
<link rel='stylesheet' id='fluid_dg-css' href='css/fluid_dg.css' type='text/css' media='all'>
After attaching the default CSS, now we will customize it according to our requirement.
.fluid_container {
bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 0;
}
#fluid_dg_wrap_4 {
bottom: 0; height: 100%; left: 0;
margin-bottom: 0 !important;
position: fixed; right: 0; top: 0;
}
.fluid_dg_bar {
z-index: 2;
}
.fluid_dg_prevThumbs,
.fluid_dg_nextThumbs,
.fluid_dg_prev,
.fluid_dg_next,
.fluid_dg_commands,
.fluid_dg_thumbs_cont {
background: #222;
background: rgba(2, 2, 2, .7);
}
.fluid_dg_thumbs {
margin-top: -100px; position: relative; z-index: 1;
}
.fluid_dg_thumbs_cont {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.fluid_dg_overlayer {
opacity: .1;
}
The jQuery
First, We have to add some jQuery library.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='Scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='Scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='Scripts/fluid_dg.min.js'></script>
After adding all these library we have to initiate the Responsive_DG_Slider. In this slider’s API we have several customization options. Here we are customizing some options according to this full-screen slider.
jQuery(document).ready(function(){
jQuery(function(){
jQuery('#fluid_dg_wrap_4').fluid_dg({height: 'auto', loader: 'bar', pagination: false, thumbnails: true, hover: false, opacityOnGrid: false, imagePath: ''});
});
})
Done!
That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.