Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo thư viện hình bằng Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo thư viện hình bằng Bootstrap

Bước 1: Tạo cấu trúc HTML

 
  
   
    
    Hướng dẫn cách tạo thư viện hình bằng Bootstrap

Bước 2: Định dạng CSS

.hide-bullets {	
list-style:none;	
margin-left: -40px;	
margin-top:10px;
}

.thumbnail {	
padding: 0;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {	
width: 100%;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Bước 5: Gọi thư viện hiệu ứng Slide bằng JQUERY

jQuery(document).ready(function($) {         
$('#myCarousel').carousel({                
interval: 3000        
});        
$('[id^=carousel-selector-]').click(function () {        
var id_selector = $(this).attr("id");        
try {            
var id = /-(d+)$/.exec(id_selector)[1];            
console.log(id_selector, id);            
jQuery('#myCarousel').carousel(parseInt(id));        
} catch (e) {            
console.log('Regex failed!', e);        
}    });        
$('#myCarousel').on('slid.bs.carousel', function (e) {                 
var id = $('.item.active').data('slide-number');                
$('#carousel-text').html($('#slide-content-'+id).html());        
});
});

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất