Anything Slider – Need to stretch content outside wrapper div

[ahughes3]

Hi,
I am trying to update my company website with a new sliding header. I downloaded the Anything Slider which works perfectly for what I need.

The only problem I have is getting it to sit in the right place on the page. I’m trying to insert it into an existing div wrapper which is 960px wide. The problem comes when I try to make the slider 960px wide. I need to image to be 960px but instead its the prev/next arrows that have the outer measurement and so overall it ends up looking a different size to the rest of the page (maybe I’ve just confused you even more!)

So, I need the prev/next arrows to overhang outside of the wrapper div so the slider image is the same dimensions as the rest of the page content (960px). If I try and make the slider 1100px, the arrows get cut off because they are obviously outside of the wrapping div. So my question is; how do I set it so that the slider will sit on top of and outside of the wrapping div.

There is loads of code to this page so rather than paste the code you can see the actual page I’m trying to work on at http://www.visionltd.co.uk

Obviously this is a live site so I can’t play around on it. But, you can see the header with the light blue background and the text and image inside it? This is the area I want to insert the slider into. So far, I managed to make a little progress which involved me setting playing around with the positioning of the slider div, but then the content in the col3 div further down the page, jumped up and covered it. I tried clearing all the divs thinking it might be that but nothing changed. I also tried changing the “position” of the div sitting on top of the slider, but again no difference.

I really like this slider and don’t want to start again from scratch so if someone can offer some guidance I’d be very appreciative.

Thanks
Andy

[Paulie_D]

Basically, you are trying to squeeze a quart into a pint pot and it’s not going to work.

Something will have to give. Either make the div holding the slider-to-be wide enough to hold the 960px image and the buttons or reduce the images so that the whole lot fits into 960px.

This may mean you have to divide up your site into ‘bands’ of content to get the look you are after.

http://codepen.io/joe/pen/tEHDb

[ahughes3]

Hi Paulie,
Thanks for the reply. I get what you’re saying, I guess I was just trying to do as little messing around as poss as this is an existing page that feeds other pages. I’ll give it a go and see how I get on and let you know.

Thanks again.

Andy

[ahughes3]

Ok so I separated the divs out and everything seems to be positioned ok. Now I have another issue and I don’t know whether I’ve done something wrong or it is indeed an issue (probably the former). Anyway, in IE the slider renders fine as I need it. In Chrome and Firefox however, either the container div or images are displaying, what looks like, the same height as the width eg. my width is set to 960px and it looks like the content is being stretched to 960px high. I’ve looked around in the css for any coding anomaly but I can’t see anything.

Any suggestions as to what it might be (I appreciate I haven’t pasted the code but it would seem to be too much coding to make it sensible pasting it?)

PS. what I’ve also just noticed is that the “slider” div, doesn’t show as a child in it’s container div, even though it’s definitely contained inside it. I can’t see why it’s not recognising it as part of the container div either. I may need to post the code after all!

[Mottie]

AnythingSlider adds padding around the images so that the arrows can be shown. Use this css to remove this extra padding, but doing so will move the arrows inside of the slider – [see this demo](http://jsfiddle.net/ycUB6/3244/)

​.anythingSlider {
padding: 0;
}​

Maybe you could try out some of the [other AnythingSlider themes](http://css-tricks.github.com/AnythingSlider-Themes).

[Author]

Posts