проблема с шириной jcarousel

Я использую jCarousel на веб-сайте, который создаю для своей компании. Я использую javascript по умолчанию, поставляемый с jCarousel.

<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px;width: 2084px;">

Ширина создается javascript, с которым поставляется jCarousel, но я могу зашифровать его, чтобы выяснить, где изменить значение.

Любая помощь будет здорово.

Вот ссылка на то, над чем я работаю: http://marcbrigham.com/lynxems/index.html


javascript html jquery css jcarousel
person Marc Brigham    schedule 21.03.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward 

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

Взято из скина Tango по умолчанию, который используется в примерах.

Какой скин/тему/CSS вы используете? jCarousel необходимо изменить width, чтобы включить слайд, но элемент-оболочка должен использовать overflow: hidden;.

ОБНОВЛЕНИЕ

Это редактирование CSS заставляет его выглядеть нормально, но если вам нужно, чтобы он покрывал всю ширину #mainhome, вам следует подумать об изменении размера изображений.

.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 765px;
  padding: 20px 40px;
  height: 200px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
  width: 775px;
  height: 190px;
}

Другим вариантом может быть добавление margin: 0 40px; к .jcarousel-skin-tango .jcarousel-clip-horizontal.

person Stefan    schedule 21.03.2012

arrow_upward
1
arrow_downward

Вы также можете создать стиль CSS и добавить к нему !important, который переопределит встроенные стили. Например:

#carousel {
    width: 1000px !important;
}

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

Также есть новая версия (0.3.0), но на сайте разработчиков пока нет действительно хороших примеров.

person zxbEPREF    schedule 20.06.2013

arrow_upward
-1
arrow_downward

просто добавьте стиль в свой css:

.jcarousel-list-horizontal {width: x}

Al

person Alex    schedule 21.03.2012
comment
Я не верю, что это сработает, поскольку встроенный стиль перезапишет ширину в таблице стилей. - person Marc Brigham; 21.03.2012