jQuery Sliders 4

jQuery Sliders IV

Add sliders to your webpages

ZoomFly Slider

Super Sale!

We're having a massive sale this week! Save 20% on most products!

Fast Shipping

Buy today and get it shipped immediately! Free delivery on orders over $50!

Worldwide Delivery

We accept orders worldwide. Credit Card, Bank Deposit, Paypal Accepted.

24/7 Support

Email & phone support whenever you need it. We're here 7 days a week!

Massive Selection

Select from over 1500 items in stock now! Start shopping now...

View code:


<!-- Must place this section in <HEAD> section:start -->
<!-- DC ZoomFly Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/zoomfly/style.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- DC ZoomFly Slider JS -->
<script type="text/javascript" src="dcodes/sliders/js/zoomfly/jmpress.min.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/zoomfly/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/zoomfly/modernizr.js"></script>
		
<noscript>
	<style>
	.step {
		width: 100%;
		position: relative;
	}
	.step:not(.active) {
		opacity: 1;
		filter: alpha(opacity=99);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
	}
	.step:not(.active) a.jms-link{
		opacity: 1;
		margin-top: 40px;
	}
	</style>
</noscript>
<!-- Must place this section in <HEAD> section:end -->

<!-- DC ZoomFly Slider Start -->		
		 <div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
			<section id="jms-slideshow" class="jms-slideshow">
				
				<!-- Slide 1 -->
				<div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
					<div class="jms-content">
						<div class="zoomfly_caption">Super Sale!</div>
						<div class="zoomfly_p">We're having a massive sale this week! Save <strong>20%</strong> on most products!</div>
						<a class="jms-link" href="#">Read more</a>
					</div>
					<img src="dcodes/sliders/images/zoomfly/1.png" />
				</div>
				
				<!-- Slide 2 -->
				<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
					<div class="jms-content">
						<div class="zoomfly_caption">Fast Shipping</div>
						<div class="zoomfly_p">Buy today and get it shipped immediately! Free delivery on orders over $50!</div>
						<a class="jms-link" href="#">Read more</a>
					</div>
					<img src="dcodes/sliders/images/zoomfly/2.png" />
				</div>
				
				<!-- Slide 3 -->
				<div class="step" data-color="color-3" data-x="2000" data-z="3000" data-rotate="170">
					<div class="jms-content">
						<div class="zoomfly_caption">Worldwide Delivery</div>
						<div class="zoomfly_p">We accept orders worldwide. Credit Card, Bank Deposit, Paypal Accepted.</div>
						<a class="jms-link" href="#">Read more</a>
					</div>
					<img src="dcodes/sliders/images/zoomfly/3.png" />
				</div>
				
				<!-- Slide 4 -->
				<div class="step" data-color="color-4" data-x="3000" data-scale="0.4" data-rotate-x="30">
					<div class="jms-content">
						<div class="zoomfly_caption">24/7 Support</div>
						<div class="zoomfly_p">Email & phone support whenever you need it. We're here 7 days a week!</div>
						<a class="jms-link" href="#">Read more</a>
					</div>
					<img src="dcodes/sliders/images/zoomfly/4.png" />
				</div>
				
				<!-- Slide 5 -->
				<div class="step" data-color="color-5" data-x="4500" data-z="1000" data-rotate-y="45">
					<div class="jms-content">
						<div class="zoomfly_caption">Massive Selection</div>
						<div class="zoomfly_p">Select from over 1500 items in stock now! Start shopping now...</div>
						<a class="jms-link" href="#">Read more</a>
					</div>
					<img src="dcodes/sliders/images/zoomfly/5.png" />
				</div>
			</section>
</div>

<!-- DC ZoomFly Slider Settings -->
<script type="text/javascript">
	$(function() {
		
		var jmpressOpts	= {
			animation		: { transitionDuration : '0.8s' }
		};
		
		$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
			autoplay	: true, // auto play slider
			bgColorSpeed: '0.8s',
			arrows		: true // show arrows
		}));
		
	});
</script>

<!-- DC ZoomFly Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Focused Slider

View code:


<!-- DC Focused Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/focused/focused-slider.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- DC Focused Slider JS -->
<script src="dcodes/sliders/js/focused/focused-slider.js"></script>

<!-- DC Focused Slider Start -->
<div id="focus-slider" style="width:980px; margin:0 auto; position:relative;"> <!-- define slider container width (strict enforce) -->
	<div>
		<ul>
			<!-- Slide 1 -->
			<li>
				<div style="left:0; top:0; width:760px; height:380px;"><a href="#"><img src="dcodes/sliders/images/focused/a01.jpg" title="Executive Dress $390" /></a></div>
				<div style="right:0; top:0; width:220px; height:140px;"><a href="#"><img src="dcodes/sliders/images/focused/a02.jpg" title="Flow Dress $170" /></a></div>
				<div style="right:0; top:140px; width:220px; height:140px;"><a href="#"><img src="dcodes/sliders/images/focused/a03.jpg" title="Business Shirt $89" /></a></div>
				<div style="right:0; bottom:0; width:220px; height:100px;"><a href="#"><img src="dcodes/sliders/images/focused/a04.jpg" title="Combs $15" /></a></div>
			</li>
			
			<!-- Slide 2 -->
			<li>
				<div style="left:0; top:0; width:980px; height:380px;"><a href="#"><img src="dcodes/sliders/images/focused/b01.jpg" title="30% Off Super Sale!" /></a></div>
			</li>
			
			<!-- Slide 3 -->
			<li>
				<div style="left:0; top:0; width:260px; height:210px;"><a href="#"><img src="dcodes/sliders/images/focused/c01.jpg" title="Home Wear $75" /></a></div>
				<div style="left:260px; top:0; width:260px; height:210px;"><a href="#"><img src="dcodes/sliders/images/focused/c02.jpg" title="Elegant Dress $195" /></a></div>
				<div style="left:0; top:210px; width:520px; height:170px;"><a href="#"><img src="dcodes/sliders/images/focused/c03.jpg" title="10% Off All Dresses!" /></a></div>
				<div style="right:0; top:0; width:460px; height:380px;"><a href="#"><img src="dcodes/sliders/images/focused/c04.jpg" title="Leopard Top $199" /></a></div>
			</li>
			
			<!-- Slide 4 -->
			<li>
				<div style="left:0; top:0; width:980px; height:380px;"><a href="#"><img src="dcodes/sliders/images/focused/d01.jpg" title="Massive Sale Ends This Saturday!" /></a></div>
			</li>
		</ul>
	</div>
</div>
<!-- DC Focused Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Camera Slider (Responsive)

Camera is a responsive/adaptive slideshow. Try to resize the browser window

It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers

Camera slideshow provides many options to customize your project as more as possible

Different color skins and layouts available, fullscreen ready too

This is an HTML element included in the transition effect

View code:


<!-- DC Camera Slider CSS -->
<link rel="stylesheet" id="camera-css"  href="dcodes/sliders/css/camera/camera.css" type="text/css" media="all">

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->

<!-- DC Camera Slider JS -->
<script type="text/javascript" src="dcodes/sliders/js/camera/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/camera/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/camera/camera.min.js"></script> 

<!-- DC Camera Slider Settings -->
    <script type="text/javascript">
		jQuery(function(){
			
			jQuery('#camera_wrap_1').camera({
				thumbnails: true,
				height: '400px',
				loader: 'pie', // bar,pie
    		pieDiameter: 38,
        piePosition: "rightTop",				
				time: 1500, // ms (1500 = 1.5 seconds)
				pagination: true				
			});
		});
	</script>

