<< Back | Main Menu | FAQ | [?]

jQuery Sliders III

Add sliders to your webpages

OneByOne Slider (responsive)

OneByOne Slider The Ultimate Layer Slider Includes 17+ Transition Effects

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- DC OneByOne Slider CSS -->
<link href="dcodes/sliders/onebyone/css/jquery.onebyone.css" rel="stylesheet" type="text/css">
<link href="dcodes/sliders/onebyone/css/animate.min.css" rel="stylesheet" type="text/css">
 
<!-- DC OneByOne Custom Fonts -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT Sans Narrow">
 
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC OneByOne Slider JS -->
<script src="dcodes/sliders/onebyone/js/jquery.onebyone.js"></script>
<script src="dcodes/sliders/onebyone/js/jquery.touchwipe.min.js"></script>
 
<!-- DC OneByOne Slider Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
  <div class="oneByOne1">
    <div id="obo_banner">
       
      <!-- slide 1 -->
      <div class="oneByOne_item obo_slide1">
        <img src="dcodes/sliders/onebyone/images/slider1_element_bg.png" class="element_bg animate3" />
        <img src="dcodes/sliders/onebyone/images/slider1_element_1.png" class="element_0 animate0" />
        <img src="dcodes/sliders/onebyone/images/slider1_element_1.png" width="100" class="element_1 animate1" />
        <img src="dcodes/sliders/onebyone/images/slider1_element_1.png" width="75" class="element_2 animate2" />
        <span class="slide1Txt1">OneByOne Slider</span> <span class="slide1Txt2">The Ultimate Layer Slider</span>
        <span class="slide1Txt3">Includes 17+ Transition Effects</span>
      </div>
       
      <!-- slide 2 -->
      <div class="oneByOne_item obo_slide2">
        <img src="dcodes/sliders/onebyone/images/slider2_tablet.png" class="element_0 animate0" />
        <img src="dcodes/sliders/onebyone/images/slider2_element_1.png" class="element_1 animate0" />
        <img src="dcodes/sliders/onebyone/images/slider2_element_2.png" class="element_2 animate1" />
        <img src="dcodes/sliders/onebyone/images/slider2_element_3.png" class="element_3 animate2" />
        <a href="#" class="button animate3"><img src="dcodes/sliders/onebyone/images/slider2_button.png" border="0" /></a>
      </div>
       
      <!-- slide 3 -->
      <div class="oneByOne_item obo_slide3">
        <a href="#"><img src="dcodes/sliders/onebyone/images/slider3_element_2.png" alt="img" border="0" class="element_2 animate1" /></a>
        <a href="#"><img src="dcodes/sliders/onebyone/images/slider3_element_3.png" alt="img" border="0" class="element_3 animate2" /></a>
        <a href="#"><img src="dcodes/sliders/onebyone/images/slider3_element_4.png" alt="img" border="0" class="element_4 animate3" /></a>
        <a href="#"><img src="dcodes/sliders/onebyone/images/slider3_element_5.png" alt="img" border="0" class="element_5 animate4" /></a>
        <span class="slide3Txt1">Create Transitional Layered Items</span>
      </div>
       
      <!-- slide 4 -->
      <div class="oneByOne_item obo_slide4">
        <img src="dcodes/sliders/onebyone/images/slider4_element_1.png" alt="img" class="element_1 animate0" />
        <img src="dcodes/sliders/onebyone/images/slider4_element_2.png" alt="img" width="166" height="158" class="element_2 animate1" />
        <img src="dcodes/sliders/onebyone/images/slider4_element_3.png" alt="img" width="186" height="158" class="element_3 animate2" />
        <img src="dcodes/sliders/onebyone/images/slider4_element_4.png" alt="img" width="153" height="158" class="element_4 animate3" />
        <img src="dcodes/sliders/onebyone/images/slider4_element_5.png" alt="img" width="175" height="158" class="element_5 animate4" />
        <img src="dcodes/sliders/onebyone/images/slider4_element_6.png" alt="img" width="120" height="158" class="element_6 animate5" />
      </div>
    </div>
    <!-- /obo_banner -->
  </div>
  <!-- /oneByOne1 -->
   
  <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
                $('#obo_banner').oneByOne({
            className: 'oneByOne1',             
            easeType: 'random', // options: random, rollIn, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInRight, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
            width: 980,
            height: 370,           
            slideShowDelay: 3500,
            slideShow: true
        }); 
     });
  </script>
</div>
<!-- DC OneByOne Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Nivo Slider (responsive)

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

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!-- DC Nivo Slider CSS -->
<link rel="stylesheet" href="dcodes/sliders/css/nivo-slider/default-theme/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="dcodes/sliders/css/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
 
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC Nivo Slider JS -->
<script type="text/javascript" src="dcodes/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: true, // 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 class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
         
        <!-- local sample image:
        <img src="dcodes/sliders/images/nivo-slider/980x400-image.jpg" width="980" height="400" title="#htmlcaption" /> -->
         
        <!-- Slide 1 -->
        <img src="http://cdn.dcodes.net/p/980x400/ccc" width="980" height="400" title="#htmlcaption1" />
         
        <!-- Slide 2 -->
        <img src="http://cdn.dcodes.net/p/980x400/999" width="980" height="400" title="#htmlcaption2" />
         
        <!-- Slide 3 -->
        <img src="http://cdn.dcodes.net/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="dc_clear"></div> <!-- line break/clear line -->

