Изменить ширину слайда в любом плагине jquery

Question

• У меня есть слайдер шириной 100px
  • Внутри я показываю 3 слайда (изображения)
  • Изображения # 1 и # 3 также имеют ширину 100px
  • Изображение # 2 имеет ширину 200 пикселей

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

Есть идеи?

Заранее спасибо !!

Answer 1

Я сделал (чуть больше) демо для вас здесь ...

Как правило, вам нужно сделать следующее:

Установите для панели «Переполнение» значение «Видимый» и установите для всех слайдов одинаковый размер.

#slider .panel {
    overflow: visible;
}
#slider, #slider li {
    width: 100px;
    height: 100px;
}

Затем добавьте пустой слайд, который будет иметь те же размеры, что и другие слайды (установленные css)

<ul id="slider">
    <li><img src="http://placekitten.com/100/100" alt="" /></li>
    <li><img src="http://placehold.it/200x100" alt="" /></li>
    <li></li>
    <li><img src="http://placedog.com/100/100" alt="" /></li>
</ul>

И, наконец, установите для параметра resizeContents значение false во время инициализации плагина, в противном случае размер сверхширокого изображения будет изменен, чтобы поместиться в один слайд.

$('#slider').anythingSlider({
    resizeContents: false
});