Карусель начальной загрузки Twitter с переменным / отзывчивым количеством отображаемых элементов в зависимости от размера браузера

Question

Я использую версию Twitter Bootstrap v3.1.1 для создания карусели на моем веб-сайте. Я хотел бы иметь возможность регулировать количество элементов, отображаемых в карусели, в зависимости от размера браузера / устройства, к которому люди обращаются к сайту. Например, если у меня 15 элементов, а браузер больше, просмотрите 3 набора из 5 видимых элементов, если меньше, покажите 5 наборов из 3 видимых одновременно, а если мобильно, покажите 15 наборов из 1 видимого элемента... Это кажется таким простым и распространенным запросом... но я не могу найти его в переполнении стека или в Google.

Элементы имеют определенные размеры, и вы можете предположить, что они примерно так:

<img src="http://placehold.it/150x150">

Чтобы дать более подробную информацию, элементы в каруселях предназначены для "связанных предварительных просмотров", которые приглашают людей нажимать на элементы, чтобы найти больше информации о них, и у меня есть несколько каруселей на странице, на которых отображаются элементы различных типов (например, YouTube или YouTube).NETflix есть на их сайтах), поэтому мне не очень удобно показывать постоянное количество элементов на странице и корректировать высоту / ширину / поля каждого элемента в ответ на изменение размеров браузера. Поскольку я не хочу регулировать их размеры, я вынужден регулировать количество видимых элементов.

Общее количество объектов в наборе может быть небольшим (<10) или большим (100), но оно будет динамически расти со временем. Количество предметов, видимых за один раз, вероятно, будет в диапазоне 1-6.

Пример кода для загрузочной карусели можно найти здесь: http://webdesign.tutsplus.com/articles/twitter-bootstrap-101-the-carousel--webdesign-7442

Я пробовал следующее:

Bootstrap Carousel - у меня все настроено правильно, выглядит и ведет себя как карусель. Поворачивается по мере необходимости, но когда я сжимаю браузер, поля съедаются, и все видимые элементы перекрываются друг с другом.

Owl Carousel V2.0.0-beta.2.4 beta - Не удалось правильно настроить его. Все элементы просто оказались в виде столбца, независимо от того, какое число я установил справа от "элементов" ниже:

            $('.owl-carousel').owlCarousel({
                loop:true,
                margin:10,
                nav:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:3
                    },
                    1000:{
                        items:5
                    }
                }
            })

Я также попробовал адаптивную карусель здесь: http://basilio.github.io/responsiveCarousel/. Я смог настроить его в качестве карусели и задать количество видимых элементов по умолчанию, но не смог выяснить, как его модулировать в зависимости от размера браузера. Я пытался проверить собственный код автора за его "Каруселями примеров" (потому что те на его сайте делают то, что я хочу), но безрезультатно.

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

(Все образцы здесь) http://www.bootply.com/like/carousel+responsive(Первые ~15 образцов здесь) http://www.bootply.com/like/carousel

Наконец, я попробовал BX Slider ( http://bxslider.com/), и это сработало как шарм... в основном. Я настроил карусель, и она настроилась на мои minSlides, когда я сделал браузер суженным... единственная проблема заключалась в том, что иногда он отображал часть изображения, но, похоже, он запрограммирован, и я не уверен, что это такая плохая вещь. Это то, что я сейчас использую.

В конечном счете, я на самом деле не фанат HTML-грамматики Bootstrap, где я должен разделить свой полный набор элементов на более мелкие наборы, в отличие от других, где я могу просто выгрузить все элементы в контейнер div и разрезать javascript установить по мере необходимости). Я просто пытаюсь свести к минимуму количество дополнительных файлов CSS и JS, прикрепленных к сайту. Поскольку я использую начальный загрузчик для общего макета, это означает, что нужно искать загрузочное решение.