Tạo slide ảnh đơn giản cho website

Hôm nay yeusharevip blogger xin Share với các bác thủ thuật mới
đây có thể nói là silde rất dễ làm chỉ vài dòng code là có ngay 1 slide đơn giản nhưng hiệu ứng thì rất đẹp :

B1 :phần script 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
/*! tCycle (c) 2013 M.Alsup MIT/GPL 20131130 */
(function($){
"use strict";
$.fn.tcycle = function(){
return this.each(function(){
    var i=0, c=$(this), s=c.children(), o=$.extend({speed:500,timeout:4000},c.data()), f=o.fx!='scroll',
        l=s.length, w=c.width(), z=o.speed, t=o.timeout, css={overflow:'hidden'}, p='position', a='absolute',
        tfn=function(){setTimeout(tx,t);}, scss = $.extend({position:a,top:0}, f?{left:0}:{left:w}, o.scss);
    if (c.css(p)=='static')
        css[p]='relative';
    c.prepend($(s[0]).clone().css('visibility','hidden')).css(css);
    s.css(scss);
    if(f)
        s.hide().eq(0).show();
    else
        s.eq(0).css('left',0);
    setTimeout(tx,t);

    function tx(){
        var n = i==(l-1) ? 0 : (i+1), w=c.width(), a=$(s[i]), b=$(s[n]);
        if (f){
            a.fadeOut(z);
            b.fadeIn(z,tfn);
        }else{
            a.animate({left:-w},z,function(){
                a.hide();
            });
            b.css({'left':w,display:'block'}).animate({left:0},z,tfn);
        }
        i = i==(l-1) ? 0 : (i+1);
    }
});

};
$(function(){$('.tcycle').tcycle();});
})(jQuery);
</script>

B2 Phần html
Hiệu ứng 1 :

<div class="tcycle" id="sli"  data-speed="2000" style="height: 500px; background-size: 100% 100%;">
<img src="http://reserve.louie.land/Wallpapers/The%20Avengers/Hydra%20-%20Desktop.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_gPt9oERETM95GVdCjsLdP2lGsNSBjlMLVaJYRi5JBjc2L0pi1JFkVhKme0COlsImBtBHl_wxFekmvLAP1ieWozihcT4LbCvhfaBHf03zgM0BaN6KqqVXCzk6MPcK6Q3mAZRXHAr6dA-/s1600/Green-Leaf-Beautiful-Nature.jpg" />
</div>

Hiệu ứng 2

<div class="tcycle" id="sli" data-fx="scroll" data-speed="2000" style="height: 500px; background-size: 100% 100%;">
 <img src="http://reserve.louie.land/Wallpapers/The%20Avengers/Hydra%20-%20Desktop.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_gPt9oERETM95GVdCjsLdP2lGsNSBjlMLVaJYRi5JBjc2L0pi1JFkVhKme0COlsImBtBHl_wxFekmvLAP1ieWozihcT4LbCvhfaBHf03zgM0BaN6KqqVXCzk6MPcK6Q3mAZRXHAr6dA-/s1600/Green-Leaf-Beautiful-Nature.jpg" />
</div>

data-speed - nhìn là biết tốc độ
tham số data-fix là tham số  hiệu ứng :
demo test luôn tại đây copy paste để kiểm tra 

Nếu có thắc mắc, hãy để lại comment phía dưới nhé, quản trị viên của yeusharevip blogger sẵn sàng trợ giúp bạn
chúc các bác thành công!!