Configuración Banner

Español Debates Preguntas y respuestas técnicas
1

Hola chicos como están ? en mi sitioweb agregue una sesión de banner (slideshow) pero cuando agrego 5 o mas banner las imagenes se dividen y se distorsionan a que se debe esto ? como lo puede solucionar para quedar con con los 5 slideshow

Captura de pantalla 2023-05-26 a la(s) 00.45.42.png
Captura de pantalla 2023-05-26 a la(s) 00.45.42.png594×528 41.1 KB

en esta parte cuando agrego las 5 se distorsionan
en esta parte cuando agrego las 5 se distorsionan2614×1078 342 KB

ordenados con las animaciones correctas ya que hasta me desaparece una

2

@carlosrabbit Estuve mirando la configuración de tu CSS, primero el slide veo que usa una propiedad scroll y una propiedad witdth.

El truco para que no se te distorcionen los tamaños es que el css haga el calculo automatico de cantidad de items por 100% ya que esto te permite hacer que cada slide ocupe el 100% de la pantalla de acuerdo a tu implementación actual puedes probar con un código como el que te muestro a continucación:

#lista-slider {
    padding: 0!important;
    display: flex !important;
    width: {variable_liquid_cantidad_de_items}00%!important;
    animation: cambio 15s infinite ease-out !important;
}

En el codigo anterior la variable es la cantidad de bloques de imagen que estas utilizando y para extraer esta variable dentro de la sección usa este código de ejemplo:

{% assign count = 0 %}
{% for block in section.blocks %}
       {% assign count = count | plus: 1 %}
{% endfor %}

    {% for block in section.blocks %}
       

    {% endfor %}

Sí requieres una solución mas exacta puedes compartir un ejemplo de como implementaste la sección con liquid o la implementación actual.

Quedaré atento a tu respuesta.

3

Este código donde lo integro?

4

hola jose gracias por tu respuesta , como y donde debo implementar esos códigos ? por otro lado así lo tengo con la implementación actual

5
.slider-container{ margin: auto !important; background-color: white !important; width:100% !important; overflow-x:scroll !important; scroll-snap-type: x mandatory !important; } #lista-slider{ padding:0!important; display:flex !important; width: 300%!important; animation: cambio 15s infinite ease-out !important; } .slider-container li{ width:100% !important; list-style:none !important; } .slider-container img{ width:100% !important; max-width: 100% !important; obj-fit:cover !important; scroll-snap-align:center; } @keyframes cambio{ 0% {margin-left:0;} 32% {margin-left:0;} 34% {margin-left:-100%;} 65% {margin-left:-100%;} 67% {margin-left:-200%;} 100% {margin-left:-200%;} } @media only screen and (max-width: 797px){ .slide-pc{ display:none !important; } } @media only screen and (min-width: 600px){ .slide-cel{ display:none !important; } }
    {% if section.blocks.size > 0 %} {% for block in section.blocks %} {% if block.type == 'slideshow' %}
  • {% if block.settings.ena_slide_video %} {% if block.settings.url_ytb_video != blank %}
    {{ block.settings.url_ytb_video }} {% endif %} {% else %} {% if block.settings.block_banerimage != blank %} _img_slide_ {% else %} _img_slide_ {% endif %} {% endif %}
  • {% if block.settings.block_banerimage_mb != blank %} _img_slide_ {% else %} _img_slide_ {% endif %}
    • {% endif %} {% endfor %} {% endif %}
{% if section.blocks.size > 0 %} {% for block in section.blocks %} {% if block.type == "slideshow" %} .section-slideshow-v1 .slick-active .info-sideh1 .box-content-center .button-shop-{{block.id}}:hover{ background : {{block.settings.color_hover_button}} !important; border-color : {{block.settings.color_hover_button}} !important; color : {{block.settings.color_hover_text}} !important; } .section-slideshow-v1 .slick-active .info-sideh1 .box-content .button-shop-{{block.id}}:hover{ background : {{block.settings.color_hover_button}} !important; border-color : {{block.settings.color_hover_button}} !important; color : {{block.settings.color_hover_text}} !important; } .section-slideshow-v1 .slick-active .info-sideh1 .box-content-right .button-shop-{{block.id}}:hover{ background : {{block.settings.color_hover_button}} !important; border-color : {{block.settings.color_hover_button}} !important; color : {{block.settings.color_hover_text}} !important; } .section-slideshow-v1 .slick-active .info-sideh1 .box-info-{{block.id}} .box-title-{{block.id}}{ -webkit-animation-name: {{block.settings.effect_title}}; animation-name: {{block.settings.effect_title}}; ; } .section-slideshow-v1 .slick-active .info-sideh1 .box-info-{{block.id}} .box-title1-{{block.id}}{ -webkit-animation-name: {{block.settings.effect_title1}}; animation-name: {{block.settings.effect_title1}}; ; } .section-slideshow-v1 .slick-active .info-sideh1 .box-info-{{block.id}} .box-title2-{{block.id}}{ -webkit-animation-name: {{block.settings.effect_title2}}; animation-name: {{block.settings.effect_title2}}; ; } .section-slideshow-v1 .slick-active .info-sideh1 .box-info-{{block.id}} .btn-animation-{{block.id}}{ -webkit-animation-name: {{block.settings.effect_title3}}; animation-name: {{block.settings.effect_title3}}; ; } {% endif %} {% endfor %} {% endif %}

