The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anything slider width: 100%

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #29466

    Do you think it would be easy to make Chris’s 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.



    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.


    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.

    Participant … deshow.htm

    Any ideas for this one? Ive got this implemented at:

    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?


    Member has anything slider in 100% width !


    @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.


    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. is a simple case of changing the containing elements to have a width of 100%.


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


    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.


Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.