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

Full Width jQuery Sliders

Add full width sliders to your webpages

Responsive Grid Slider (full width, responsive)

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
<!-- DC Responsive Grid CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/responsive-grid/css/dc_responsive_grid.css" />
<noscript>
<link rel="stylesheet" type="text/css" href="dcodes/sliders/responsive-grid/css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="dcodes/sliders/responsive-grid/css/fallback.css" />
<![endif]-->
 
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC Responsive Grid JS -->
<script type="text/javascript" src="dcodes/sliders/responsive-grid/js/modernizr.custom.26887.js"></script>
<script type="text/javascript" src="dcodes/sliders/responsive-grid/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="dcodes/sliders/responsive-grid/js/jquery.gridrotator.js"></script>
 
<!-- DC Responsive Grid Start -->
<img src="dcodes/sliders/responsive-grid/images/loading.gif" style="display:none;"/>
<div class="responsive-grid-container">
  <section class="responsive-grid-main">
    <div id="ri-grid" class="ri-grid ri-grid-size-2">
      <ul>
        <!-- note: all images defined below must exist or grid will fail to initialize -->
        <!-- sample local image -->
        <!-- <li><a href="#"><img src="dcodes/sliders/responsive-grid/images/image-200x200.jpg" /></a></li> -->
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/0099CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/114455" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC9999" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/3366CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/99CCCC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/AA66AA" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/99CCFF" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/669933" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/669900" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/889955" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/99AAAA" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/666666" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/AA4477" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CCCC66" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/887777" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/DD1122" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/EE88AA" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/669933" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/9999CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/6699CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/334499" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/119955" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/DDBB11" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/339966" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC3300" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/663366" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/444422" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/228899" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CCCC33" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/0088DD" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/BB2200" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/999999" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC0066" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CCEEDD" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/22BB55" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/9999CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/99CC33" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/224488" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/336666" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC6600" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/AABB88" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/DD6611" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC99CC" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CC6633" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/668844" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/226699" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CCCC33" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/663333" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/004488" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/99AABB" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/663366" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/999933" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/AABBEE" /></a></li>
        <li><a href="#"><img src="http://cdn.dcodes.net/p/200x200/CCCC99" /></a></li>
      </ul>
    </div>
  </section>
</div>
<!-- DC Responsive Grid End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
 
<!-- DC Responsive Grid Settings -->
<script type="text/javascript">  
            $(function() {
             
                $( '#ri-grid' ).gridrotator( {
                    rows        : 3, // number of tile rows to show
                    columns     : 13, // number of tile columns to show
                    animType    : 'fadeInOut', // effects: random, fadeInOut, showHide, slideLeft, slideRight, slideTop, slideBottom, rotateLeft, rotateRight, rotateTop, rotateBottom, scale, rotate3d, rotateLeftScale, rotateTopScale
                    animSpeed   : 700, // ms seconds before next image switch (700 = 0.7 seconds)
                    interval    : 600,
                    step        : 1,
                    w320        : {
                        rows    : 3,
                        columns : 4
                    },
                    w240        : {
                        rows    : 3,
                        columns : 4
                    }
                } );
             
            });
        </script>

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:

?
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
<!-- DC iOS Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/ios/dc_ios.css" />
<!-- Define image urls in dc_ios.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 iOS Slider JS -->
<script type="text/javascript" src="dcodes/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="dc_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.

Read more
image01

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.

Read more
image01

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.

Read more
image01

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.

Read more
image01

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
<!-- DC Parallax Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/parallax/dc_parallax.css" />
 
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC Parallax Slider JS -->
<script type="text/javascript" src="dcodes/sliders/js/parallax/modernizr.custom.js"></script>
<script type="text/javascript" src="dcodes/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="dcodes/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="dcodes/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="dcodes/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="dcodes/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="dc_clear"></div> <!-- line break/clear line -->

Layered Slider