{% schema %}
{
“name”: “SLIDESHOW”,
“class”: “index-section”,
“settings”: [
{
“type”: “header”,
“content”: “Section Space”
},
{
“type”: “text”,
“id”: “margin_top”,
“label”: “Margin Top”,
“info”: “Defined in pixels. Do not add the ‘px’ unit.”
},
{
“type”: “text”,
“id”: “margin_bottom”,
“label”: “Margin Bottom”,
“info”: “Defined in pixels. Do not add the ‘px’ unit.”
}
],
“blocks”: [
{
“type”: “slideshow”,
“name”: “Slideshow”,
“settings”: [
{
“type”: “header”,
“content”: “Position Content”
},
{
“type”: “select”,
“id”: “select_position_content”,
“label”: “Choose The Position Content”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “left”
},
{
“type”: “select”,
“id”: “select_textalign_content”,
“label”: “Text Align Content”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “left”
},
{
“type”: “text”,
“id”: “block_title_top1”,
“label”: “Subtitle Slideshow”,
“default”: “Style Destination”
},
{
“type”: “color”,
“id”: “color_block_title_top1”,
“label”: " Subtitle Slideshow Color",
“default”: “#E5E5E5”
},
{
“type”: “select”,
“id”: “effect_title1”,
“label”: “Choose The Effect SubTitle”,
“options”: [
{
“value”: “bounce”,
“label”: “Bounce”
},
{
“value”: “flash”,
“label”: “Flash”
},
{
“value”: “pulse”,
“label”: “Pulse”
},
{
“value”: “rubberBand”,
“label”: “Rubberband”
},
{
“value”: “shake”,
“label”: “Shake”
},
{
“value”: “swing”,
“label”: “Swing”
},
{
“value”: “tada”,
“label”: “tada”
},
{
“value”: “wobble”,
“label”: “Wobble”
},
{
“value”: “jello”,
“label”: “Jello”
},
{
“value”: “heartBeat”,
“label”: “HeartBeat”
},
{
“value”: “bounceIn”,
“label”: “BounceIn”
},
{
“value”: “bounceInDown”,
“label”: “Bounce In Down”
},
{
“value”: “bounceInLeft”,
“label”: “Bounce In Left”
},
{
“value”: “bounceInRight”,
“label”: “Bounce In Right”
},
{
“value”: “fadeIn”,
“label”: “Fade In”
},
{
“value”: “fadeInDown”,
“label”: “Fade In Down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade In Left”
},
{
“value”: “fadeInRight”,
“label”: “Fade In Right”
},
{
“value”: “fadeInUp”,
“label”: “Fade In Up”
},
{
“value”: “flipInX”,
“label”: “Flip In X”
},
{
“value”: “flipInY”,
“label”: “Flip In Y”
},
{
“value”: “lightSpeedIn”,
“label”: “Light Speed In”
},
{
“value”: “slideInUp”,
“label”: “Slide In Up”
},
{
“value”: “slideInRight”,
“label”: “Slide In Right”
},
{
“value”: “slideInDown”,
“label”: “Slide In Down”
},
{
“value”: “slideInLeft”,
“label”: “Slide In Left”
},
{
“value”: “zoomIn”,
“label”: “Zoom In”
}
]
},
{
“type”: “text”,
“id”: “block_title_top”,
“label”: “Title Slideshow”,
“default”: “Basic Collection”
},
{
“type”: “color”,
“id”: “color_block_title_top”,
“label”: “Title Slideshow Color”,
“default”: “#010101”
},
{
“type”: “select”,
“id”: “effect_title”,
“label”: “Choose The Effect Title”,
“options”: [
{
“value”: “bounce”,
“label”: “Bounce”
},
{
“value”: “flash”,
“label”: “Flash”
},
{
“value”: “pulse”,
“label”: “Pulse”
},
{
“value”: “rubberBand”,
“label”: “Rubberband”
},
{
“value”: “shake”,
“label”: “Shake”
},
{
“value”: “swing”,
“label”: “Swing”
},
{
“value”: “tada”,
“label”: “tada”
},
{
“value”: “wobble”,
“label”: “Wobble”
},
{
“value”: “jello”,
“label”: “Jello”
},
{
“value”: “heartBeat”,
“label”: “HeartBeat”
},
{
“value”: “bounceIn”,
“label”: “BounceIn”
},
{
“value”: “bounceInDown”,
“label”: “Bounce In Down”
},
{
“value”: “bounceInLeft”,
“label”: “Bounce In Left”
},
{
“value”: “bounceInRight”,
“label”: “Bounce In Right”
},
{
“value”: “fadeIn”,
“label”: “Fade In”
},
{
“value”: “fadeInDown”,
“label”: “Fade In Down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade In Left”
},
{
“value”: “fadeInRight”,
“label”: “Fade In Right”
},
{
“value”: “fadeInUp”,
“label”: “Fade In Up”
},
{
“value”: “flipInX”,
“label”: “Flip In X”
},
{
“value”: “flipInY”,
“label”: “Flip In Y”
},
{
“value”: “lightSpeedIn”,
“label”: “Light Speed In”
},
{
“value”: “slideInUp”,
“label”: “Slide In Up”
},
{
“value”: “slideInRight”,
“label”: “Slide In Right”
},
{
“value”: “slideInDown”,
“label”: “Slide In Down”
},
{
“value”: “slideInLeft”,
“label”: “Slide In Left”
},
{
“value”: “zoomIn”,
“label”: “Zoom In”
}
]
},
{
“type”: “text”,
“id”: “block_title_top2”,
“label”: “Subtitle Slideshow”,
“default”: “Style Destination”
},
{
“type”: “color”,
“id”: “color_block_title_top2”,
“label”: " Subtitle Slideshow Color",
“default”: “#E5E5E5”
},
{
“type”: “select”,
“id”: “effect_title2”,
“label”: “Choose The Effect SubTitle”,
“options”: [
{
“value”: “bounce”,
“label”: “Bounce”
},
{
“value”: “flash”,
“label”: “Flash”
},
{
“value”: “pulse”,
“label”: “Pulse”
},
{
“value”: “rubberBand”,
“label”: “Rubberband”
},
{
“value”: “shake”,
“label”: “Shake”
},
{
“value”: “swing”,
“label”: “Swing”
},
{
“value”: “tada”,
“label”: “tada”
},
{
“value”: “wobble”,
“label”: “Wobble”
},
{
“value”: “jello”,
“label”: “Jello”
},
{
“value”: “heartBeat”,
“label”: “HeartBeat”
},
{
“value”: “bounceIn”,
“label”: “BounceIn”
},
{
“value”: “bounceInDown”,
“label”: “Bounce In Down”
},
{
“value”: “bounceInLeft”,
“label”: “Bounce In Left”
},
{
“value”: “bounceInRight”,
“label”: “Bounce In Right”
},
{
“value”: “fadeIn”,
“label”: “Fade In”
},
{
“value”: “fadeInDown”,
“label”: “Fade In Down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade In Left”
},
{
“value”: “fadeInRight”,
“label”: “Fade In Right”
},
{
“value”: “fadeInUp”,
“label”: “Fade In Up”
},
{
“value”: “flipInX”,
“label”: “Flip In X”
},
{
“value”: “flipInY”,
“label”: “Flip In Y”
},
{
“value”: “lightSpeedIn”,
“label”: “Light Speed In”
},
{
“value”: “slideInUp”,
“label”: “Slide In Up”
},
{
“value”: “slideInRight”,
“label”: “Slide In Right”
},
{
“value”: “slideInDown”,
“label”: “Slide In Down”
},
{
“value”: “slideInLeft”,
“label”: “Slide In Left”
},
{
“value”: “zoomIn”,
“label”: “ZoomIn”
}
]
},
{
“type”: “text”,
“id”: “block_buton”,
“label”: “Button Slideshow”,
“default”: “Shop now”
},
{
“type”: “color”,
“id”: “color_block_button”,
“label”: “Button Color”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_hover_button”,
“label”: “Background Hover Color”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_hover_text”,
“label”: “Text Hover Color”,
“default”: “#000”
},
{
“type”: “url”,
“id”: “block_url”,
“label”: “URL Button & Slideshow”,
“default”: “/collections/all”
},
{
“type”: “select”,
“id”: “effect_title3”,
“label”: “Choose The Effect Button”,
“options”: [
{
“value”: “bounce”,
“label”: “Bounce”
},
{
“value”: “flash”,
“label”: “Flash”
},
{
“value”: “pulse”,
“label”: “Pulse”
},
{
“value”: “rubberBand”,
“label”: “Rubberband”
},
{
“value”: “shake”,
“label”: “Shake”
},
{
“value”: “swing”,
“label”: “Swing”
},
{
“value”: “tada”,
“label”: “tada”
},
{
“value”: “wobble”,
“label”: “Wobble”
},
{
“value”: “jello”,
“label”: “Jello”
},
{
“value”: “heartBeat”,
“label”: “HeartBeat”
},
{
“value”: “bounceIn”,
“label”: “BounceIn”
},
{
“value”: “bounceInDown”,
“label”: “Bounce In Down”
},
{
“value”: “bounceInLeft”,
“label”: “Bounce In Left”
},
{
“value”: “bounceInRight”,
“label”: “Bounce In Right”
},
{
“value”: “fadeIn”,
“label”: “Fade In”
},
{
“value”: “fadeInDown”,
“label”: “Fade In Down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade In Left”
},
{
“value”: “fadeInRight”,
“label”: “Fade In Right”
},
{
“value”: “fadeInUp”,
“label”: “Fade In Up”
},
{
“value”: “flipInX”,
“label”: “Flip In X”
},
{
“value”: “flipInY”,
“label”: “Flip In Y”
},
{
“value”: “lightSpeedIn”,
“label”: “Light Speed In”
},
{
“value”: “slideInUp”,
“label”: “Slide In Up”
},
{
“value”: “slideInRight”,
“label”: “Slide In Right”
},
{
“value”: “slideInDown”,
“label”: “Slide In Down”
},
{
“value”: “slideInLeft”,
“label”: “Slide In Left”
},
{
“value”: “zoomIn”,
“label”: “Zoom In”
}
]
},
{
“type”: “header”,
“content”: “Image or Video Slideshow”
},
{
“type”: “checkbox”,
“id”: “ena_slide_video”,
“label”: “Enable Slide Video”
},
{
“type”: “textarea”,
“id”: “url_ytb_video”,
“label”: “Iframe Youtube Or Vimeo Video”
},
{
“type”: “image_picker”,
“id”: “block_banerimage”,
“label”: “Image On Desktop”,
“info”: “1920 x 900px recommended”
},
{
“type”: “image_picker”,
“id”: “block_banerimage_mb”,
“label”: “Image On Mobile”,
“info”: " 500px 600px recommended"
}
]
}
],
“presets”: [
{
“name”: “SLIDESHOW”,
“category”: “HOME”,
“blocks”: [
{
“type”: “slideshow”,
“settings”: {
“block_title_top”: “Basic Collection”,
“block_title_top2”: “Style Destination”,
“block_buton”: “Shop now”
}
},
{
“type”: “slideshow”,
“settings”: {
“block_title_top”: “Spring Collection”,
“block_title_top2”: “Hanpicked By Moocha”,
“block_buton”: “Shop now”
}
},
{
“type”: “slideshow”,
“settings”: {
“block_title_top”: “Kids Collection”,
“block_title_top2”: “Everything For Chirdren”,
“block_buton”: “Shop now”

}
}
]
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}

6

jose lo ingrese dentro del mismo código pero las imagenes no pasan lateralmente se agrandan en la animación

7

@carlosrabbit , veo que la sección usa una librería llamada Slick, sí no eres experto en desarrollo lo recomendable es puedas encontrar algún recurso que te permita hacer esto que necesitas o contactar con un desarrollador.

Sí con lo que te envíe no se solucionó entonces ya requiere un analisis mas profundo para solucionar el problema que estas presentando porque puede que simplementa sea un problema en la estructura del slide o las propiedades y por eso se daña el diseño.

Sí te quieres arriesgar un poco mas allá, en este repo puedes encontrar algunas sections que te pueden servir para sustituir tu slide actual:

https://github.com/iShopifyExpert/custom-slider

Aquí te recomiendo, si no es necesario usar el tema actual busca un tema gratuito para que puedas aprovechar las nuevas funcionalidades que estos tienen en los personal Dawn tiene muy buenos componentes y personalización.