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 | <!-- DC Media Slider CSS --> < link rel = "stylesheet" type = "text/css" media = "all" href = "dcodes/sliders/media-slider/css/jquery.mediaslider.0.3.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 Media Slider JS --> < script src = "dcodes/sliders/media-slider/js/jquery.timers-1.2.js" type = "text/javascript" ></ script > < script src = "dcodes/sliders/media-slider/js/jquery.mediaslider.0.3.min.js" type = "text/javascript" ></ script > <!-- DC Media Slider Settings --> < script type = "text/javascript" > $(document).ready(function() { $(".media-carousel").dualSlider({ auto:true, // auto play slides autoDelay: 4000, // time before next slide (4000 = 4 seconds) easingCarousel: "swing", // slide effect easingDetails: "easeOutBack", durationCarousel: 800, durationDetails: 500 }); }); </ script > <!-- DC Media Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "media-carousel clearfix" > < div class = "panel" > < div class = "details_wrapper" > < div class = "details" > <!-- Slide 1 --> < div class = "detail" > < h2 >< a href = "#" >Media Slider</ a > supports:</ h2 > YouTube, Vimeo, Flash, Images, Inline Content & more!< br />< br /> < a href = "#" title = "Read more" class = "more" >Read more</ a > </ div > <!-- Slide 2 --> < div class = "detail" > < h2 >< a href = "#" >Vimeo</ a > Supported.</ h2 > This caption is completely customizable.< br />< br /> < a href = "#" title = "Read more" class = "more" >Read more</ a > </ div > <!-- Slide 3 --> < div class = "detail" > < h2 >< a href = "#" >YouTube</ a >: Supported.</ h2 > Embed videos in seconds!< br />< br /> < a href = "#" title = "Read more" class = "more" >Read more</ a > </ div > </ div > <!-- /details --> </ div > <!-- /details_wrapper --> < div class = "paging" > < div id = "numbers" ></ div > < a href = "javascript:void(0);" class = "previous" title = "Previous" >Previous</ a > < a href = "javascript:void(0);" class = "next" title = "Next" >Next</ a > </ div > <!-- /paging --> < a href = "javascript:void(0);" class = "play" title = "Turn on autoplay" >Play</ a > < a href = "javascript:void(0);" class = "pause" title = "Turn off autoplay" >Pause</ a > </ div > <!-- /panel --> < div class = "backgrounds" > < div class = "item item_1" > < img src = "dcodes/sliders/media-slider/images/banner1.jpg" width = "704" height = "341" /> </ div > <!-- /item --> < div class = "item item_2" > < iframe src = "http://player.vimeo.com/video/4749536?color=ffffff" width = "704" height = "340" frameborder = "0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></ iframe > </ div > <!-- /item --> < div class = "item item_3" > < iframe width = "704" height = "340" src = "http://www.youtube.com/embed/FG0fTKAqZ5g?rel=0" frameborder = "0" allowfullscreen></ iframe > </ div > <!-- /item --> </ div > <!-- /backgrounds --> </ div > <!-- /media-carousel --> </ div > <!-- DC Media Slider Ends --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |