Change slide width in anythingslider jquery plugin

Question

• I have a slider of 100px width
  • Inside I'm showing 3 slides (images)
  • Image #1 and #3 are also 100px width
  • Image #2 is 200px width

What I want to do is that the viewport remains at 100px but when it's showing slide #2, I will see the first 100px and when the slide is going to the left so the slide #3 slides in, I will see the remaining 100px of slide #2

Any ideas?

Thanks in advance!!

Answer 1

I made a (slightly larger sized) demo for you here...

Basically, you'll need to do the following:

Set the panel overflow to visible, and set all of the slides to be the same size.

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

Then add in an empty slide which will have the same dimensions as the other slides (set by the 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>

And finally, set the resizeContents option to false during plugin initialization otherwise the extra wide image will be resized to fit inside one slide.

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