Bootstrap Carousel với các mặt hàng năng động không trượt

Tôi đang sử dụng băng chuyền bootstrap chứng khoán:Bootstrap Carousel với các mặt hàng năng động không trượt

<div id="main-navigation-carousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active" data-id="0"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    </div> 
</div>

Bằng cách nhấp vào thẻ neo bên trong băng chuyền mới .item được tiêm vào .carousel-inner. Sau khi tiêm .item (hoạt động tốt) băng chuyền phải trượt đến số .item đó. Tuy nhiên, không có gì xảy ra.

<div id="main-navigation-carousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active" data-id="0"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    <div class="item" data-id="1"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    <div class="item" data-id="2"> 
     <ul> 
     <li><a></a></li> 
     .... 
     <li><a></a></li> 
     </ul> 
    </div> 
    </div> 
</div>

Ngay cả khi tôi sử dụng $("#main-navigation-carousel").carousel(1); trong bảng điều khiển trình duyệt, không có gì xảy ra. Nếu tôi thêm các mục ngay trong mã trên máy chủ thì mọi thứ đều hoạt động tốt.

Nguồn

2013-09-26 Andre Zimpel

không gian của bạn có giá trị? từ http://getbootstrap.com/javascript/#carousel: Lượng thời gian để trì hoãn giữa việc tự động đi xe đạp một mục. Nếu sai, băng chuyền sẽ không tự động xoay vòng. –

@BassJobsen naw. nó không nên tự động chu kỳ. nếu tôi sử dụng '$ (" # main-navigation-carousel "). carousel (1);' nó sẽ trượt tới mục tiếp theo. Nhưng tôi nghĩ rằng tôi đã tìm ra nó ngay bây giờ. Nếu tôi nhập '$ (" # main-navigation-carousel "). Carousel(). Data()' vào giao diện điều khiển trong trình duyệt, tôi có thể thấy băng chuyền chỉ có một mục. sai ('length: 1'). Tôi nghĩ rằng tôi cần phải làm mới các mục trên băng chuyền. Tôi chỉ cần tìm ra cách để làm điều này. –

cũng đặt 'chỉ số carousel' của bạn, xem: http://bootply.com/83370 –

Xóa dữ liệu băng chuyền và sau đó kích hoạt lại dữ liệu sẽ thực hiện công việc!

$("#main-navigation-carousel").carousel("pause").removeData(); 
$("#main-navigation-carousel").carousel(target_slide_index);

Vì băng chuyền không được tự động trượt, điều quan trọng là sử dụng .carousel("pause").removeData().

Nguồn

2013-09-26 14:02:13

điều này có vẻ như một hack, đây có phải là cách tốt nhất không? – Stephan

Trong trường hợp nào '.removeData();' có ý nghĩa? –

@BassJobsen Nếu bạn làm .carousel() trên phần tử của bạn băng chuyền lưu tất cả các mục trong đó. Khi tải, tôi chỉ có một mục. Nếu tôi thêm một cái khác bằng cách nhấp vào một neo, băng chuyền sẽ không biết mục đó. Đó là lý do tại sao tôi không thể trượt nó. Loại bỏ dữ liệu khỏi băng chuyền và khởi tạo nó mới bằng '.carousel (target_slide_index);' làm mới các mục cho băng chuyền. Điều này làm cho nó có thể trượt đến một mục mới được thêm vào. –

như trong http://bootply.com/83370 với băng chuyền của bạn có lớp .carousel

$('.carousel').carousel({interval:false}); 
$('.carousel-inner').append('<div class="item"><img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGklEQVR4nO3XIQEAMAzAsJmcfym/jIEGhJd2dvcBAADQM9cBAAAA3DCEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAg6gMgubGT543s8gAAAABJRU5ErkJggg==" alt="900x500"><div class="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div>'); 
$('.carousel-indicators li').removeClass('active'); 
$('.carousel-indicators').append('<li data-target="#carousel-example-captions" data-slide-to="1" class="active"></li>'); 
$('.carousel').carousel('next');

Nguồn

2013-09-27 06:50:30

Hãy thử điều này:

<!-- Carousel --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators" id="car_id"></ol> 
    <div class="carousel-inner" id="car_inner"></div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
</div><!-- /.carousel -->

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}] 
 
    var x = $.getJSON('../Json/GetImage', function (data) { 
 
     $("#myCarousel").carousel("pause").removeData(); 
 
     var content_indi = ""; 
 
     var content_inner = ""; 
 
     $.each(data, function (i, obj) { 
 
     content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>'; 
 
     content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>'; 
 
     }); 
 
     $('#car_id').html(content_indi); 
 
     $('#car_inner').html(content_inner); 
 
     $('#car_inner .item').first().addClass('active'); 
 
     $('#car_indi > li').first().addClass('active'); 
 
     $('#myCarousel').carousel(); 
 
    });

Nguồn

2015-05-04 13:52:57 bayu

Bạn cũng có thể thêm giải thích tại sao nó hoạt động không? – Robert

Xin chào @Robert: khi tải trang đầu tiên, khi Bootstrap tìm thấy ".carousel()", nó sẽ hiển thị đối tượng băng chuyền. Vì vậy, sự kiện "trượt" bị ràng buộc trên băng chuyền. Giải pháp này là "dừng" sự kiện "slide" đầu tiên, sau đó loại bỏ tất cả các đối tượng trong thùng chứa băng chuyền bằng cách sử dụng ($ ("# myCarousel"). Carousel ("pause"). RemoveData()), điền phần tử carousel rồi cuối cùng nói Bootstrap để render đối tượng carousel một lần nữa bằng cách sử dụng .carousel(); Btw .carousel (target_slide_index) là không cần thiết, trong thực tế, tôi đã nhận được một lỗi trong khi sử dụng nó. Tôi đang sử dụng Bootstrap 3 và .. xin lỗi vì tiếng Anh của tôi. – bayu

Hãy thử mã này:

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}] 
 
    var x = $.getJSON('../Json/GetImage', function (data) { 
 
     $("#myCarousel").carousel("pause").removeData(); 
 
     var content_indi = ""; 
 
     var content_inner = ""; 
 
     $.each(data, function (i, obj) { 
 
     content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>'; 
 
     content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>'; 
 
     }); 
 
     $('#car_id').html(content_indi); 
 
     $('#car_inner').html(content_inner); 
 
     $('#car_inner .item').first().addClass('active'); 
 
     $('#car_indi > li').first().addClass('active'); 
 
     $('#myCarousel').carousel(); 
 
    });

Nguồn

2016-06-28 12:09:35 Nupur

Bootstrap Carousel với các mặt hàng năng động không trượt

Trả lời

Các vấn đề liên quan