Блог

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

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

Есть идеи?

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

Я сделал (немного большего размера) демонстрационную версию для вас здесь…

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

Установите видимость переполнения панели и сделайте все слайды одинакового размера.

 #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
});