Search code examples
htmlcssjquery-pluginsjcarousel

Hiding the ends of a fixed width jquery carousel div on different page sizes

I'm not even sure what I am asking for is possible, so could use some expert advice.

http://proof.jiujitsu.co.za/index.html

I have a fixed width div containing a jquery carousel.

The carousel is wider than the main page content.

When the page is loaded on a smaller resolution screen (eg 1280 x 1024 ) the rest of the page shifts as expected but obviously the carousel div does not.

Is it possible 'move' the carousel so that the middle three un-masked images stay in line with the rest of the page content and the two outer masked images dissapear off screen.

If it is possible, where would I start, js or css?

Solution

  • You could change the following:

    .slider_layout {
    width: 1605px;
    margin: 0 auto;
    overflow: hidden;
}

    To the following:

    .slider_layout {
    width: 1605px;
    overflow: hidden;
    position: relative;
    left: 50%;
    margin-left: -802px;
}

    Which will keep your carousel centred at any resolution.