Demo: http://wtsupport.10tr.net
Açıklama: Sitenize ekleyebileceğiniz güzel, başarılı ve basit bir slider..
Kurulum: HTML kodlarını Admin Paneli » Temalar&Şablonlar » Şablonlar » Anasayfa Şablonları » index içine, uygun yere yapıştırın.
Javascript kodu yine aynı yerdeki <head></head> kodları arasına ekleyin.
CSS kodlarını Admin Paneli » Temalar&Şablonlar » Temanız » Global.css » Gelişmiş Düzenleme kısmında girip en alta ekleyin..
» HTML KODLARI
» CSS KODLARI
» JAVASCRİPT KODU
» NOTLAR
1) CSS kodları arasında bulunan ve kısmından genişlik ve yükseklik ayarlabilirsiniz..
2) Eklediğiniz Resimlerin boyutlarının üstteki px değerleriyle düzgün olmasına dikkat edin.
3) Slidera daha fazla seçenek eklemek isterseniz HTML kodları arasındaki bir alanı <li></li> arasında kopyalayın ve yapıştırın.. Yani şu kısmı;
4) Sorularınızı konu altından belirtin..
Açıklama: Sitenize ekleyebileceğiniz güzel, başarılı ve basit bir slider..
Kurulum: HTML kodlarını Admin Paneli » Temalar&Şablonlar » Şablonlar » Anasayfa Şablonları » index içine, uygun yere yapıştırın.
Javascript kodu yine aynı yerdeki <head></head> kodları arasına ekleyin.
CSS kodlarını Admin Paneli » Temalar&Şablonlar » Temanız » Global.css » Gelişmiş Düzenleme kısmında girip en alta ekleyin..
» HTML KODLARI
Kod:
<section class="loading">
<div class="flexslider">
<ul class="slides">
<li><div><a href="http://wtsupport.10tr.net/showthread.php?tid=4122" rel="bookmark" target="_blank">08.03.2015 - Haftanın Android Paketi</a></div><a href="http://wtsupport.10tr.net/showthread.php?tid=4122" rel="bookmark" target="_blank"><img width="990" height="250" src="http://i1371.photobucket.com/albums/ag299/edwardmybb/wtsupport/8mart2015androidpaketi.png" alt="Android Paketi" /></a></li>
<li><div><a href="http://wtsupport.10tr.net/showthread.php?tid=4114" rel="bookmark" target="_blank">GTA: Chinatown Wars v1.01 [Money/Para Hack] APK + OBB</a></div><a href="http://wtsupport.10tr.net/showthread.php?tid=4114" rel="bookmark" target="_blank"><img width="990" height="250" src="http://i1371.photobucket.com/albums/ag299/edwardmybb/wtsupport/gta_chinatown_1.jpg" alt="GTA Chinatown War" /></a></li>
<li><div><a href="http://wtsupport.10tr.net/showthread.php?tid=4115" rel="bookmark" target="_blank">Nod 32 - ESET Smart Security Username Key [Update-Güncel]</a></div><a href="http://wtsupport.10tr.net/showthread.php?tid=4115" rel="bookmark" target="_blank"><img width="990" height="250" src="http://static1.esetstatic.com/fileadmin/Images/INT/Banners/Mainbanner-For_Home/EAV7.png" alt="Eset" /></a></li>
</ul>
</div>
</section>
<script defer src="http://st.10tl.net/tema/edward/site/slider/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('section').removeClass('loading');
}
});
});
</script>» CSS KODLARI
Kod:
.flexslider {margin:20px auto !important; padding: 0; opacity: 1; -webkit-transition: opacity 1s ease; width:990px;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
.flexslider ol,ul,li{margin:0; padding:0; list-style: none;}
.flexslider .slides img {width: 990px; height:250px; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.slides div{background-color:black; opacity:0.7; bottom:0px; padding:10px; position:absolute ;font:13px Tahoma; text-align:center; border-radius:0 5px 0 0;}
.slides div a{color:white; text-decoration:none;}
.no-js .slides > li:first-child {display: block;}
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(http://st.10tl.net/tema/edward/site/slider/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%;display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
}
.loading .flexslider {opacity: 0 !important;}
.loading:before{content: 'Dosyalar Yükleniyor'; display: block; margin: 100px 0 0; text-align: center; color: black; font-weight: bold; font-size: 30px; opacity: 0.3;}» JAVASCRİPT KODU
Kod:
<script src="http://st.10tl.net/tema/edward/site/slider/jquery.min.js"></script>» NOTLAR
1) CSS kodları arasında bulunan
Kod:
.flexslider {margin:20px auto !important; padding: 0; opacity: 1; -webkit-transition: opacity 1s ease; width:990px;}Kod:
.flexslider .slides img {width: 990px; height:250px; display: block;}2) Eklediğiniz Resimlerin boyutlarının üstteki px değerleriyle düzgün olmasına dikkat edin.
3) Slidera daha fazla seçenek eklemek isterseniz HTML kodları arasındaki bir alanı <li></li> arasında kopyalayın ve yapıştırın.. Yani şu kısmı;
Kod:
<li><div><a href="http://wtsupport.10tr.net/showthread.php?tid=4122" rel="bookmark" target="_blank">08.03.2015 - Haftanın Android Paketi</a></div><a href="http://wtsupport.10tr.net/showthread.php?tid=4122" rel="bookmark" target="_blank"><img width="990" height="250" src="http://i1371.photobucket.com/albums/ag299/edwardmybb/wtsupport/8mart2015androidpaketi.png" alt="Android Paketi" /></a></li>
