Don't know what is going on but it appears that AnythingSlider is stretching pictures that are used as slides. First place I looked was at the image dimensions but I have those same pictures in a gallery in another section of the site.
When I look at the #slider element, I see it is being effected by two files:
anythingslider.css sets the slider dimensions to 1080x720.
theme-metallic.css set the slider dimensions to 960x540 (overriding the anythingslider.css)
You don't need both files to add a theme to AnythingSlider.
Also, because the default options are all being used, the resizeContents option is set as true and forces all images to resize to fit the slider dimensions. If you want to have images of different sizes, make sure to set each image width and height and change the resizeContents option to false.
Don't know what is going on but it appears that AnythingSlider is stretching pictures that are used as slides. First place I looked was at the image dimensions but I have those same pictures in a gallery in another section of the site.
Here is the link
Any suggestions?
Hi matt_sanford!
When I look at the
#sliderelement, I see it is being effected by two files:anythingslider.csssets the slider dimensions to 1080x720.theme-metallic.cssset the slider dimensions to 960x540 (overriding the anythingslider.css)You don't need both files to add a theme to AnythingSlider.
Also, because the default options are all being used, the
resizeContentsoption is set astrueand forces all images to resize to fit the slider dimensions. If you want to have images of different sizes, make sure to set each image width and height and change theresizeContentsoption tofalse.Some of your pictures are bigger then div class="AnythingSlider .... style="width: 960px; height: 540px;"
As I can see picture inside it have img src="/images/fe-images/newborn/2.jpg" style="width: 100%; height: 100%;"
Original size of image is 1072 × 712
If You change width of this picture from 1072 to 960, height well be 638. Not 540.
Resolution You need do some with pictures. Prepare all pictures in one size which well be 960px; height: 540px; or remove height: 100%; in img Tags
@Sergrezn: Another solution would be to set the slider to accommodate the largest image, then wrap all of the images in a div:
What happens is that the div sets the styling of 100% height and width instead of the image.