modificar el aspecto del plugin AnythingSlider

Montes28 · #1 (**permalink**) 28/07/2012, 21:08

hola amigos del foro espero me puedan ayudar estoy intentando implementar el plugin AnythingSlider necesito que en una pantalla se vizualicen y funcionen 4 slider con la siguiente distribucion

slider1 slider2
slider3 slider4

y que ajusten el ancho y alto deacuerdo a la resolucion de la pantalla , hasta el momento puedo ver los slider con la siguiente distribucion

slider1
slider2
slider3
slider4

alguien ha tenido la misma situacion con este plugin ?

amigos no pretendo que me hagn el trabajo , he estado probando pero no he sido capaz de autoajustar el tamaño.

creo que para ustedes que tienen conocimientos muy avanzados me pueden ayudar

este es codigo css que esta en el docuemento html con el que trabaja el plugin

Código CSS:

Ver original#slider { width: 700px; height: 390px; }

Código HTML:

Ver original<body>
 
 
    <ul id="slider">
 
        <li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
 
        <li><img src="demos/images/slide-env-1.jpg" alt=""></li>
 
        <li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
 
        <li><img src="demos/images/slide-env-2.jpg" alt=""></li>
 
    </ul>
 
    <!-- END AnythingSlider -->
 
</body>

pero la parte robusta es esta

Código CSS:

Ver original#slider {
    width: 700px;
    height: 390px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}
 
/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-default {
    margin: 0 auto;
    /* 45px right & left padding for the arrows, 28px @ bottom for navigation */
    padding: 0 45px 28px 45px;
}
/* slider window - top & bottom borders, default state */
.anythingSlider-default .anythingWindow {
    border-top: 3px solid #777;
    border-bottom: 3px solid #777;
}
/* Navigation buttons + start/stop button, default state */
.anythingSlider-default .anythingControls a {
    /* top shadow */
    background: #777 url(../images/default.png) center -288px repeat-x;
    color: #000;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
/* Make sure navigation text is visible */
.anythingSlider-default .anythingControls a span {
    visibility: visible;
}
/* Navigation current button, default state */
.anythingSlider-default .anythingControls a.cur {
    background: #888;
    color: #000;
}

furoya · #2 (**permalink**) 29/07/2012, 11:11

¿Lo movieron otra vez a CSS?

Quizá el problema es que no pusiste un enlace al original, donde se explicaba que el inconveniente de dar formato a los plug-in para sliders es que hay que tocar el programa, para que reajuste los tamaños de sus imágenes y la posición de sus componentes (como los botones y textos) según el tamaño de la ventana.

Eso es JS, pero en este caso es "un poco más", porque hay que cambiar parámetros o reescribir código de la "library".

Que seguramente se puede hacer, pero vas a tener que encontrar alguien que tenga ganas de experimentar, de usar tu tema para adquirir experiencia.

Por lo general, es un trabajo que se cobra caro, así que si necesitas ayuda vas a tener que juntar paciencia.