How to make auto slider ( banner ) with the easiest code using jquery and css ? with minimum codes ?

You can use fancybox or lightbox for banner slider in an easiest way and with loads of transition effects

With the help of bootstrap carousel, it will become very easy to draw auto slider.

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel2&stacked=h

<div id="slideshow"> <div> <img src="//farm6.static.flickr.com//_2bb7da9c_m.jpg"> </div> <div> <img src="//farm6.static.flickr.com//_ae4f_m.jpg"> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div> </div>

#slideshow { margin:px auto; position: relative; width:px; height:px; padding:px; box-shadow:px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top:px; left:px; right:px; bottom:px; }

$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut() .next() .fadeIn() .end() .appendTo('#slideshow'); },);

Its very easy and simple you can give that problem on google search. So you will find your solution with less of time. If you want to save your time then everything are available in Internet. Many types of Sliders you can possible your work easy. Such as wow slider, hi slider and so on.

this is very useful link u can lern from it 

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

You can use carousel along with css and jquery and instantiate JQuery Carousel $("selector").carousel();

• $("#slideshow > div:gt(0)").hide();setInterval(function(){$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');},3000);--jquery

#slideshow {margin: 55px auto;position: relative;width:245px;height:245px;padding:11px;box-shadow: 1 120px rgba(0,0,0,0.4);}#slideshow > div {position: absolute;top: 11px;left:11px;right:11px;bottom:11px;

--css }

www.geeksforgeeks.org

ucan go for this web site

First, create your slider :

<div id="slideshow"> <div> <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> </div> <div> You can also add some text. </div> </div>

Slides need to be absolutely positioned within the wrapper. Now do some CSS styling.

#slideshow { margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }

Run after DOM is ready.

JQuery:

$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000);

How to make auto slider ( banner ) with the easiest code Is the element :marquee