jQuery Sliders III

Add sliders to your webpages

Nivo Slider

This is an example of a HTML caption. Supports Links: Bing Search
This is example slide two.

View code:


<!-- DC Nivo Slider CSS -->
<link rel="stylesheet" href="dreamcodes/sliders/css/nivo-slider/nivo-slider.css" type="text/css" media="screen" />

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

<!-- DC Nivo Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/js/nivo-slider/jquery.nivo.slider.pack.js"></script>

<!-- DC Nivo Slider Settings -->
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Effects available: 'random,fold,fade,boxRandom,sliceDown,sliceDownLeft,sliceUp,sliceUpLeft,sliceUpDown,sliceUpDownLeft,slideInRight,slideInLeft,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show before next slide (3000 = 3 seconds)
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
    		controlNavThumbsFromRel:true, // Generates the thumbnail url from the “rel” attribute in your image tags
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: '<', // Prev directionNav text
        nextText: '>', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
	});
});
</script>

<!-- DC Nivo Slider Start -->
 <div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->  
  <div id="slider-wrapper">
    <div id="slider" class="nivoSlider">
    	
    	<!-- local sample image: 
    	<img src="dreamcodes/sliders/images/nivo-slider/980x400-image.jpg" width="980" height="400" title="#htmlcaption" /> -->
    	
    	<!-- Slide 1 -->
    	<img src="http://pimg.co/p/980x400/ccc" width="980" height="400" title="#htmlcaption1" />
    	
    	<!-- Slide 2 -->
    	<img src="http://pimg.co/p/980x400/999" width="980" height="400" title="#htmlcaption2" />
    	
    	<!-- Slide 3 -->
    	<img src="http://pimg.co/p/980x400/666" width="980" height="400" />
    	
    </div> <!-- /slider -->
    
    <!-- Slide 1 Caption -->
    <div id="htmlcaption1" class="nivo-html-caption"><strong>This</strong> is an example of a <em>HTML</em> caption. Supports Links: <a href="http://www.bing.com" target="_blank">Bing Search</a></div>

		<!-- Slide 2 Caption -->
    <div id="htmlcaption2" class="nivo-html-caption"><strong>This</strong> is example slide two.</div>    
    
  </div> <!-- /slider-wrapper -->
</div>  
<!-- DC Nivo Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Showcase Slider

Vision
Tooltips can be placed anywhere! Another example tooltip. Just define two coordinates! Tooltip example with HTML content.
Integrity

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Wonder

Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing.

Customize
this text!

Nulla eget sapien neque, in commodo erat. Integer at felis tortor.

More text examples!
Focus
Determined

View code:


<!-- DC Showcase Slider CSS -->
<link rel="stylesheet" href="dreamcodes/sliders/css/showcase/showcase.css" />

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

<!-- DC Showcase Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/js/showcase/jquery.aw-showcase.js"></script>

<!-- DC Showcase Slider Settings -->
<script type="text/javascript">

$(document).ready(function()
{
	$("#showcase").awShowcase(
	{
		content_width:			838, // width of slider
		content_height:			470, // height of slider
		fit_to_parent:			false,
		auto:					true, // auto play slider on load
		interval:				3000, // interval between slides (3000 = 3 seconds)
		continuous:				true,
		loading:				true,
		tooltip_width:			200, // tooltip width
		tooltip_icon_width:		32,
		tooltip_icon_height:	32,
		tooltip_offsetx:		18,
		tooltip_offsety:		0,
		arrows:					true, // show side left/right arrow buttons
		buttons:				true, // show pagination bullets below slider
		btn_numbers:			false, // make pagination bullets numbers instead (e.g. 1,2,3,4,5)
		keybord_keys:			true, // enable keyboard keys (left/right)
		mousetrace:				false, /* Trace x and y coordinates for the mouse */
		pauseonover:			true, // pause slide on hover
		stoponclick:			true,
		transition:				'vslide', /* hslide/vslide/fade */
		transition_delay:		300,
		transition_speed:		500,
		show_caption:			'onhover', /* onload/onhover/show */
		thumbnails:				true, // show thumbnails
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'vertical', /* vertical/horizontal */
		thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
		speed_change:			true, /* Set to true to prevent users from swithing more then one slide at once. */
		viewline:				false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
	});
});

</script>

