Бутстрап-карусель с надписями и миниатюрами

Question

Я использую фрагмент загрузочного бутстра, чтобы сделать слайдер карусели, который имеет миниатюры и надписи.

То есть из http://bootsnipp.com/snippets/featured/carousel-extended-320-compatible

Я попытался сделать еще одну карусель на той же странице с изменением JavaScript. [http://jsfiddle.net/djotpxgb/][2]

Первый работает, но второй не работает должным образом.

Если у кого-то есть решение, сообщите мне. Спасибо,

Answer 1

Это простой проблема, вызванная размещением двух каруселей на одной странице с несколько неправильными значениями для правильной работы.

На каждой смене слайдов, текст под каруселью изменяется следующим образом:

var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-' + id).html());

Таким образом, он принимает число от атрибута данных салазки, и ищет соответствующего слайд-содержимого элемента.

Пожалуйста, обратите внимание, что происходит во второй карусели:

• Во-первых, в $('#myCarousel2').on('slid.bs.carousel'... он пытается взять данные слайд, как это:

  var id = $('.item.active').data('slide-number');

  который заканчивается с получением данных от первая карусель; Вы можете обойти это легко меняется селектор, как это, например:

  var id = $('#myCarousel2').find('.item.active').data('slide-number');

• Теперь она примет data-slide-number из этих дивы:

  <div class="item" data-slide-number="6"> <div class="item" data-slide-number="7"> ...

• В конце концов, это будет попробуйте установить текст слайда на все, что хранится под элементом #slide-content2-<id>, поэтому он будет искать # слайд-контент2-6 и т. д.

• Но есть только slide-content2-0 до slide-content2-3 элементов, поэтому он будет пытаться установить undefined как carousel-text2 HTML, который просто не будет

Так заключая, вам необходимо изменить селектор JQuery, а затем убедитесь, ваш data-slide-number во вторых карусельных слайдах будет соответствовать всем в slide-content2 элементах.

Here's an example how to solve this

Answer 2

Ваши ссылки уменьшенных имеют дублирующие идентификаторы, в качестве примера, каждый карусельного имеет связь с идентификатором «карусельного-селектор-1», и т.д .:

<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>