Bootstrap Karuzela z dynamicznymi przedmioty nie ślizgać

Używam akcji bootstrap karuzelę:Bootstrap Karuzela z dynamicznymi przedmioty nie ślizgać

<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>

Klikając znacznik zakotwiczenia wewnątrz karuzeli nowy .item jest wtryskiwany do .carousel-inner. Po wstrzyknięciu .item (która działa poprawnie) karuzela powinna przesuwać się do tego .item. Jednak nic się nie dzieje.

<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>

Nawet jeśli używam $("#main-navigation-carousel").carousel(1); w konsoli przeglądarka nic się nie dzieje. Jeśli dodaję elementy bezpośrednio do kodu na serwerze, wszystko działa dobrze.

Źródło

2013-09-26 Andre Zimpel

robi Twój przedział ma wartość? z http://getbootstrap.com/javascript/#carousel: Czas opóźnienia między automatycznym cyklowaniem przedmiotu. W przypadku wartości false karuzela nie będzie automatycznie cyklowana. –

@BassJobsen naw. to nie powinno się automatycznie przełączać. jeśli używam '$ (" # główną karuzelę nawigacji "). karuzela (1);' powinna przesuwać się do następnego elementu. Ale myślę, że już to rozgryzłem. Jeśli wprowadzę '$ (" # główną karuzelę nawigacji "), carousel(). Data()' do konsoli w przeglądarce Widzę, że karuzela ma tylko jeden przedmiot. która jest zła ('length: 1'). Myślę, że muszę odświeżyć elementy na karuzeli. Po prostu muszę wymyślić, jak to zrobić. –

również ustawić swoje 'wskaźniki karuzeli', zobacz: http://bootply.com/83370 –

Usuwanie danych karuzeli, a następnie ponowne wywoływanie wykonuje zadanie!

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

Ponieważ auto karuzela nie powinno przesunąć ważne jest, aby używać .carousel("pause").removeData().

Źródło

2013-09-26 14:02:13

to wydaje się jak hack, jest to najlepszy sposób? – Stephan

W jakiej sytuacji ".removeData();" ma sens? –

@BassJobsen Jeśli zrobisz .carousel() na twoim elemencie, karuzela zapisze wszystkie zawarte w nim elementy. Na ładunek miałem tylko jeden przedmiot. Jeśli dodaję kolejny, klikając zakotwiczenie, karuzela nie jest świadoma tego elementu. Dlatego nie mogłem się do tego przyzwyczaić. Usunięcie danych z karuzeli i zainicjowanie nowego przez '.carousel (target_slide_index);' odświeża elementy dla karuzeli. Umożliwia to przesunięcie do nowo dodanego elementu. –

jak w http://bootply.com/83370 ze swoimi karuzela posiadające klasę .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');

Źródło

2013-09-27 06:50:30

Spróbuj tego:

<!-- 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(); 
 
    });

Źródło

2015-05-04 13:52:57 bayu

Czy możesz również dodać wyjaśnienie, dlaczego to działa? – Robert

Hi @Robert: przy ładowaniu pierwszej strony, gdy Bootstrap znajduje ".carousel()", renderuje obiekt karuzeli. Tak więc zdarzenie "slide" jest powiązane z karuzelą. To rozwiązanie polega na "zatrzymaniu" "zdarzenia slajdu", a następnie usunięciu całego obiektu w kontenerze karuzelowym za pomocą ($ ("# myCarousel") karuzela ("pauza"). RemoveData()), wypełnij element karuzeli, a następnie powiedz Bootstrap do ponownego renderowania obiektu karuzeli za pomocą .carousel(); Btw .carousel (target_slide_index) nie jest konieczne, w rzeczywistości dostałem błąd podczas korzystania z niego. Używam Bootstrap 3 i .. przepraszam za mój angielski. – bayu

Spróbuj kod:

//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(); 
 
    });

Źródło

2016-06-28 12:09:35 Nupur

Bootstrap Karuzela z dynamicznymi przedmioty nie ślizgać

Odpowiedz

Powiązane problemy