Pregunta sobre Responsive Slider by MetaSlider - Slider and Carousel Plugin for WordPress de Wordpress:

Colocar diapositivas una al lado de la otra

Un usuario preguntó 👇

Hola a todos, como pueden ver, tengo tres diapositivas en la página a la que he vinculado. Se piensa que uno es más grande hacia arriba, los otros dos se supone que son dos más pequeños uno al lado del otro debajo de la cabeza grande. Sin embargo, por ahora, cuando inserto el control deslizante, uno se coloca automáticamente debajo del otro. ¿Hay alguna forma de que pueda hacer esto?

Este tema fue modificado hace 2 años, 8 meses por.

(@ kbat82)

Hace 2 años, 8 meses

Hola @analyticalmadness,

Podrías intentar agregar algunos estilos para nadarlos uno al lado del otro:

.metaslider-271, .metaslider-265 {
    float: left;
}

(@analyticalmadness)

Hace 2 años, 8 meses

Eso parece haber funcionado, ¡gracias!

(@ kbat82)

Hace 2 años, 8 meses

Genial escuchar @analyticalmadness. ¡Ten un excelente fin de semana!

Por cierto, si disfrutas del plugin MetaSlider, déjanos una reseña de 5 estrellas. Nos ayudan mucho. ¡Gracias!

https://wordpress.org/support/plugin/ml-slider/reviews#new-post

(@analyticalmadness)

Hace 2 años, 8 meses

Solo hice eso. 😉

Aunque no le importa, ha surgido una pequeña pregunta. El truco funciona, pero cuando reduzco la ventana de mi navegador, el control deslizante de la izquierda se vuelve más pequeño y el control deslizante de la derecha permanece del mismo tamaño.

Quería un pequeño espacio entre las dos diapositivas, por lo que el código real que utilicé fue: .metaslider-265 {float: right; }

A continuación también intenté: .metaslider-265 {float: right; }

.metaslider-271 {float: left; }

Pero si bien lo hizo para que ya no fuera más pequeño, ahora se ve muy extraño cuando cambio el tamaño de la ventana de mi navegador.

¿Alguna idea de lo que puedo hacer al respecto?

(@ kbat82)

Hace 2 años, 8 meses

Hola @analyticalmadness,

Puede parecer que desea flotar hacia la izquierda, establecer el ancho y usar consultas @media. Todo lo que tienes que hacer es jugar con el diseño.

Sin embargo, si no funciona, es posible que deba utilizar un enfoque de diseño más moderno como flexbox. Usted puede leer sobre ello aquí:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pero debido a que es tan moderno, tenga en cuenta que debe usar prefijos de navegador.

Aquí hay una herramienta que ayuda a agregar prefijos de navegador:

https://autoprefixer.github.io/

Pegue su código a la izquierda y lo arreglará por usted a la derecha.

(@analyticalmadness)

Hace 2 años, 8 meses

De hecho, terminé nadando hacia la izquierda y luego usando un margen.

.metaslider-265, .metaslider-271 {float: left; margen izquierdo: 2px; }

Y ahora funciona perfectamente. De todos modos, gracias por la ayuda y les deseo todo lo mejor del mundo con su plugin muy útil. 🙂

(@ kbat82)

Hace 2 años, 8 meses

¡Que bueno escuchar eso! Buena suerte con tu sitio web.

Por cierto, si disfrutas del plugin MetaSlider, déjanos una reseña de 5 estrellas. Nos ayudan mucho. ¡Gracias!

https://wordpress.org/support/plugin/ml-slider/reviews#new-post

(@analyticalmadness)

Hace 2 años, 7 meses

Oye, tenías una pregunta de seguimiento rápida, claro.

Cuando los controles deslizantes están ubicados uno al lado del otro mientras se usa FlexSlider, sucede algo muy extraño cuando cambia rápida, automática y continuamente entre la flecha «otra» en la primera diapositiva y la flecha «anterior» en la segunda diapositiva siempre que pase el mouse sobre la flecha.

Solo puedo solucionarlo haciendo las dos diapositivas mucho más pequeñas para que haya unos 30 píxeles entre ellas o cambiando a un control deslizante diferente, pero ninguna de estas opciones se ajusta a lo que realmente estoy tratando de hacer. -bueno.

¿Hay alguna forma de evitar que esto suceda si no coloco las diapositivas más separadas o si utilizo una diapositiva de otro tipo?

(@ kbat82)

Hace 2 años, 7 meses

Hola @analyticalmadness,

No veo que suceda en tu página. ¿Ya está arreglado? Puede intentar marcar «modo sin conflicto» en cada una de las diapositivas. Sin embargo, no estoy seguro de si eso ayudará.

(@analyticalmadness)

Hace 2 años, 7 meses

@ kbat82

Hola,

Bueno, cambié a un tipo diferente de control deslizante (Rslides en lugar de FlexSlider) que no tiene el problema. Sin embargo, creo que prefiero el aspecto de FlexSlider.

Actualmente estoy cambiando a FlexSlider para que puedas comprobarlo. Actualmente se encuentra en «Modo Sin Conflicto», pero desafortunadamente no parece estar ayudando.

(@ kbat82)

Hace 2 años, 7 meses

Hola @analyticalmadness,

Intente agregar esta regla de estilo:

.metaslider .flexslider {
    overflow: hidden;
}

(@analyticalmadness)

Hace 2 años, 7 meses

@ kbat82

Funcionó perfectamente. ¡Gracias de nuevo!

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *