Hướng dẫn tạo slider ảnh có responsive đẹp load nhanh nhẹ

Hướng dẫn tạo slider ảnh có responsive đẹp load nhanh nhẹ

Đây là một phản ứng jQuery hình ảnh thanh trượt. thanh trượt đơn giản nhưng tuyệt vời này được phát triển bởi woothemes.com. Nó có một số tính năng thật sự rất đẹp có thể làm bạn thích nó.
Các tính năng thú vị nhất là nó là cực kỳ nhạy và nhẹ; bạn không cần phải căng thẳng về thanh trượt chiều rộng / chiều cao thậm chí tất cả các hình ảnh chiều rộng và chiều cao điều chỉnh tự động. Ở đây nó được tùy biến cho blogger / blogspot vì vậy bạn chỉ có thể sao chép và dán mã để cài đặt trên blog của blogger của bạn.

Cách làm:

Đăng nhập => Bố cục => Tạo một tiện ích HTML/Javacript => Paste đoạn code sau:<!-- SLIDER CSS -->
<style type='text/css'>
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus{outline:none}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none}
.flexslider li{border:0 none!important;padding:0!important;text-indent:0!important;margin-bottom:0!important}
.flexslider{margin:0;padding:0}
.flexslider .slides &gt; li{display:none;-webkit-backface-visibility:hidden}
#flex-isfb{overflow:hidden;position:relative;min-height:200px;padding:3px}
.flexslider .slides img{width:100%;display:block}
.flexslider .slides,.flexslider .slides img,.flex-direction-nav{margin:0!important;padding:0!important}
.flex-pauseplay span{text-transform:capitalize}
.slides:after{content:&quot;\0020&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .slides{display:block}
* html .slides{height:1%}
.no-js .slides &gt; li:first-child{display:block}
.flexslider{margin:0 0 60px;background:#fff;border:4px solid #fff;position:relative;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;-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);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;-o-transition:all 1s ease;transition:all 1s ease}
.loading .flex-viewport{max-height:380px}
.flexslider .slides{zoom:1}
.carousel li{margin-right:5px}
.flex-direction-nav{*height:0}
.flex-direction-nav a{text-decoration:none;display:block;width:40px;height:45px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,0.8);text-shadow:1px 1px 0 rgba(255,255,255,0.3);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.flex-direction-nav .flex-prev{background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxzR3Ns92upnmQ8bDTYnbfXXFU7RFdxfnQSJy7wJ4d9MpWC7xAJIh6wCYIVUmjj5eMFK1qM-Gw_KKMgsku5eQwYlVeBXDCx9ydNcU8lOqxY1f785pSLSWVpIXKWoGtWdCa3dQ7gdprjSH/s1600/arrows1.png&quot;) no-repeat scroll -15px -92px transparent;left:-50px}
.flex-direction-nav .flex-next{background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxzR3Ns92upnmQ8bDTYnbfXXFU7RFdxfnQSJy7wJ4d9MpWC7xAJIh6wCYIVUmjj5eMFK1qM-Gw_KKMgsku5eQwYlVeBXDCx9ydNcU8lOqxY1f785pSLSWVpIXKWoGtWdCa3dQ7gdprjSH/s1600/arrows1.png&quot;) no-repeat scroll -15px -15px transparent;right:-50px;text-align:right}
.flexslider:hover .flex-prev{opacity:0.5;left:10px}
.flexslider:hover .flex-next{opacity:0.5;right:10px}
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:0.9}
.flex-pauseplay a{display:block;width:20px;height:20px;position:absolute;bottom:5px;left:10px;opacity:0.8;z-index:10;overflow:hidden;cursor:pointer;color:#000}
.flex-pauseplay a:before{font-family:&quot;flexslider-icon&quot;;font-size:20px;display:inline-block;content:&#39;\f004&#39;}
.flex-pauseplay a:hover{opacity:1}
.flex-pauseplay a.flex-play:before{content:&#39;\f003&#39;}
.flex-control-nav{width:100%;position:absolute;bottom:-40px;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;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);-o-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);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:10px}.flex-direction-nav .flex-next{opacity:1;right:10px}}

</style>
<!-- SLIDER HTML -->
<div id='flex-isfb'>
    <!-- Preloader -->
    <div id='preloader'/>
    <style>
#preloader{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999999999}
    </style>
    <div class='flexslider'>
<ul class='slides'>
<li><a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvi3y7lrAK3wc5WP5FKiDRFZW1OnLgIQ9NNPNvl1P9QivOraevCMZDluyBV3_jfLq4OXkGiybq0qFAi2kz13KZzI1OaxDsnWE94UMK0Inc6oOhEy_W_rGQMb8PDQrhDBDgtFGcXE35PcM/s1600/banner2.jpg'/> </a></li>
<li><a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPOKZ_2KHJ_BRbehJJ2tjjog_Vkaz-CdIXB4wXb_kKO5FOvGaxGj4851i05L9wzOz-I2LUcYbEvkUa2GbyPbx6UFdJN3NFkrNm1twNAJLBwKvHkWwnH0Ewti37qvR9qAIoO8d-ctnJHNM/s1600/baner.png'/> </a></li>
<li><a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg47nSRky-KNytMcjLX_WGqPq_iVku0xS3FT_7ycQh21GEDorDrT8GRmpCQgQZLr5zJBJ2gHh-qNSfMDC-ejrXz0H28cs4c6zhyphenhyphenn6kySO58hK2oG7HQOvQIjtGc9V06dXHF2mKv9PO20WM/s1600/2.jpg'/> </a></li>
<li><a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvNOsvotwZOSVuJVLRgrP6X4NUwOIzSH7unDOBHtRYgbjqfyfUnjuurx7v5JCxfCzwWitKnamWOUi8BXO6TBJFc8YomjQ1Vlp_w8NNaaKytfaW53HOL50zhmYLnS-FJcyCmx9QFV56T4/s1600/2811-banner-trang-chu-thang-6-1.jpg'/> </a></li>
</ul>
</div>
</div>
<!-- SLIDER JS -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script src='http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js'/>
<script type='text/javascript'>
$(window).load(function() {
    $(&#39;.flexslider&#39;).flexslider({
        animation: &quot;slide&quot;,
        controlNav: true,
        directionNav: true,
        easing: &quot;swing&quot;,
        slideshowSpeed: 3000,
        animationSpeed: 600,
    });
});
</script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow');
    })
    //]]>
</script>
<div style='clear: both;'/>width: 95%;
}CHÚ THÍCH:
Quên về chiều rộng và chiều cao trượt, nó sẽ điều chỉnh tự động.
Thay thế hình ảnh trượt (tìm kiếm <img src) với những hình ảnh đã tải lên của bạn (Bạn có thể tải lên hình ảnh trên blogspot, Flickr, vv)
Chúc bạn thành công

Tweet