Image slider for web page, this is what most of them searching for make their static web site with more animation and attractive, that's why i'm going to make a small web slider with more animation effects. such as fold, slice, boxrain, fade, etc.. here i'm going to use novi slider jquery to make this image slider. this very flexiable and well supported image slider for all kind of web. let's try this image slider.
yeah, in this image slider makes the slider more effective and attractive. it has more animation effects. we can make it as single and multiple effects. let me explain the details about the code of image slider with animation effects.
CODE
<div class="container"> <div id="slider" class="nivoSlider"> <a href="http://www.2my4edge.com"> <img src="images/2.jpg" alt="" title="Sending my heart to you.." /> </a> <img src="images/3.jpg" alt="" title="World map :)" /> <img src="images/4.jpg" alt="" title="Boy with Joy.. :)" /> <img src="images/1.jpg" alt="" title="Robotic world" /> <img src="images/5.jpg" alt="" title="Touching of True love.." /> </div> </div>
as like the above just call the image with img tag, and the title will be comes as caption of the image.
SCRIPT
this is also comes in the same page. here we are going to use nivo.slider.pack.js.
SCRIPT
this is also comes in the same page. here we are going to use nivo.slider.pack.js.
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,boxRainGrowReverse,sliceDown' slices: 35, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 3500, // Slide transition speed pauseTime: 7000, // How long each slide will show 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: false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.9, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // 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>
you can get clear idea from what i have given in the comment line after the double slash, you can modify the above all as what you need.
CSS
here the css is also holding the main part with this image slider. you don't want change the css. if you want to mofity something as you need. you can change it.
CSS
here the css is also holding the main part with this image slider. you don't want change the css. if you want to mofity something as you need. you can change it.
* { margin:0px; padding:0px; } .container { width:900px; padding:5px; margin:0 auto; margin-top:50px; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; padding-top:10px; left:0px; top:0px; color:#efd0df; opacity:1; /* Overridden by captionOpacity setting */ height: 41px; width: 100%; font-size:20px; font-family: Tahoma, Geneva, sans-serif; font-weight: normal; z-index:8; } .nivo-caption p { padding:5px; padding-left: 30px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; color:#FFF; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { position:absolute; text-align:center; margin-left:360px; bottom:0px; } .nivo-controlNav a { position:relative; z-index:9; margin-left:10px; color:#999; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
that's it. enjoy. i hope this is very very useful to everyone.
RELATED POSTS:
How to create an animated .jpg image
Rotate image on hover using CSS3
Most popular posts in 2my4edge
Change text & background color while selecting text using CSS3
Marquee style in different manner with PHP and MySql
My Demos page design details with all my tutorials
Image Zoommer like E-commerce site using multizoom.js
Facebook style Scroll bar using Jquery
Change background image while page refresh using Javascript
Better and Flexible Tooltip using LiteTooltip.js
Ajax delete with PHP and MySql
RELATED POSTS:
How to create an animated .jpg image
Rotate image on hover using CSS3
Most popular posts in 2my4edge
Change text & background color while selecting text using CSS3
Marquee style in different manner with PHP and MySql
My Demos page design details with all my tutorials
Image Zoommer like E-commerce site using multizoom.js
Facebook style Scroll bar using Jquery
Change background image while page refresh using Javascript
Better and Flexible Tooltip using LiteTooltip.js
Ajax delete with PHP and MySql
Very Nice & Cool
ReplyDeletethanks boss.
ReplyDelete