Thứ Sáu, 10 tháng 3, 2017

Share CODE SlideShow Ảnh jquery Reponsive BiluTV Đẹp Nhanh Mượt

Đêm khuya ngồi Đập Muỗi nhớ đến bữa trước có dùng ké SlideShow trình diễn ảnh của BiluTV nên hôm nay muốn chia sẻ cho anh em nào làm web Phim có thể dùng.

Không chỉ riêng web phim slideshow ảnh này tương thích với hầu hết các trang web. DEMO thì các bạn biết xem ở đâu rồi chứ.



ƯU ĐIỂM
  • Reponsive hỗ trợ nhiều trình duyệt từ di động tới PC
  • Hỗ trợ touch cho phép cảm ứng lướt qua lại
  • Có chế độ lazyload (load ảnh sau)
  • Giao diện đẹp, thân thiện
NHƯỢC ĐIỂM
  • Dùng ké của BiluTV nên bên đó có biến thì bên mình cũng có biến
  • Chưa tích hợp auto label cho blogspot (sẽ có sớm)

Các bạn sử dụng đoạn CODE bên dưới

Mình gộp chung luôn cho tiện
Bạn nào muốn nghiên cứu thì về tách ra sau

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script src='http://media.bilutv.com/js/owl.carousel.min.js'/>
<link href='http://media.bilutv.com/css/owl.carousel.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
#top-slide{width:660px;height:220px;overflow:hidden;margin:10px 10px 0 10px}
#top-slide li img{width:660px;height:220px}
ul,span,p,div{margin:0;padding:0}li{list-style:none}#top-slide .owl-pagination{position:absolute;bottom:10px;right:10px}.owl-theme .owl-controls .owl-page span{background:#ffffff;opacity:0.8}.owl-pagination .owl-page.active span{background:#a21d0a}.owl-theme .owl-controls{margin:0}#top-slide .owl-controls i.fa,.film-slide .owl-controls i.fa{font-size:30px;color:#ffffff}.owl-theme .owl-controls .owl-buttons div{background:rgba(0,0,0,0.7)}#top-slide .owl-controls .owl-next,#top-slide .owl-controls .owl-prev,.film-slide .owl-controls .owl-next,.film-slide .owl-controls .owl-prev{position:absolute;top:50%;z-index:2;opacity:0.9;margin:-30px 5px 0 5px;width:16px}.owl-theme .owl-controls .owl-buttons div{margin-top:-19px}#top-slide .owl-controls .owl-prev,.film-slide .owl-controls .owl-prev{left:0}#top-slide .owl-controls .owl-next,.film-slide .owl-controls .owl-next{right:0}#film_realted.film-slide .owl-controls .owl-next{right:0}
</style>

<ul id='top-slide'>
<li><a href='http://phim14.me/2017/02/phim-tam-sinh-tam-the-thap-ly-dao-hoa.html' title='PHIM TAM SINH TAM THẾ THẬP LÝ ĐÀO HOA VIETSUB FULL HD '><img alt='PHIM TAM SINH TAM THẾ THẬP LÝ ĐÀO HOA VIETSUB FULL HD ' class='lazyOwl' data-src='https://lh4.googleusercontent.com/-97EpFk_cGq0/WJc6P0KuTMI/AAAAAAAAEek/Inlh9U5y8-INbeYcC41xK7oK_V9q5xlNQCLcB/s1600/thumbnail.png'/></a></li>
<li><a href='http://phim14.me/2017/01/tv-show-running-man-sbs-han-quoc.html' title='TV SHOW RUNNING MAN - SBS - HÀN QUỐC VIETSUB FULL HD '><img alt='TV SHOW RUNNING MAN - SBS - HÀN QUỐC VIETSUB FULL HD ' class='lazyOwl' data-src='https://lh4.googleusercontent.com/-QIaxDhfJoUI/WGpykme_x0I/AAAAAAAAEUk/BS3jgNnmcM4dnvR_ekpF6jYeUZ1akwjLwCLcB/s1600/thumbnail.png'/></a></li>
<li><a href='http://phim14.me/2017/02/phim-co-gai-manh-me-do-bong-soo-2017.html' title='PHIM CÔ GÁI MẠNH MẼ DO BONG SOO'><img alt='PHIM CÔ GÁI MẠNH MẼ DO BONG SOO' class='lazyOwl' data-src='https://lh4.googleusercontent.com/-uaQFhzzgQl0/WJwToUZITPI/AAAAAAAAEhA/222PxKWNc8wTPG9vyjEMQJQNDfsHMIHUgCLcB/s1600/thumbnail.png'/></a></li>
<li><a href='http://phim14.me/2017/02/phim-ngay-mai-ben-em-han-quoc.html' title='PHIM NGÀY MAI BÊN EM - TOMORROW WITH YOU HÀN QUỐC '><img alt='PHIM NGÀY MAI BÊN EM - TOMORROW WITH YOU HÀN QUỐC ' class='lazyOwl' data-src='https://lh4.googleusercontent.com/-n3RkWQPODRM/WJftSJrmteI/AAAAAAAAEe0/bzo4FTea8XQ5WICIovzwJ7rdTDC5AB2nACLcB/s1600/thumbnail.png'/></a></li>
<li><a href='http://phim14.me/2017/01/phim-co-phuong-bat-tu-thuong.html' title='PHIM CÔ PHƯƠNG BẤT TỰ THƯỞNG – GENERAL AND I'><img alt='PHIM CÔ PHƯƠNG BẤT TỰ THƯỞNG – GENERAL AND I' class='lazyOwl' data-src='https://lh4.googleusercontent.com/-XDK-N3WGBdc/WJwb4q39RZI/AAAAAAAAEhQ/I0EiY7pyFIYa8byxDJUHaZeBNbKOGDeKACLcB/s1600/thumbnail.png'/></a></li>
</ul>

<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
  //Top slide aaa
  $("#top-slide").owlCarousel({
   singleItem:true,
   autoPlay:true,
   slideSpeed:200,
   lazyLoad : true,
   stopOnHover:true,
            navigation : true,
            navigationText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
  });
//Lazyload image
$("img.lazy").lazyload({
effect : "fadeIn"
});
 });
//]]>
</script>


Các bạn thay ở trong phần <li>Ở ĐÂY</li> thay lại link cũng như link ảnh
Lưu Ý ảnh nên để kích thước giống nhau 
Phần màu đỏ trong CSS các bạn chỉnh lại theo kích thước mong muốn

Mọi thắc mắc vui lòng để lại comments