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 | <!-- DC Coin Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/coin-slider/coin-slider-styles.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Coin Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/coin-slider/coin-slider.min.js" ></ script > <!-- DC Coin Slider Settings --> < script type = "text/javascript" > $(function() { $('#coin-slider').coinslider({ width: 980, // width of slider panel in pixels height: 400, // height of slider panel in pixels navigation: true, // prev next and buttons spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms (3000 = 3 seconds) sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: 'random', // random, swirl, rain, straight hoverPause: true // pause on hover }); }); </ script > <!-- DC Coin Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "sliderContainer" > < div id = "coin-slider" > <!-- sample local image: <a href="#"><img src="dcodes/sliders/images/coin-slider/add-images-here.jpg" width="980" height="400" /> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a> --> < a href = "#" >< img src = "http://cdn.dcodes.net/p/980x400/ccc" width = "980" height = "400" /> < span >You must be the change you wish to see in the world - Gandhi</ span ></ a > < a href = "#" >< img src = "http://cdn.dcodes.net/p/980x400/666" width = "980" height = "400" /> < span >To conquer oneself is a greater task than conquering others - The Buddha</ span ></ a > < a href = "#" >< img src = "http://cdn.dcodes.net/p/980x400/333" width = "980" height = "400" /> < span >What you do not want done to yourself, do not do to others - Confucius</ span ></ a > </ div > < div class = "dc_clear" ></ div > <!-- line break/clear line --> </ div > </ div > <!-- DC Coin Slider End --> |