Simple Auto-Playing Slideshow

simple-auto-playing-slideshow
simple-auto-playing-slideshow

 


< Select Language

Marathi

HTML

“slideshow” चा नावाचा DIV ID बनवा . आणि खालील दिल्या प्रमाणे फोटो त्यात add करा.


<div id="slideshow">
   <div>
     <img src="image/1.jpeg">
   </div>
   <div>
       <img src="image/2.jpeg">
   </div>
   <div>
       <img src="image/3.jpg">
   </div>
</div>


CSS

Slides ला css ची गरज लागेल त्यांची position व्यवस्थित बसवण्यासाठी खालील दिल्या प्रमाणे stylesheet मध्ये css  add  करा.


#slideshow { 
    margin: 50px auto; 
    width: 650px; 
    height: 426px; 
	overflow:hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow div img {
	width:100%;
	height:auto;
	float:left;
	}


jQuery JavaScript

animation साठी तुम्हाला script लिहावी लागेल. त्या साठी खालील दिल्या प्रमाणे script हि तुमच्या webpage मध्ये add  करा.


$("#slideshow > div:gt(0)").hide();

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

 

English

HTML

Wrapper with div’s as the “slides”, which can contain any content.


<div id="slideshow">
   <div>
     <img src="image/1.jpeg">
   </div>
   <div>
       <img src="image/2.jpeg">
   </div>
   <div>
       <img src="image/3.jpg">
   </div>
</div>


CSS

Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:


#slideshow { 
    margin: 50px auto; 
    width: 650px; 
    height: 426px; 
	overflow:hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow div img {
	width:100%;
	height:auto;
	float:left;
	}


jQuery JavaScript


$("#slideshow > div:gt(0)").hide();

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