entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Modificar altura de Slider

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.

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

Leonardo-Tadei comentado Feb 23

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

johana comentado Feb 23

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.

Peter comentado Feb 23

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

johana comentado Feb 23

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.

1 Respuesta

1voto

Leonardo-Tadei Puntos214780

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!

johana comentado Feb 23

Si, entiendo que estoy usando bootstrap y lo estoy dividiendo por row, pero yo quiero diminuir el tamaño de largo de lo que tengo dentro de mi col-md del slide, en este caso es mi slider(imagenes, efecto javascript, texto, etc. etc).

Mil Gracias

Leonardo-Tadei comentado Feb 24

Lo que me decís que querés, es lo que te indico en mi respuesta: no hace falta disminuir directamente el tamaño del slider, que ocupa el 100%, sino ponerlo dentro de otro contenedor (un col-md-X) y que siga usando el 100%, pero ahora de un espacio más chico.

johana comentado Feb 24

@Leonardo-Tadei te lo agradezco mucho :)
un saludo.

Leonardo-Tadei comentado Feb 24

Si lo que querés es nada más que el slider sea menos alto, poné imágenes con una proporción más ancha que altas: el slider ocupará la altura de la imagen más alta hasta ocupar todo el ancho.

Por ejemplo, si tus imaǵenes ahora son de 1365 x 768: hacelas de 1365 x 500 y todo el slider será menos alto.

johana comentado Feb 28

@Leonardo-Tadei ya pensé hacer eso, pero las imágenes las estoy extrayendo desde una base de datos y no se como modificarlas por que me dan una url como esta
http://sistemainmobiliario.intermex.net/public/c81e728d9d4c2f636f067f89cc14862c/Casa1/casa-venta-cuernavaca-cav7395913683736300.jpg

no se exactamente donde obtener esas imágenes y después no se como remplazarlas.

Encontré esta página del slider que estoy usando y me explica los javaScript pero aun no logro encontrar en donde reducir el tamaño del efecto, por que como comenté anteriormente, el espacio e imagen la reduzco desde el css pero me queda un espacio en blanco por lo que veo es el tamaño de efecto que me produce mi javaScript.

https://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

Leonardo-Tadei comentado Feb 28

Sin tener en el propio sitio las imágenes para mostrar, pudiendo así manejarlas según tu necesidad, yo tampoco sé cómo solucionar esto...

En tu código en http://design.intermex.net/schererbienesraices/ se ve que es simple hacer menos alto el slider, por ejemplo, pasarlo de 600px a 300px, pero en ese caso, no entran los textos que se tienen que mostrar encima.

Para cambiar el alto de todo el slider, basta con modificar en custom.css esto:

.sl-slider-wrapper {
    width: 100%;
    height: 400px; /* originalmente 600px */
    overflow: hidden;
    position: relative;
}

Saludos cordiales

johana comentado Feb 28

LISTO!! EXCELENTE!! MUCHISIMAS GRACIAS!!!!!!

Peter comentado Feb 28

@johana Si esta respuesta soluciona tu problema, por favor marca la respuesta como correcta.

Saludos.

johana comentado Mar 2

No me da la opción para seleccionar la respuesta como correcta y no se como hacer para que me aparezca dicha opción.

Leonardo-Tadei comentado Mar 3

No te aparece al principio de mi respuesta, justo abajo de tu pregunta, un botón que dice "Seleccionar respuesta" a la derecha de mi nombre de usuario?

La respuesta es todo este largo hilo, y no un texto por separado...

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta