search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

resizeContents false does not leave division at constant height #652

Closed donnaosburn closed 6 years ago

donnaosburn commented 8 years ago

Just upgraded from old version to 1.9.6 On my slider I show 3 images and increment by 1.

However, because my images are assorted sizes, (some landscape, some portrait) the height of the div slider automatically keeps jumping up and down. This makes the forward and back arrows jump and you have to chase them around the page to move to the next photo.

What I really want to do is just make the height of the slider constant and have my photos centered top to bottom of the div. resizeContents is set to false (and i have tried setting it to true also. )

Is there a way to have a default for setting a constant entire slider height and width.

donnaosburn commented 8 years ago

I found a way around it with CSS code. /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 500px; - changed from 100% to a px that would fit all my pictures.

This prevents the arrows from "jumping" around with each photo.

donnaosburn commented 8 years ago

Well, that fixed part of it. < div class="anythingSlider anythingSlider-metallic activeSlider" style="width: 720px; height: 212px;"> this div class height is changed in code for each image and I can't find where to attempt a modification.
I changed the < div class="anythingWindow"> which set the height where the images displayed, however it does not control the left and right arrows and they still jump around according to the first div class shown here.

Suggestions?

Another question, I am displaying 3 images in my setup, but they cut off and I may see part of an image, a full image, and part of another image. Is there a way to say show only full images and not partials?

Mottie commented 8 years ago

Hi @donnaosburn!

It's not ideal, but you can set a height and include an !important flag (demo)

.anythingSlider { height: 500px !important; }
donnaosburn commented 8 years ago

Interestingly enough, that works for the first time through the show, then the second time (infinite loop) i see two rows of pictures in the same area... maybe one of the cloned panels? Almost like a second table row?

I just dislike the panel size constantly changing size. I constantly have to move the mouse to find where the arrow moved to so I can move to the next image. I wish it was an option to leave a constant height and/or width and top/center/bottom align the pictures in that area. Would make for a great enhancement.

Thanks

Mottie commented 8 years ago

I'm not seeing the behavior you describe in the demo I shared. I looped through the slides twice and there didn't seem to be any issue.

Also, you can use the keyboard arrow keys to change slides.

Mottie commented 6 years ago

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.