Tema: modificar el aspecto del plugin AnythingSlider
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/07/2012, 21:08
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 8 meses
Puntos: 6
modificar el aspecto del plugin AnythingSlider
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
  1. #slider { width: 700px; height: 390px; }

Código HTML: 
Ver original
  1. <body>
  2.  
  3.  
  4.     <ul id="slider">
  5.  
  6.         <li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
  7.  
  8.         <li><img src="demos/images/slide-env-1.jpg" alt=""></li>
  9.  
  10.         <li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
  11.  
  12.         <li><img src="demos/images/slide-env-2.jpg" alt=""></li>
  13.  
  14.     </ul>
  15.  
  16.     <!-- END AnythingSlider -->
  17.  
  18. </body>


pero la parte robusta es esta

Código CSS: 
Ver original
  1. #slider {
  2.     width: 700px;
  3.     height: 390px;
  4.     list-style: none;
  5.     /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
  6.     overflow-y: auto;
  7.     overflow-x: hidden;
  8. }
  9.  
  10. /******************
  11.   SET STYLING HERE
  12.  ******************
  13.  =================================
  14.  Default state (no keyboard focus)
  15.  ==================================*/
  16. /* Overall Wrapper */
  17. .anythingSlider-default {
  18.     margin: 0 auto;
  19.     /* 45px right & left padding for the arrows, 28px @ bottom for navigation */
  20.     padding: 0 45px 28px 45px;
  21. }
  22. /* slider window - top & bottom borders, default state */
  23. .anythingSlider-default .anythingWindow {
  24.     border-top: 3px solid #777;
  25.     border-bottom: 3px solid #777;
  26. }
  27. /* Navigation buttons + start/stop button, default state */
  28. .anythingSlider-default .anythingControls a {
  29.     /* top shadow */
  30.     background: #777 url(../images/default.png) center -288px repeat-x;
  31.     color: #000;
  32.     border-radius: 0 0 5px 5px;
  33.     -moz-border-radius: 0 0 5px 5px;
  34.     -webkit-border-radius: 0 0 5px 5px;
  35. }
  36. /* Make sure navigation text is visible */
  37. .anythingSlider-default .anythingControls a span {
  38.     visibility: visible;
  39. }
  40. /* Navigation current button, default state */
  41. .anythingSlider-default .anythingControls a.cur {
  42.     background: #888;
  43.     color: #000;
  44. }
Última edición por Montes28; 28/07/2012 a las 22:00