<!-- DC Showcase Slider Start -->
	<div id="showcase" class="showcase">

    <!-- local sample image: 
    <img src="dreamcodes/sliders/images/showcase/838x470-image.jpg" width="838" height="470" /> -->
		
		<!-- Slide 1 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/ccc" width="838" height="470" />
			</div>

			<div class="showcase-thumbnail">
				<img src="http://pimg.co/p/140x470/ccc" width="140" />
				<div class="showcase-thumbnail-caption">Vision</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>

			<!-- Showcase Tooltips -->
			<div class="showcase-tooltips">
				<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
				<a href="http://www.bing.com" coords="334,230" target="_blank">Tooltips can be placed anywhere!</a>
				<a href="http://www.templateaccess.com" coords="470,190" target="_blank">Another example tooltip. Just define two coordinates!</a>

				<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
				<a href="http://www.google.com" coords="256, 192" target="_blank">
					<img src="http://pimg.co/p/200x200/C99" width="200" />
					<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">Tooltip example with HTML content.</span>
				</a>

			</div>
		</div> <!-- /showcase-slide -->

		<!-- Slide 2 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/999" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<img src="http://pimg.co/p/140x470/999" width="140" />
				<div class="showcase-thumbnail-caption">Integrity</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
			
			<div class="showcase-caption">
				<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
			</div>

		</div> <!-- /showcase-slide -->
		
		<!-- Slide 3 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/666" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<img src="http://pimg.co/p/140x470/666" width="140" />
				<div class="showcase-thumbnail-caption">Wonder</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
			
			<div class="showcase-caption">
				<h2>Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing.</h2>
			</div>
			
		</div> <!-- /showcase-slide -->

		<!-- Slide 4 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/333" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<div class="showcase-thumbnail-content">Customize<br/> <b>this text!</b></div>
				<div class="showcase-thumbnail-cover"></div>
			</div>

			<div class="showcase-caption">
				<h2>Nulla eget sapien neque, in commodo erat. Integer at felis tortor.</h2>
			</div>

		</div> <!-- /showcase-slide -->
		
		<!-- Slide 5 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/000" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<div class="showcase-thumbnail-content">More text examples!</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
			
		</div> <!-- /showcase-slide -->

		<!-- Slide 6 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/9CF" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<img src="http://pimg.co/p/140x470/9CF" width="140" />
				<div class="showcase-thumbnail-caption">Focus</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>

		</div> <!-- /showcase-slide -->
		
		<!-- Slide 7 -->
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="http://pimg.co/p/838x470/9CC" width="838" height="470" />
			</div>
			
			<div class="showcase-thumbnail">
				<img src="http://pimg.co/p/140x470/9CC" width="140" />
				<div class="showcase-thumbnail-caption">Determined</div>
				<div class="showcase-thumbnail-cover"></div>				
			</div>

		</div> <!-- /showcase-slide -->
	</div>
<!-- DC Showcase Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Broken Glass Slider

DreamCodes

Play Pause

View code:


<!-- DC Broken Glass Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/css/broken-glass/slider-brokenglass-style.css" />

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

<!-- DC Broken Glass Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/js/broken-glass/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/js/broken-glass/jquery.mousewheel.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/js/broken-glass/jquery.RotateImageMenu.js"></script>

<!-- DC Broken Glass Slider Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
    <div id="rm_container" class="rm_container">
      <ul>

    		<!-- local sample image: 
    		<li data-images="rm_container_1" data-rotation="-15"><img src="dreamcodes/sliders/images/broken-glass/379x470-image.jpg" width="379" height="470" /> -->

        <li data-images="rm_container_1" data-rotation="-12"><img src="http://pimg.co/p/379x470/ccc" width="379" height="470" /></li>
        <li data-images="rm_container_2" data-rotation="-5"><img src="http://pimg.co/p/379x470/999" width="379" height="470" /></li>
        <li data-images="rm_container_3" data-rotation="5"><img src="http://pimg.co/p/379x470/666" width="379" height="470" /></li>
            <li data-images="rm_container_4" data-rotation="12"><img src="http://pimg.co/p/379x470/333" width="379" height="470" /></li>
    
      </ul>
      
      <!-- shattered glass effect, remove this to show full glass: start -->
      <div id="rm_mask_left" class="rm_mask_left"></div>
      <div id="rm_mask_right" class="rm_mask_right"></div>
      <div id="rm_corner_left" class="rm_corner_left"></div>
      <div id="rm_corner_right" class="rm_corner_right"></div>
      <!-- shattered glass effect, remove this to show full glass: end -->
      
      <!-- Slider Caption -->
      <h2>DreamCodes</h2>
      
      <div style="display:none;">
        <div id="rm_container_1"> <img src="http://pimg.co/p/379x470/ccc" width="379" height="470" /> <img src="http://pimg.co/p/379x470/9CF" width="379" height="470" /> </div>
        <div id="rm_container_2"> <img src="http://pimg.co/p/379x470/999" width="379" height="470" /> <img src="http://pimg.co/p/379x470/99F" width="379" height="470" /> </div>
        <div id="rm_container_3"> <img src="http://pimg.co/p/379x470/666" width="379" height="470" /> <img src="http://pimg.co/p/379x470/FCF" width="379" height="470" /> </div>
        <div id="rm_container_4"> <img src="http://pimg.co/p/379x470/333" width="379" height="470" /> <img src="http://pimg.co/p/379x470/CCF" width="379" height="470" /> </div>
      </div>
    </div> <!-- /rm_container -->
    
    <!-- navigation controls -->
    <div class="rm_nav"> <a id="rm_next" href="#" class="rm_next"></a> <a id="rm_prev" href="#" class="rm_prev"></a> </div>
    <div class="rm_controls"> <a id="rm_play" href="#" class="rm_play">Play</a> <a id="rm_pause" href="#" class="rm_pause">Pause</a> </div>

