Sitenizde arka plan resmi yerine kullanabileceğiniz tam sayfa slider.
|
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 |
<style type="text/css"> body{margin: 0} #preloader{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:9999} #status{width:200px;height:200px;position:absolute;left:50%;top:50%;background-image:url(../images/preload.gif);background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px} #maximage{display:none;position:absolute!important;background:#000} div.mc-image{-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center center;background-repeat:no-repeat;height:100%;overflow:hidden;width:100%} #arrow_left{top:50%;height:72px;position:absolute;margin-top:-36px;opacity:.6;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;left:10px;width:36px;z-index:1000} #arrow_right{top:50%;height:72px;position:absolute;margin-top:-36px;opacity:.6;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;right:10px;width:36px;z-index:1000} #arrow_left:hover,#arrow_right:hover,#arrow_left:active,#arrow_right:active{opacity:1} </style> <div id="preloader"> <div id="status"> </div> </div> <div id="home"> <a href="" id="arrow_left"><img src="images/arrow_left.png" alt="Slide Left" /></a> <a href="" id="arrow_right"><img src="images/arrow_right.png" alt="Slide Right" /></a> <div id="maximage"> <img src="http://ivang-design.com/magician/images/slider/1.jpg" alt=""/> <img src="http://ivang-design.com/magician/images/slider/2.jpg" alt=""/> <img src="http://ivang-design.com/magician/images/slider/3.jpg" alt=""/> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="http://ivang-design.com/magician/js/template.js"></script> <script type="text/javascript" src="http://ivang-design.com/magician/js/jquery.maximage.js"></script> |
AdBlock veya WindScribe tarzı bir reklam engelleyici kullandığınız için kodları göremiyorsunuz, https://oguzturk.net için reklam engelleyicileri kapatarak veya izin vererek kodları görüntüleyebilirsiniz.
Css ve JS dosyaları ile birlikte indirmek isteyenler için:
https://oguzturk.net/lab/slider_tam_sayfa.rar
1 5/5
teşekkürler