Anything slider width: 100% - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
June 24, 2010 at 2:35 am #29466

andyjoe81
Participant

Do you think it would be easy to make Chris’s http://css-tricks.com/examples/AnythingSlider/ stay at 100% width as you re-size a window? Everything I’ve been fiddling with has made it look screwy or made it stop working, but I’m a bit of a novice.

Thanks!

June 24, 2010 at 2:36 am #78618

andyjoe81
Participant

I should also say that if need be, I can live without the text overlaying, and even without the buttons to advance. I really just need the simple slideshow, but for it to resize with my site.

June 24, 2010 at 8:10 am #78626

jamygolden
Member

Referring to the 100% width: The way anythingslider is designed, I’m pretty sure it wouldn’t work since the slides are a fixed size.

July 2, 2010 at 3:53 am #79162

andyjoe81
Participant

http://www.dynamicdrive.com/dynamicinde … deshow.htm

Any ideas for this one? Ive got this implemented at:
olivetreemusicstudio.com/wp

And when I disable width in firebug on my site it does exactly what I want it to… however in the code it asks for dimension numbers and the code infers that the numbers are pixels. I can’t figure out how to tell it to either ignore width or put in 100% width. Any ideas?

~Andy

October 4, 2011 at 12:47 am #88426

griffinhere
Member

http://www.chevrolet.com/ has anything slider in 100% width !

October 4, 2011 at 7:33 am #88445

Mottie
Member

@griffinhere Holy crap they are using AnythingSlider :P

@anyjoe81 & @jamy_za And yes, you can make AnythingSlider expand to fit inside of it’s container using the “expand” option. The slider must be wrapped inside of a container (the body of the page won’t work) in order to expand properly. Here is a demo.

February 16, 2012 at 9:43 am #96815

JoeyScheavone
Member

I’ve done this a few times and I’ve never found a slider that is already 100% width out of the box, but it’s not hard to do yourself. http://www.chevrolet.com is a simple case of changing the containing elements to have a width of 100%.

April 27, 2012 at 12:17 am #101854

krearts
Member

Finally I could do the 100% width, if some one want to check the code here is the example krearts.com, hope this will be helpful

May 22, 2012 at 11:46 am #103258

krearts
Member

Lo que hice fue crear un div “wrapper” que tenga 100% de ancho y configurar el anythingslider 100% ancho y alto el que necesites, después si te fijas en mi ejemplo cada
tiene otro div wrap que yo le llame “wrap-sli” a ese le asigne un CSS de “max-width: 980px;” para que se ajustara al ancho de mi sitio pero si tu gustas puedes obviar este wraper y cada “
” tendría un ancho de 100%. Esa fue la parte fácil lo que se me complico a mi fue el tema de las flechas y botones, que finalmente la respuesta fue tambien muy simple, posicionar los elementos de forma absoluta y posicionarlos con porcentajes, la flecha izquierda tiene una propiedad de “left: 43%;” y la flecha derecha “right: 43%;” y los bullets “left: 50%;” o pude ser “right” no importa, esto centra los bullets pero empieza a crearlos del centro hacia la derecha es por ello que después tienes que asignarle un “margin-lef: -X;” la “x” representa la mitad del ancho de todos tus bullets para que queden centrados correctamente.
Espero te sea de ayuda, de igual forma te recomiendo que te fijes en el código de mi sitio esta todo ordenado y puedes ver directamente de lo que estoy hablando.

Saludos