Loading images...
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)
  • Image Caption (optional)

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
<!-- DC Layered Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/css/layered/layered-slider.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 Layered Slider JS -->
<script type="text/javascript" src="dcodes/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="dcodes/sliders/images/layered/820x410-image.jpg" width="820" height="410" /></li> -->
      <li><img src="http://cdn.dcodes.net/p/820x410/dddddd" width="820" height="410" /></li>
      <li><img src="http://cdn.dcodes.net/p/820x410/cccccc" width="820" height="410" /></li>
      <li><img src="http://cdn.dcodes.net/p/820x410/999999" width="820" height="410" /></li>
      <li><img src="http://cdn.dcodes.net/p/820x410/666666" width="820" height="410" /></li>
      <li><img src="http://cdn.dcodes.net/p/820x410/333333" width="820" height="410" /></li>
      <li><img src="http://cdn.dcodes.net/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="dcodes/sliders/images/layered/thumbs/93x49-thumb.jpg" width="93" height="49" /></li> -->
      <li><img src="http://cdn.dcodes.net/p/93x49/dddddd" width="93" height="49" /></li>
      <li><img src="http://cdn.dcodes.net/p/93x49/cccccc" width="93" height="49" /></li>
      <li><img src="http://cdn.dcodes.net/p/93x49/999999" width="93" height="49" /></li>
      <li><img src="http://cdn.dcodes.net/p/93x49/666666" width="93" height="49" /></li>
      <li><img src="http://cdn.dcodes.net/p/93x49/333333" width="93" height="49" /></li>
      <li><img src="http://cdn.dcodes.net/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="dc_clear"></div> <!-- line break/clear line -->
  

MB Slider

Blue Shirt
details

Teal Shirt
details

Red Shirt
details

Black Shirt
details

White Shirt
details

Green Shirt
details

Light Blue Shirt
details

Yellow Shirt
details

Gray Suit
details

Black Suit
details

● ● ● ● ● ● ● ● ● ●

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
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
 
<!-- DC MB Slider JS -->
<script type="text/javascript" src="dcodes/sliders/js/mb/mb.js" charset="utf-8"></script>
<script type="text/javascript" src="dcodes/sliders/js/mb/mb-slider.js"></script>
 
<!-- DC MB Slider CSS -->
<link type="text/css" href="dcodes/sliders/css/mb/mb-slider.css" media="screen" charset="utf-8" rel="stylesheet"  />
 
<!-- PrettyPhoto Lightbox -->
<link rel="stylesheet" href="dcodes/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="dcodes/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
 
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 
 
<!-- DC MB Slider Starts -->
<div style="width:100%; margin:0 auto; padding:0px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div id="productshowcase-container">
   
  <!-- Slide Items -->
  <div id="slider-one">
    <div> <img src="dcodes/sliders/images/mb/img1.png" alt="" />
      <p>Blue Shirt<br />
        <a href="dcodes/sliders/images/mb/img1-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img2.png" alt="" />
      <p>Teal Shirt<br />
        <a href="dcodes/sliders/images/mb/img2-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img3.png" alt="" />
      <p>Red Shirt<br />
        <a href="dcodes/sliders/images/mb/img3-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img4.png" alt="" />
      <p>Black Shirt<br />
        <a href="dcodes/sliders/images/mb/img4-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img5.png" alt="" />
      <p>White Shirt<br />
        <a href="dcodes/sliders/images/mb/img5-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img6.png" alt="" />
      <p>Green Shirt<br />
        <a href="dcodes/sliders/images/mb/img6-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img7.png" alt="" />
      <p>Light Blue Shirt<br />
        <a href="dcodes/sliders/images/mb/img7-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img8.png" alt="" />
      <p>Yellow Shirt<br />
        <a href="dcodes/sliders/images/mb/img8-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img9.png" alt="" />
      <p>Gray Suit<br />
        <a href="dcodes/sliders/images/mb/img9-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
    <div> <img src="dcodes/sliders/images/mb/img10.png" alt="" />
      <p>Black Suit<br />
        <a href="dcodes/sliders/images/mb/img10-detail.png" rel="prettyPhoto[gallery1]" title="Description (optional)">details</a> </p>
    </div>
  </div>
  <!-- /Slide Items -->
   
</div> <!-- /mbslider-container -->
</div>
<!-- DC MB Slider Ends -->
 
<!-- required for prettyphoto lightbox -->
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'dark_square',slideshow:8000, autoplay_slideshow: false, social_tools: false, show_title: true, allow_resize: true});
  });
</script>
<!-- required for prettyphoto lightbox -->
 
<div class="dc_clear"></div> <!-- line break/clear line -->
  


© TemplateAccess