Css 3D dönüşümler ve geçişler ile yapılmış responsive jQuery slider uygulaması. Alex Dunphy tarafından yapılmış olan RefineSlide ile web sitenizin en üstüne değişik değişik geçiş efektleti ile süslenmiş bir manşet alanı hazırlayabilirsiniz. Daha önceden RefineSlide uygulamasını başka bir başlık altında yayınlamıştım ancak aradan geçen zaman içinde demo ve download adresleri tamamen silinmişti. Neyseki biraz araştırma sonucu Github üzerinden kullanılabilir başka bir linkini bulabildim. Demo sayfası olmadığı için kendi sunucuma yüklemek zorunda kaldım diğer silinmiş bütün eklentiler gibi. Bu yüzden eski yazıyı da değiştirmek zorunda kaldım.
Css geçiş efektleri :
Fade, Random, Slice horizontal, Slice vertical, Slide horizontal, Slide vertical, Scale, Fan, Block scale, Kaleidoscope, Blind horizontal, Blind, Vertical, Cube horizontal, Cube vertical
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve Css dosya adresleri :
<script src="assets/js/jquery.js"></script> <script src="../jquery.refineslide.min.js"></script> <link rel="stylesheet" href="../refineslide.css" /> <link rel="stylesheet" href="assets/css/refineslide-theme-dark.css" />
JavaScript :
<script>
$(document).ready(function () {
$('.rs-slider').refineSlide();
});
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul class="rs-slider">
<li><img src="assets/img/greenbut.jpg" alt="" /></li>
<li><img src="assets/img/red.jpg" alt="" /></li>
<li><img src="assets/img/wood6.jpg" alt="" /></li>
</ul>