<!-- DC Camera Slider Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
	<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
    
    <!-- Slide 1 -->
    <!-- sample local image:
    <div data-thumb="dcodes/sliders/images/camera/100x75-thumb.jpg" data-src="dcodes/sliders/images/camera/1280x800-image.jpg"> -->
    
    <div data-thumb="http://cdn.dcodes.net/p/100x75/ccc" data-src="http://cdn.dcodes.net/p/1280x800/ccc">
        <div class="camera_caption fadeFromBottom">
            Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
        </div>
    </div>
    
    <!-- Slide 2 -->
    <div data-thumb="http://cdn.dcodes.net/p/100x75/999" data-src="http://cdn.dcodes.net/p/1280x800/999">
        <div class="camera_caption fadeFromBottom">
            It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
        </div>
    </div>
    
    <!-- Slide 3 -->
    <div data-thumb="http://cdn.dcodes.net/p/100x75/666" data-src="http://cdn.dcodes.net/p/1280x800/666">
        <div class="camera_caption fadeFromBottom">
            Camera slideshow provides many options <em>to customize your project</em> as more as possible
        </div>
    </div>
    
    <!-- Slide 4 -->
    <div data-thumb="http://cdn.dcodes.net/p/100x75/333" data-src="http://cdn.dcodes.net/p/1280x800/333">
        <div class="camera_caption fadeFromBottom">
            Different color skins and layouts available, <em>fullscreen ready too</em>
        </div>
		<div style="position:absolute; top:80%; right:5%; background:#333; color:#fff; padding:5px; width:35%;" class="fadeIn camera_effected">This is an HTML element included in the transition effect</div>                
    </div>
	</div><!-- /camera_wrap -->
</div>
<!-- DC Camera Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Slidorion Slider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum augue et diam viverra hendrerit. Nullam adipiscing, lorem vitae semper posuere, risus velit molestie magna, nec vehicula ante quam a nisi.

Sed rutrum cursus dui, eu porttitor augue rhoncus suscipit. Aenean eu diam pretium urna ultrices molestie. Donec faucibus eros id risus blandit congue. Quisque laoreet metus in mi aliquet a posuere felis porttitor.

Duis eu faucibus justo. Donec arcu mauris, iaculis sollicitudin eleifend sed, sagittis eu elit. Sed rutrum rutrum vulputate. Nullam a nulla in elit pulvinar vulputate.


<!-- DC Slidorion Slider CSS -->
<link rel="stylesheet" href="dcodes/sliders/css/slidorion/slidorion.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- DC Slidorion Slider JS -->
<script src="dcodes/sliders/js/slidorion/jquery.slidorion.min.js"></script>

<!-- DC Slidorion Slider Settings -->	
<script type="text/javascript">
	$(document).ready(function(){
		
		$('#slidorion').slidorion();
		
		$('.effects').hide();
		$('.more-effects').click(function(e){
			$('.effects').slideToggle();
			e.preventDefault();
		});
	});
</script>

<!-- DC Slidorion Slider Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
	<div id="slidorion">
		
		<div id="slider">
			
			<!-- Slide 1 -->
			<div class="slider-image" rel="section1">
				<img src="http://cdn.dcodes.net/p/660x400/ccc" width="660" height="400" />
			</div>
			
			<!-- Slide 2 -->
			<div class="slider-image" rel="section2">
				<img src="http://cdn.dcodes.net/p/660x400/999" width="660" height="400" />
			</div>
			
			<!-- Slide 3 -->
			<div class="slider-image" rel="section3">
				<img src="http://cdn.dcodes.net/p/660x400/666" width="660" height="400" />
			</div>
		</div> <!-- /slider -->
		
		<div id="accordion">
			
			<!-- Slide 1 -->
			<div class="header"><a class="slider-link" rel="section1">Visionary</a></div>
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum augue et diam viverra hendrerit. Nullam adipiscing, lorem vitae semper posuere, risus velit molestie magna, nec vehicula ante quam a nisi.</p>
				<a href="#">Read more</a>
			</div>
			
			<!-- Slide 2 -->
			<div class="header"><a class="slider-link" rel="section2">Persistence</a></div>
			<div class="content">
				<p>Sed rutrum cursus dui, eu porttitor augue rhoncus suscipit. Aenean eu diam pretium urna ultrices molestie. Donec faucibus eros id risus blandit congue. Quisque laoreet metus in mi aliquet a posuere felis porttitor.</p>
				<a href="#">Read more</a>
			</div>
			
			<!-- Slide 3 -->
			<div class="header"><a class="slider-link" rel="section3">Integrity</a></div>
			<div class="content">
				<p>Duis eu faucibus justo. Donec arcu mauris, iaculis sollicitudin eleifend sed, sagittis eu elit. Sed rutrum rutrum vulputate. Nullam a nulla in elit pulvinar vulputate.</p>
				<a href="#">Read more</a>
			</div>			
	</div> <!-- /accordion -->
		
	</div> <!-- /slidorion -->

</div>
<!-- DC Slidorion Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

PhotoGrid Slider

View code:


<!-- DC PhotoGrid CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/photogrid/jquery.photogrid.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->

<!-- DC PhotoGrid JS -->
<script type="text/javascript" src="dcodes/sliders/js/photogrid/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/photogrid/jquery.photogrid.js"></script>

<!-- DC PhotoGrid Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->

  <div id="hs_container" class="hs_container">
    
    <!-- sample local image:
    <img class="hs_visible" src="dcodes/sliders/images/photogrid/471x334-thumb.jpg" width="471" height="334" /> -->
    
    <!-- Slide 1 -->
    <div class="hs_area hs_area1">
    	<img class="hs_visible" src="http://cdn.dcodes.net/p/471x334/ccc" width="471" height="334" />
    	<img src="http://cdn.dcodes.net/p/471x334/999" width="471" height="334" />
    	<img src="http://cdn.dcodes.net/p/471x334/666" width="471" height="334" />
    	</div>
    	
    <!-- Slide 2 -->
    <div class="hs_area hs_area2"> 
    	<img class="hs_visible" src="http://cdn.dcodes.net/p/500x165/9CF" width="500" height="165" /> 
    	<img src="http://cdn.dcodes.net/p/500x165/99F" width="500" height="165" /> 
    	<img src="http://cdn.dcodes.net/p/500x165/FCF" width="500" height="165" /> 
    	</div>
    	
    <!-- Slide 3 -->
    <div class="hs_area hs_area3"> 
    	<img class="hs_visible" src="http://cdn.dcodes.net/p/500x167/ccc" width="500" height="167" /> 
    	<img src="http://cdn.dcodes.net/p/500x167/999" width="500" height="167" /> 
    	<img src="http://cdn.dcodes.net/p/500x167/666" width="500" height="167" /> 
    	</div>
    	
    <!-- Slide 4 -->
    <div class="hs_area hs_area4"> 
    	<img class="hs_visible" src="http://cdn.dcodes.net/p/203x135/9CF" width="203" height="135" /> 
    	<img src="http://cdn.dcodes.net/p/203x135/99F" width="203" height="135" /> 
    	<img src="http://cdn.dcodes.net/p/203x135/FCF" width="203" height="135" /> 
    	</div>
    	
    <!-- Slide 5 -->
    <div class="hs_area hs_area5"> 
    	<img class="hs_visible" src="http://cdn.dcodes.net/p/768x135/ccc" width="768" height="135" /> 
    	<img src="http://cdn.dcodes.net/p/768x135/999" width="768" height="135" /> 
    	<img src="http://cdn.dcodes.net/p/768x135/666" width="768" height="135" /> 
    	</div>
    	
  </div> <!-- /hs_container -->
</div>
<!-- DC PhotoGrid End -->
<div class="dc_clear"></div> <!-- line break/clear line -->