ოთხი სახის სლაიდერი 2024-05-19 |
გთავაზობთ სლაიდერის ოთხ ვარიანტს რომლებსაც გააჩნია ძალიან ლამაზის გადასვლის ეფექტი და გაფორმების სტილი ნახეთ ნიმუში Code <script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent"> <div class="preload"><div></div></div> <!------------------------------------- THE CONTENT -------------------------------------------------> <div class="lof-main-wapper"> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3> <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3> <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div></div> <!--------------------------------------------------------------------------------------> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li> <div> <img src="http://esezo.com/she/skr/001/147/11.jpg" /> <h3> NewsFlash 1 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/22.jpg" /> <h3> NewsFlash 2 </h3> <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/33.jpg" /> <h3> NewsFlash 3 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/44.jpg" /> <h3> NewsFlash 4</h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> </ul> </div> </div> <script type="text/javascript"> var _lofmain = $('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent( _lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800}, interval:3000, direction:'opacity' } ); object.start( true, _lofmain.getElement('.preload') ); </script> Code <script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent lof-snleft"> <div class="preload"><div></div></div> <!------------------------------------- THE CONTENT -------------------------------------------------> <div class="lof-main-wapper"> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3> <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3> <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div></div> <!--------------------------------------------------------------------------------------> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li> <div> <img src="http://esezo.com/she/skr/001/147/11.jpg" /> <h3> NewsFlash 1 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/22.jpg" /> <h3> NewsFlash 2 </h3> <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/33.jpg" /> <h3> NewsFlash 3 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/44.jpg" /> <h3> NewsFlash 4</h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> </ul> </div> </div> <script type="text/javascript"> var _lofmain = $('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent( _lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800}, interval:3000, direction:'vrdown' } ); object.start( true, _lofmain.getElement('.preload') ); </script> Code <script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent lof-descleft"> <div class="preload"><div></div></div> <!------------------------------------- THE CONTENT -------------------------------------------------> <div class="lof-main-wapper"> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3> <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3> <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div></div> <!--------------------------------------------------------------------------------------> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li> <div> <img src="http://esezo.com/she/skr/001/147/11.jpg" /> <h3> NewsFlash 1 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/22.jpg" /> <h3> NewsFlash 2 </h3> <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/33.jpg" /> <h3> NewsFlash 3 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/44.jpg" /> <h3> NewsFlash 4</h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> </ul> </div> </div> <script type="text/javascript"> var _lofmain = $('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent( _lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800}, interval:3000, direction:'opacity' } ).start( true, _lofmain.getElement('.preload') ); </script> Code <script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent"> <div class="preload"><div></div></div> <!------------------------------------- THE CONTENT -------------------------------------------------> <div class="lof-main-wapper"> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3> <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3> <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div> <div class="lof-main-item"> <img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900"> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p> </div> </div> </div> <!--------------------------------------------------------------------------------------> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li> <div> <img src="http://esezo.com/she/skr/001/147/11.jpg" /> <h3> NewsFlash 1 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/22.jpg" /> <h3> NewsFlash 2 </h3> <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/33.jpg" /> <h3> NewsFlash 3 </h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> <li> <div> <img src="http://esezo.com/she/skr/001/147/44.jpg" /> <h3> NewsFlash 4</h3> <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. </div> </li> </ul> </div> </div> <script type="text/javascript"> var _lofmain = $('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent( _lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800}, interval:3000, direction :'hrleft' } ); object.start( true, _lofmain.getElement('.preload') ); </script> |
სულ კომენტარები: 2 | |