Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

After working on Responsive_DG_Slider,  which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement.

Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery.

Configuring Your Slider

As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination.

The HTML

<div class="fluid_container">
        <div class="fluid_dg_wrap fluid_dg_charcoal_skin" id="fluid_dg_wrap_1">
            <div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    <em>It's <strong>completely free</strong>, with tons of effects, Prev / next, pager, Start / Stop / Auto control controls and lot of customizable options.</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider slideshow provides many options <em>to customize your project</em> as more as possible
                </div>
            </div>
            <div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdemo.web3designs.com%2FResponsive_DG_Slider%2Fresponsive-slider-pagination-circle.htm" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Different color skins and layouts available, <em><a href="http://demo.web3designs.com/Responsive_DG_Slider/fullscreen-responsive-image-slider.htm">fullscreen</a> ready too</em>
                </div>
            </div>
        </div>
    </div>

The CSS

First 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'>

Now some customization:

.fluid_container {
			margin: 0 auto;
			width: 100%;
		}

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.

jQuery(document).ready(function(){
		jQuery(function(){			
			jQuery('#fluid_dg_wrap_1').fluid_dg({thumbnails: true,height:"25%"});
		}); })

You have done!!

Now enjoy your liquid slider. Please feel free to comment and share your thoughts/ideas about the result.

Updated

APIs and other options of this wonderful plugin, please click here.

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider i.e. Responsive_DG_Slider. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it’s features and API later.

Here I am showing It’s full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen. Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, Responsive_DG_Slider is for you. Previously, I have already developed a very simple and useful slider i. e. jQuery – DG_Slider.

Configuring Your Slider

Configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for full-screen.

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.

Updated

APIs and other options of this wonderful plugin, please click here.

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar