Question

Hola amigos!, necesito de su ayuda, tengo un problema con un slider, quiero reducir el tamaño de largo de mi slider ya trate de cambiarlo en los estilos css pero me sale un espacio en blanco que por lo que veo es el espacio del efecto que realiza mi slider, supongo que tengo que ajustar algo en mi archivo js de javascript pero no se exactamente donde.

¿Ustedes podrian ayudarme? Gracias

Aquí mi imagen de mi slider.

Aquí mi codigo JS

http://design.intermex.net/schererbienesraices/js/jquery.slitslider.js

Aquí mi codigo CSS

http://design.intermex.net/schererbienesraices/css/style.css

Comments

Hola @johana,

poné un enlace a la página entera funcionando, para que podamos ver en qué parte está el problema y en qué archivo conviene solucionarlo.

También decís que "querés reducir el tamaño", pero no decís de qué tamaños querés que se vea finalmente...

---

aqui el lin de mi página
http://design.intermex.net/schererbienesraices/

mi problema es que quiero reducir el tamaño de largo de mi slider ya logre reducirlo con mis hojas de estilo css pero me da un espacio en blanco todavía, por lo que veo el efecto que tiene el slider al momento de hacer click en las flechas del slider, el efecto que se produce sale del área de la imagen del slider al espacio en blanco. No sabría extactamente a que tamaño por que quiero que se pueda ver el formulario amarillo de búsqueda avanzada que está debajo del slider, sin necesidad de bajar con el scroll.

---

A mi me sale sin scroll. Te pasa en todos los navegadores?

---

Si, me refiero a que inmediatamente que ingreso al sitio web automaticamente se visualice o se ajuste a la pantalla desde mi encabezado hasta el formulario amarillo de búqueda avanzada sin necesidad de bajar con la barra de scroll o reducir el zoom.

Answer 1

Hola @johana,

nunca podrás conseguir esto con la estructura del HTML que estás usando.

Estás usando Boostrap para la maquetación, así que si querés que algo se vea en 2 columnas, tenés que definirlo en el mismo ROW.

Podrías hacer algo como:

...
<div class="row">
  <div class="md-col-8"
    <!-- Slider Start -->
    <div class="container-slider">
    ...
    <!-- código del slider -->
    ...
    </div>
  </div>
  <div class="md-col-8"
    <!-- Search Bar Start -->
    <div id="search">
    ...
    <!-- código del buscador -->
    ...
    </div>
  </div>
</div>
...

Puse las columnas de 8 y 4, pero esos valores los tendrás que ajustar al aspecto que quieras que tengan las cosas, siempre teniendo en cuenta que la suma sea 12.

Luego, como los DIV interiores serán del 100% del ancho, quedarán inscriptos en el tamaño del COL que definas.

Saludos cordiales!