Подтвердить что ты не робот

Динамическая карусель twitter bootstrap

Я бы хотел использовать карусель для начальной загрузки, чтобы динамически прокручивать содержимое (например, результаты поиска). Таким образом, я не знаю, сколько страниц контента будет, и я не хочу получать следующую страницу, если пользователь не нажмет на следующую кнопку.

Я рассмотрел этот вопрос: Карусель с динамическим контентом, но я не думаю, что ответ применяется, поскольку он предлагает загрузить все содержимое (изображения в этом случае ) со стороны сервера БД и возвращает все как статический контент.

Мое лучшее предположение - перехватить событие click при нажатии кнопки, сделать вызов ajax для следующей страницы результатов поиска, динамически обновлять страницу при возврате вызова ajax, а затем генерировать событие слайда для карусели. Но ничто из этого не обсуждается и не документируется на страницах начальной загрузки. Любые идеи приветствуются.

4b9b3361

Ответ 1

Если вы (или кто-либо еще) по-прежнему ищете решение по этому вопросу, я поделюсь решением, которое я обнаружил для загрузки содержимого через AJAX в Bootstrap Carousel..

Решение оказалось немного сложным, так как нет возможности легко определить текущий слайд карусели. С некоторыми атрибутами данных я смог обработать событие .slid (как вы сказали), а затем загрузить контент из другого URL-адреса с помощью jQuery $.load()..

$('#myCarousel').carousel({
  interval:false // remove interval for manual sliding
});

// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();
    var url = $('.item.active').data('url');

    // ajax load from data-url
    $('.item').html("wait...");
    $('.item').load(url,function(result){
        $('#myCarousel').carousel(idx);  
    });

});

// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){    
    $('#myCarousel').carousel(0);
});

Demo on Bootply