Full Width Sliders - DreamCodes

Full Width jQuery Sliders

Add full width sliders to your webpages

iOS Slider (touch & swipe, responsive)

Touch Me.

Hardware accelerated using
CSS3 for supported iOS,
Android and WebKit

Responsive.

Respond to change in browser
width and adjust automatically

Flexible.

Run multiple sliders on
the same web page

Cross-platform.

Support a wide variety of browsers
to maximize your user base

Customize.

Set momentum, elasticity,
scrollbars and more...

View code:


<!-- DC iOS Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/css/ios/tsc_ios.css" />
<!-- Define image urls in tsc_ios.css -->

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

<!-- DC iOS Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/js/ios/jquery.iosslider.js"></script>


<!-- DC iOS Slider Settings -->
<script type="text/javascript">
	$(document).ready(function() {
		
		$('.iosSlider').iosSlider({
			desktopClickDrag: true,
			snapToChildren: true,
			navSlideSelector: '.iossliderContainer .slideSelectors .item',
			onSlideComplete: slideComplete,
			onSliderLoaded: sliderLoaded,
			onSlideChange: slideChange,
			autoSlide: true, // auto slide on load
			scrollbar: true, // show thin scrollbars
			scrollbarContainer: '.iossliderContainer .scrollbarContainer',
			scrollbarMargin: '0',
			scrollbarBorderRadius: '0'
		});
		
	});
	
	function slideChange(args) {
	
		$('.iossliderContainer .slideSelectors .item').removeClass('selected');
		$('.iossliderContainer .slideSelectors .item:eq(' + args.currentSlideNumber + ')').addClass('selected');
	
	}
	
	function slideComplete(args) {
			
		$(args.sliderObject).find('.text1, .text2').attr('style', '');
		$(args.currentSlideObject).find('.text1').animate({
			right: '150px',
			opacity: '0.8'
		}, 400, 'easeOutQuint');
		$(args.currentSlideObject).find('.text2').delay(200).animate({
			right: '100px',
			opacity: '0.8'
		}, 400, 'easeOutQuint');
	}
	
	function sliderLoaded(args) {
		slideComplete(args);
		slideChange(args);
	}
</script>


<!-- DC iOS Slider Start -->
<div style="width:100%; margin:0 auto; padding:0px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div class="fluidHeight">
	<div class="iossliderContainer">
		<div class="iosSlider">
			<div class="slider">
			
				<!-- Slide 1 -->
				<div class="item item1">
					<div class="inner">
						<div class="selectorShadow"></div>
						<div class="text1"><span>Touch Me.</span></div>
						<div class="text2"><span>Hardware accelerated using<br />CSS3 for supported iOS,<br />Android and WebKit</span></div>
					</div>
				</div>
				
				<!-- Slide 2 -->
				<div class="item item2">
					<div class="inner">
						<div class="selectorShadow"></div>
						<div class="text1"><span>Responsive.</span></div>
						<div class="text2"><span>Respond to change in browser<br />width and adjust automatically</span></div>
					</div>
				</div>
				
				<!-- Slide 3 -->
				<div class="item item3">
					<div class="inner">
						<div class="selectorShadow"></div>
						<div class="text1"><span>Flexible.</span></div>
						<div class="text2"><span>Run multiple sliders on<br />the same web page</span></div>
					</div>
				</div>
				
				<!-- Slide 4 -->
				<div class="item item4">
					<div class="inner">
						<div class="selectorShadow"></div>
						<div class="text1"><span>Cross-platform.</span></div>
						<div class="text2"><span>Support a wide variety of browsers<br />to maximize your user base</span></div>
					</div>
				</div>
				
				<!-- Slide 5 -->
				<div class="item item5">
					<div class="inner">
						<div class="selectorShadow"></div>
						<div class="text1"><span>Customize.</span></div>
						<div class="text2"><span>Set momentum, elasticity,<br />scrollbars and more...</span></div>
					</div>
				</div>
			</div>
		</div> <!-- /iosSlider -->
		
		<!-- bullet selectors -->
		<div class="slideSelectors">
			<div class="item selected"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		
		<!-- horizontal scrollbars -->
		<div class="scrollbarContainer"></div>
		
	</div> <!-- /iossliderContainer -->
</div> <!-- /fluidHeight -->
</div>
<!-- DC iOS Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Parallax Slider

Super Sale!

We're having a massive sale this week! Items up to 30% off. Grab a deal while stocks last! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor interdum malesuada. In a ligula arcu, vel tempus elit.

Fast Shipping

Buy today and get it shipped immediately! Free delivery on orders over $50! Mauris vehicula molestie vestibulum. Aliquam venenatis, neque vitae lacinia malesuada, ante turpis tempor metus, id egestas dolor enim in dui.

Worldwide Delivery

We accept orders worldwide. Credit Card, Bank Deposit, Paypal. Accepted Morbi pulvinar aliquam urna vel facilisis. Sed sit amet lorem magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.

24/7 Support

Email & phone support whenever you need it. We're here 7 days a week! Sed ullamcorper odio commodo velit rutrum ut aliquam velit volutpat. Vestibulum hendrerit tristique ornare. Nam vitae libero sapien.

View code:


<!-- DC Parallax Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/css/parallax/tsc_parallax.css" />

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

<!-- DC Parallax Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/js/parallax/modernizr.custom.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/js/parallax/jquery.cslider.js"></script>

<!-- DC Parallax Slider Settings -->
<script type="text/javascript">
			$(function() {
			
				$('#da-slider').cslider({
					autoplay	: true, // auto play slider on load
					bgincrement	: 450
				});
			
			});
</script>	

<!-- DC Parallax Slider Start -->
<div style="width:100%; margin:0 auto; padding:0px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div id="da-slider" class="da-slider">
	
	<!-- Slide 1 -->
	<div class="da-slide">
		<h2>Super Sale!</h2>
		<p>We're having a massive sale this week! Items up to 30% off. Grab a deal while stocks last! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor interdum malesuada. In a ligula arcu, vel tempus elit. </p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img"><img src="dreamcodes/sliders/images/parallax/1.png" alt="image01" /></div>
	</div>
	
	<!-- Slide 2 -->
	<div class="da-slide">
		<h2>Fast Shipping</h2>
		<p>Buy today and get it shipped immediately! Free delivery on orders over $50! Mauris vehicula molestie vestibulum. Aliquam venenatis, neque vitae lacinia malesuada, ante turpis tempor metus, id egestas dolor enim in dui.</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img"><img src="dreamcodes/sliders/images/parallax/2.png" alt="image01" /></div>
	</div>
	
	<!-- Slide 3 -->
	<div class="da-slide">
		<h2>Worldwide Delivery</h2>
		<p>We accept orders worldwide. Credit Card, Bank Deposit, Paypal. Accepted Morbi pulvinar aliquam urna vel facilisis. Sed sit amet lorem magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img"><img src="dreamcodes/sliders/images/parallax/3.png" alt="image01" /></div>
	</div>
	
	<!-- Slide 3 -->
	<div class="da-slide">
		<h2>24/7 Support</h2>
		<p>Email & phone support whenever you need it. We're here 7 days a week! Sed ullamcorper odio commodo velit rutrum ut aliquam velit volutpat. Vestibulum hendrerit tristique ornare. Nam vitae libero sapien.</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img"><img src="dreamcodes/sliders/images/parallax/4.png" alt="image01" /></div>
	</div>
	
	<!-- Slide 4 -->
	
	<!-- navigation controls -->
	<nav class="da-arrows">
		<span class="da-arrows-prev"></span>
		<span class="da-arrows-next"></span>
	</nav>
	
</div> <!-- /da-slider -->
</div>
<!-- DC Parallax Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Layered Slider

Loading images...

View code:


<!-- DC Layered Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/css/layered/layered-slider.css" />

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

<!-- DC Layered Slider JS --> 
<script type="text/javascript" src="dreamcodes/sliders/js/layered/layered-slider.js"></script> 

<!-- DC Layered Slider Start --> 
<div style="width:100%; margin:0 auto; padding:0px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div id="lcontainer" class="layered-container">
  <div class="layered-bg"> 
    <!-- load transparent background image layers -->
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
  </div>
  <div class="lloading">Loading images...</div>
  <div class="lslider_wrapper">
    <ul class="lslider">
      <!-- sample local image
      <!-- <li><img src="dreamcodes/sliders/images/layered/820x410-image.jpg" width="820" height="410" /></li> -->
      <li><img src="http://pimg.co/p/820x410/dddddd" width="820" height="410" /></li>
      <li><img src="http://pimg.co/p/820x410/cccccc" width="820" height="410" /></li>
      <li><img src="http://pimg.co/p/820x410/999999" width="820" height="410" /></li>
      <li><img src="http://pimg.co/p/820x410/666666" width="820" height="410" /></li>
      <li><img src="http://pimg.co/p/820x410/333333" width="820" height="410" /></li>
      <li><img src="http://pimg.co/p/820x410/000000" width="820" height="410" /></li>
    </ul>
    <div class="navigation"> <span class="lnext"></span> <span class="lprev"></span> </div>
    <ul class="thumbnails">
      <!-- sample local image
      <!-- <li><img src="dreamcodes/sliders/images/layered/thumbs/93x49-thumb.jpg" width="93" height="49" /></li> -->
      <li><img src="http://pimg.co/p/93x49/dddddd" width="93" height="49" /></li>
      <li><img src="http://pimg.co/p/93x49/cccccc" width="93" height="49" /></li>
      <li><img src="http://pimg.co/p/93x49/999999" width="93" height="49" /></li>
      <li><img src="http://pimg.co/p/93x49/666666" width="93" height="49" /></li>
      <li><img src="http://pimg.co/p/93x49/333333" width="93" height="49" /></li>
      <li><img src="http://pimg.co/p/93x49/000000" width="93" height="49" /></li>
    </ul>
  </div>
</div> <!-- /lcontainer -->
</div>
<!-- DC Layered Slider End -->

<!-- DC Layered Slider Settings --> 
<script type="text/javascript">
			$(function() {
				var $container	= $('#lcontainer');
				$container.parallaxSlider();
			});
</script> 

<div class="tsc_clear"></div> <!-- line break/clear line -->