Pregunta sobre Slide Anything - Responsive Content / HTML Slider and Carousel de Wordpress:

No muestra el ancho de imagen correcto

Un usuario pregunt贸 馃憞

Tengo un control deslizante curvo en la parte inferior de mi p谩gina lleno de logotipos que var铆an en ancho, pero todos tienen 100 p铆xeles de ancho. En la p谩gina de configuraci贸n de diapositivas, se ha agregado la imagen de tama帽o completo a cada diapositiva para que el ancho sea diferente pero la altura sea la misma:

Cuando miras la diapositiva, todo est谩 formateado para que quepa en un cuadro separado, de modo que algunos objetos se agrieten y otros tengan espacio en blanco adicional a su alrededor. Quiero que el ancho de cada cuadro se ajuste autom谩ticamente a las especificaciones de la imagen y que floten todos uno al lado del otro. Intent茅 agregar CSS personalizado:

.owl-carrusel .owl-item {ancho: autom谩tico! importante; flotador izquierdo; }

mostrando el ancho de la prensa, pero oblig谩ndolos a empujar hacia abajo en la segunda l铆nea que no puedo descifrar por el resto de mi vida. 驴Algunas ideas?

Salud

(@ryanchmura)

Hace 10 meses, 2 semanas

Tambi茅n tengo lo siguiente para aplicarlo a la altura correcta porque, de lo contrario, muestra el ancho correcto pero diferente altura (lo cual es extra帽o ya que todos tienen la misma altura en las im谩genes)

.owl-carrusel .owl-item img {altura: 100px! importante}

(@ryanchmura)

Hace 10 meses, 2 semanas

Creo que est谩 relacionado con .owl-stage que tiene un ancho fijo (empujando a la segunda l铆nea) pero si el ancho cambia a (隆autom谩tico! Importante), el control deslizante hace que desaparezca.

(@simonpedge)

Hace 10 meses, 2 semanas

Mientras que Owl Carousel (el motor en el que est谩 construido mi enchufe) admite diapositivas de ancho variable (ver: https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html), Constru铆 mi plugin con 茅nfasis en la capacidad de respuesta.

Entonces, si define una diapositiva de EE. UU. Para mostrar 3 diapositivas en una computadora de escritorio, 2 en una tableta y 1 en un tel茅fono m贸vil, en una computadora de escritorio cada diapositiva se calcula en un 33,33% del ancho disponible, y se utiliza JavaScript para mantener esta proporci贸n encima de una determinada ventana. resoluci贸n de p铆xeles (incluso para eventos cambiantes que ocurren por encima de esta resoluci贸n). Lo mismo ocurre con las tabletas y los dispositivos m贸viles.

As铆 que, lamentablemente, esta nueva funci贸n de 芦Ancho autom谩tico禄 (introducida en Owl Carousel 2.0) no aparece en Anything Slide, pero es algo que puedo esperar agregar en una versi贸n futura. No estoy seguro de c贸mo lograr esto porque una gran parte del c贸digo est谩 adjunto a las entradas del cuadro ‘Elemento mostrado’ dentro de la configuraci贸n del control deslizante.

(@ryanchmura)

Hace 10 meses, 2 semanas

Hola @simonpedge

Gracias por la respuesta, 驴tendr铆a una idea de c贸mo podr铆a configurarlo para lograr lo siguiente?

Tengo alrededor de 100 logotipos de proveedores que quiero en una diapositiva curva y quiero que todos tengan la misma altura, por lo que es una barra uniforme de buen aspecto en la parte inferior. Los cambi茅 todos para que tuvieran un ancho diferente pero una altura de 100px. Cuando los subo en el plugin, los muestran a diferentes alturas en el control deslizante.

隆Gracias por cualquier consejo!

(@simonpedge)

Hace 10 meses, 2 semanas

Hola, acabo de echar un vistazo a su sitio y parece que logr贸 que el control deslizante de su logotipo funcionara de la manera que deseaba: genial. 驴C贸mo lograste hacerlo? 驴Podr铆a enumerar los cambios de su c贸digo, para que otros puedan beneficiarse de su arduo trabajo, y luego puedo considerar agregar esto como una nueva funci贸n de EE. UU.?

(@ryanchmura)

Hace 10 meses, 2 semanas

Hola @simonpedge,

Jaja, ciertamente no est谩 funcionando como me gustar铆a, presion茅 todo lo que est谩 en su lugar con CSS, pero todav铆a hay una segunda l铆nea que est谩 empujando im谩genes. Si permanece el tiempo suficiente en las diapositivas en un punto, cambia completamente la posici贸n (imagino un regreso al principio), por lo que ya no es un bucle infinito. Cuando termine, habr谩 alrededor de 100 diapositivas, as铆 que espero que sea algo que los usuarios rara vez noten (ya que tendr铆as que sentarte y mirarlo por un tiempo para ver este error de medio segundo ) No es una gran soluci贸n, 隆pero funcionar谩 de ahora en adelante! De todos modos, el c贸digo que us茅 para reemplazar todo fue:

.owl-stage {funci贸n de tiempo de transici贸n: lineal! importante; }

.owl-carrusel .owl-stage-external {overflow: visible! importante; }

.owl-stage {color de fondo: blanco; altura m谩xima: 100px; overflow-x: oculto; overflow-y: hidden}

.owl-carrusel .owl-item img {altura: 100px! importante; relleno: 10px; pantalla: flex; }

.sa_owl_theme .owl-dots {posici贸n: 隆fijo! importante}

.owl-item {ancho: autom谩tico! importante; }

驴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 *