Как реализовать элементы изображения неравной ширины в simplyScroll?

Question

Я использую simplyScroll v1 для горизонтальной прокрутки изображений различной ширины, но элементы списка, содержащие изображения, имеют фиксированную ширину.

Вы можете просмотреть содержимое прокрутки здесь .

Как получить элементы списка с переменной шириной?

Автор предлагает следующее:

Если вы хотите прокрутить неравный размер элементы пытаются положить их в контейнер div, затем инициализация просто прокрутите на это (обратите внимание, что это взлом по существу удвоит количество элементов прокручивается!)

Похоже, список уже находится внутри контейнера div:

div.simply-scroll-container

Что автор подразумевает под "инициализацией" в контейнере div?

Подобная тема существует здесь , хотя для меня это неоднозначно. Любая помощь с благодарностью.

Answer 1

Я не знаю, поможет ли это вам.Уже более 2 лет с момента написания вопроса.

Это решение для различной ширины каждого изображения внутри li

$( window ).load(function() {
  $('#scroller li img').each(function(){
      var widthThis = $(this).width();

      $(this).parent().css({
        width : widthThis
      })
   });
$("#scroller").simplyScroll({
    pauseOnHover: false
});

});

Answer 2

Это распространенная проблема, которую исправляет версия 2 (очень скоро!), Автоматически оборачивая элемент, который вы пытаетесь прокрутить.Сейчас сделайте это вручную.

Если у вас был этот список неравных элементов ширины / высоты

<ul id="scroller"> <li></li> <li></li> etc... </ul>

, оберните его в другой элемент div, чтобы просто прокрутить один.1008 *

<div id="scroller"><ul> <li></li> <li></li> etc... </ul> </div>

Answer 3

Я получил это на работу, объединив оба ответа, уже предоставленных;

• Оберните <ul> в свои <div id="scroller">
• Удалите фиксированное свойство width из элемента .simply-scroll .simply-scroll-list li в CSS
• Добавьте padding к этому элементу по мере необходимости.

Работа в Firefox, Chrome и IE.

Answer 4

Ширина li устанавливается в CSS-файле с простой прокруткой, поэтому, если вы хотите использовать переменные размеры, вы можете просто удалить свойство width:

До: .simply-scroll .simply-scroll-list li { float: left; /*width: 290px;*/ width: 290px; /*height: 200px;*/ height: 180px; }

После: .simply-scroll .simply-scroll-list li { float: left; /*height: 200px;*/ height: 180px; }