</div>
<!-- DC Broken Glass Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Touchswipe Slider

Click/Touch and swipe to see next slide.

View code:


<!-- DC Touchswipe Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/touchswipe/css/settings.css" media="screen" />

<!-- 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 Touchswipe Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/touchswipe/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/touchswipe/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/touchswipe/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/touchswipe/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/touchswipe/js/jquery.templateaccess.touchswipe.js"></script>

<!-- DC Touchswipe Slider Settings -->
<script type="text/javascript">    
$(function() {
	//$.noConflict();					 									
	
	$('#banner-example-1').paradigm(
		{										
			width:960, // slider width
			height:380, // slider height
			
			thumbWidth:90, // thumbnail width
			thumbHeight:50, // thumbnail height
			thumbAmount:4, // number of thumbnails to show
			thumbSpaces:4,
			thumbPadding:4,
			
			parallaxX:500,
			parallaxY:10,
			captionParallaxX:-40,
			captionParallaxY:2,
			
			touchenabled:'on', // enable touch swipe
			shadow:'true', // show slider shadows
			
			timer:5 // number of seconds to show each slide
		});
           
});
</script>

<!-- DC Touchswipe Slider Start -->
  <div id="banner-example-1" class="light">
    <ul>
      
      <!-- Slide 1 -->
      <li data-transition="fade"><img src="dreamcodes/sliders/images/touchswipe/slide1.jpg" data-thumb="dreamcodes/sliders/images/touchswipe/thumb1.jpg" data-thumb_bw="dreamcodes/sliders/images/touchswipe/thumb1_bw.jpg" />
        <div  class="creative_layer">
          <div class="caption_blue fadeup" style="top:170px;left:50px;">Welcome to TOUCHSWIPE</div>
          <div class="caption_black smallcap faderight" style="top:213px;left:90px">The highly customizable touch and swipe slider</div>
        </div>
      </li>
      
      <!-- Slide 2 -->
      <li data-transition="slide"><img src="dreamcodes/sliders/images/touchswipe/vimeo.jpg" data-thumb="dreamcodes/sliders/images/touchswipe/thumb_vimeo.jpg" data-thumb_bw="dreamcodes/sliders/images/touchswipe/thumb_vimeo_bw.jpg" />
        <div class="video_pradigm">
          <div class="video_paradigm_wrap">
            <iframe class="video_clip" src="http://player.vimeo.com/video/4749536?title=0&byline=0&portrait=0" width="534" height="300" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
            <h2>Vimeo Video Support</h2>
            <p> Click play to play video. </p>
            <p> <strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>. </p>
            <a class="buttonlight" href="#">Visit Website</a>
            <div id="close"></div>
          </div>
        </div>
        <div  class="creative_layer">
          <div class="caption_blue fadeleft" style="top:120px;left:625px;">Vimeo</div>
          <div class="caption_white faderight" style="top:120px;left:722px;">Support</div>
          <div class="caption_black smallcap fadeup" style="top:163px;left:625px;">Click the play button</div>
        </div>
      </li>
      
      <!-- Slide 3 -->
      <li data-transition="slide"><img src="dreamcodes/sliders/images/touchswipe/slide2.jpg" data-thumb="dreamcodes/sliders/images/touchswipe/thumb2.jpg" data-thumb_bw="dreamcodes/sliders/images/touchswipe/thumb2_bw.jpg" />
        <div  class="creative_layer">
          <div class="caption_green fadedown" style="top:80px;left:450px;">Some of TOUCHSWIPE's Options:</div>
          <div class="caption_black smallcap fadeleft" style="top:123px;left:450px">Image and thumbs fully resizable</div>
          <div class="caption_black smallcap fadeleft" style="top:157px;left:450px">Optional parallax effect</div>
          <div class="caption_black smallcap fadeleft" style="top:191px;left:450px">iPhone & Android touch enabled</div>
        </div>
      </li>
      
      <!-- Slide 4 -->
      <li data-transition="fade"><img src="dreamcodes/sliders/images/touchswipe/slide3.jpg" data-thumb="dreamcodes/sliders/images/touchswipe/thumb3.jpg" data-thumb_bw="dreamcodes/sliders/images/touchswipe/thumb3_bw.jpg" />
        <div  class="creative_layer">
          <div class="caption_orange fadeup" style="top:230px;left:120px;">Captions can be positioned freely</div>
          <div class="caption_white fadedown" style="top:230px;left:530px;"><a href="http://www.bing.com" target="_blank">Link: Bing Search</a></div>
        </div>
      </li>
      
      <!-- Slide 5 -->
      <li data-transition="fade"><img src="dreamcodes/sliders/images/touchswipe/youtube.jpg" data-thumb="dreamcodes/sliders/images/touchswipe/thumb_youtube.jpg" data-thumb_bw="dreamcodes/sliders/images/touchswipe/thumb_youtube_bw.jpg" />
        <div class="video_pradigm">
          <div class="video_paradigm_wrap">
            <iframe class="video_clip" src="http://www.youtube.com/embed/FG0fTKAqZ5g?hd=1&wmode=opaque&autohide=1&showinfo=0" height="300" width="534" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
            <h2>Youtube Video Support</h2>
            <p> Click play to watch video. </p>
            <p> <strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>. </p>
            <a class="buttonlight" href="#">More Info</a>
            <div id="close"></div>
          </div>
        </div>
        <div  class="creative_layer">
          <div class="caption_red fadeleft" style="top:120px;left:580px;"><a href="#">YouTube</a></div>
          <div class="caption_white faderight" style="top:120px;left:710px;">Support</div>
        </div>
      </li>
      
    </ul>
  </div> <!-- /banner-example-1 -->