Showcase Slider

Vision
Integrity
Wonder
Customize
this text!
More text examples!
Focus
Determined
●●●●●●●

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!-- DC Showcase Slider CSS -->
<link rel="stylesheet" href="dcodes/sliders/css/showcase/showcase.css" />
 
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC Showcase Slider JS -->
<script type="text/javascript" src="dcodes/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="dcodes/sliders/images/showcase/838x470-image.jpg" width="838" height="470" /> -->
         
        <!-- Slide 1 -->
        <div class="showcase-slide">
            <div class="showcase-content">
                <img src="http://cdn.dcodes.net/p/838x470/ccc" width="838" height="470" />
            </div>
 
            <div class="showcase-thumbnail">
                <img src="http://cdn.dcodes.net/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://cdn.dcodes.net/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://cdn.dcodes.net/p/838x470/999" width="838" height="470" />
            </div>
             
            <div class="showcase-thumbnail">
                <img src="http://cdn.dcodes.net/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://cdn.dcodes.net/p/838x470/666" width="838" height="470" />
            </div>
             
            <div class="showcase-thumbnail">
                <img src="http://cdn.dcodes.net/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://cdn.dcodes.net/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://cdn.dcodes.net/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://cdn.dcodes.net/p/838x470/9CF" width="838" height="470" />
            </div>
             
            <div class="showcase-thumbnail">
                <img src="http://cdn.dcodes.net/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://cdn.dcodes.net/p/838x470/9CC" width="838" height="470" />
            </div>
             
            <div class="showcase-thumbnail">
                <img src="http://cdn.dcodes.net/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="dc_clear"></div> <!-- line break/clear line -->

Broken Glass Slider

dCodes

Play Pause

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- DC Broken Glass Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/broken-glass/slider-brokenglass-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 Broken Glass Slider JS -->
<script type="text/javascript" src="dcodes/sliders/js/broken-glass/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="dcodes/sliders/js/broken-glass/jquery.mousewheel.js"></script>
<script type="text/javascript" src="dcodes/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="dcodes/sliders/images/broken-glass/379x470-image.jpg" width="379" height="470" /> -->
 
        <li data-images="rm_container_1" data-rotation="-12"><img src="http://cdn.dcodes.net/p/379x470/ccc" width="379" height="470" /></li>
        <li data-images="rm_container_2" data-rotation="-5"><img src="http://cdn.dcodes.net/p/379x470/999" width="379" height="470" /></li>
        <li data-images="rm_container_3" data-rotation="5"><img src="http://cdn.dcodes.net/p/379x470/666" width="379" height="470" /></li>
            <li data-images="rm_container_4" data-rotation="12"><img src="http://cdn.dcodes.net/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>dCodes</h2>
       
      <div style="display:none;">
        <div id="rm_container_1"> <img src="http://cdn.dcodes.net/p/379x470/ccc" width="379" height="470" /> <img src="http://cdn.dcodes.net/p/379x470/9CF" width="379" height="470" /> </div>
        <div id="rm_container_2"> <img src="http://cdn.dcodes.net/p/379x470/999" width="379" height="470" /> <img src="http://cdn.dcodes.net/p/379x470/99F" width="379" height="470" /> </div>
        <div id="rm_container_3"> <img src="http://cdn.dcodes.net/p/379x470/666" width="379" height="470" /> <img src="http://cdn.dcodes.net/p/379x470/FCF" width="379" height="470" /> </div>
        <div id="rm_container_4"> <img src="http://cdn.dcodes.net/p/379x470/333" width="379" height="470" /> <img src="http://cdn.dcodes.net/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="dc_clear"></div> <!-- line break/clear line -->

Touchswipe Slider

Click/Touch and swipe to see next slide.

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!-- DC Touchswipe Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/touchswipe/css/settings.css" media="screen" />
 
<!-- 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 Touchswipe Slider JS -->
<script type="text/javascript" src="dcodes/sliders/touchswipe/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="dcodes/sliders/touchswipe/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="dcodes/sliders/touchswipe/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="dcodes/sliders/touchswipe/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="dcodes/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="dcodes/sliders/images/touchswipe/slide1.jpg" data-thumb="dcodes/sliders/images/touchswipe/thumb1.jpg" data-thumb_bw="dcodes/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="dcodes/sliders/images/touchswipe/vimeo.jpg" data-thumb="dcodes/sliders/images/touchswipe/thumb_vimeo.jpg" data-thumb_bw="dcodes/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="dcodes/sliders/images/touchswipe/slide2.jpg" data-thumb="dcodes/sliders/images/touchswipe/thumb2.jpg" data-thumb_bw="dcodes/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="dcodes/sliders/images/touchswipe/slide3.jpg" data-thumb="dcodes/sliders/images/touchswipe/thumb3.jpg" data-thumb_bw="dcodes/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="dcodes/sliders/images/touchswipe/youtube.jpg" data-thumb="dcodes/sliders/images/touchswipe/thumb_youtube.jpg" data-thumb_bw="dcodes/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="dc_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

dCodesthe ultimate html framework

Amazingartwork by sakimichan

Visionfuture innovations found today

TemplateAccessdesigns by team (ta)


View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- DC Panel Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/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>dCodes</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="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess