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

2votos

Leonardo-Tadei comentado

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

0voto

johana comentado

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.

0voto

Peter comentado

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

0voto

johana comentado

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 Puntos227020

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!

0voto

johana comentado

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

1voto

Leonardo-Tadei comentado

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.

0voto

johana comentado

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

0voto

Leonardo-Tadei comentado

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.

0voto

johana comentado

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

0voto

Leonardo-Tadei comentado

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

0voto

johana comentado

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

0voto

Peter comentado

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

Saludos.

0voto

johana comentado

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

0voto

Leonardo-Tadei comentado

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.

Otras Preguntas y Respuestas


...

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

Conecta