<!-- DC Touchswipe Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

Panel Slider

Slice 1 - Image 1 Slice 1 - Image 2 Slice 1 - Image 3 Slice 1 - Image 4
Slice 2 - Image 1 Slice 2 - Image 2 Slice 2 - Image 3 Slice 2 - Image 4
Slice 3 - Image 1 Slice 3 - Image 2 Slice 3 - Image 3 Slice 3 - Image 4
Slice 4 - Image 1 Slice 4 - Image 2 Slice 4 - Image 3 Slice 4 - Image 4

DreamCodesthe ultimate html framework

Amazingartwork by sakimichan

Visionfuture innovations found today

TemplateAccessdesigns by team (ta)


View code:


<!-- DC Panel Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/css/panel/panel_slider.css" />
<!-- Edit panel_slider.css to define image urls -->

<!-- DC Panel Slider Start -->
  <section class="cr-container">
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1">1</label>
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2">2</label>
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3">3</label>
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4">4</label>
    <div class="clr"></div>
    <div class="cr-bgimg">
      <div> <span>Slice 1 - Image 1</span> <span>Slice 1 - Image 2</span> <span>Slice 1 - Image 3</span> <span>Slice 1 - Image 4</span> </div>
      <div> <span>Slice 2 - Image 1</span> <span>Slice 2 - Image 2</span> <span>Slice 2 - Image 3</span> <span>Slice 2 - Image 4</span> </div>
      <div> <span>Slice 3 - Image 1</span> <span>Slice 3 - Image 2</span> <span>Slice 3 - Image 3</span> <span>Slice 3 - Image 4</span> </div>
      <div> <span>Slice 4 - Image 1</span> <span>Slice 4 - Image 2</span> <span>Slice 4 - Image 3</span> <span>Slice 4 - Image 4</span> </div>
    </div>
    <!-- Slide Captions -->
    <div class="cr-titles">
      <h3><span>DreamCodes</span><span>the ultimate html framework</span></h3>
      <h3><span>Amazing</span><span>artwork by sakimichan</span></h3>
      <h3><span>Vision</span><span>future innovations found today</span></h3>
      <h3><span>TemplateAccess</span><span>designs by team (ta)</span></h3>
    </div>
  </section>
<!-- DC Panel Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->


© TemplateAccess