Jump to content
Sign in to follow this  
windwhippedfarm

Possible to tilt feature slider ( images insider slider)?

Recommended Posts

windwhippedfarm

Hi all, This might not be possible/difficult to do, but I was wondering if there is a way to tilt the feature slider. I'd like to slightly tilt down and to the left the feature slider/images it contains. Thks, Virginie

Share this post


Link to post
Share on other sites
ricardo

Hi Virginie! In a simplistic way, the slider is made from 3 elements: the container, the images and the javascript scripts and library in charge of cycling the images. Although you can probably tilt the container using one of or a mix of CSS3, HTML5 and Javascript, there's no warranty that it would keep working (i.e., cycling the images) and that it would be supported by a large number of browser/platform combinations. I'm not sure what you're after but a combination of a borderless container + images of the tilted subject combined with a clever mix of cycle type and image background, might create a believable illusion. Ricardo

Share this post


Link to post
Share on other sites
windwhippedfarm

Hi Ricardo, Thanks for getting back to me. Seems like it would be a bit complicated for someone with limited design skills. Basically I would like to give the illusion of a "sign" (a frame holding the feature slider and the rotating images) tilted/being blown over by wind. This is an example of what I mean by frame & images, except that it is not tipped to the side. http://www.ethicetchic.com/

Share this post


Link to post
Share on other sites
ricardo

Humm... It could work if you place the frame image inside each slide. Problem #1 is choosing the effect to make it look that only the content of the frame is changing and problem #2 you are going to need a lot of space for that as you cannot put the frame outside the container. Ricardo

Share this post


Link to post
Share on other sites
kastelic

Will work with CSS3 compatible browsers: Put this code in your custom CSS area: #feature { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); } You may need to add top and bottom margins to make room for the rotation. You can change the 2deg to any number in a 360 degree range including negative numbers.

Share this post


Link to post
Share on other sites
timlinson

very cool, didn't know about this

Share this post


Link to post
Share on other sites
windwhippedfarm

Thank you, that worked!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×