Türlü türlü efektleri olan slider uygulaması – RefineSlide

Türlü 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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-09-19 tarihinde yayınlandı,Toplam 1369 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...