Configuración Banner

carlosrabbit · ‎05-26-2023

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 ordenados con las animaciones correctas ya que hasta me desaparece una

CARLOS M/A

joseamaya · ‎05-26-2023

@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 %}
<div class="flex {% if count > 2 %}custom-class{% endif %}">
    {% for block in section.blocks %}
       <div class="item"></div>
    {% endfor %}
</div>

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.

José A. Amaya
Shopify Developer
www.joseamaya.com

carlosrabbit · ‎05-26-2023

Este código donde lo integro?

CARLOS M/A

carlosrabbit · ‎05-26-2023

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

CARLOS M/A

carlosrabbit · ‎05-26-2023

}
.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;
}
}
</style>
<div
data-section-id="{{ section.id }}"
data-section-type="section-slideshow-v1"
style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}"
>
<div class="section-slideshow-v1 ">
<div class="slider-container">
<ul id="lista-slider" class="slider">
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% if block.type == 'slideshow' %}
<li id="x-{{ forloop.index }}" class="slide-pc">
{% if block.settings.ena_slide_video %}
{% if block.settings.url_ytb_video != blank %}
<div class="over_slidevid"></div>
{{ block.settings.url_ytb_video }}
{% endif %}
{% else %}
{% if block.settings.block_banerimage != blank %}
<a href="{{block.settings.block_url}}" class="{% if forloop.index == 1 %}show{% endif %}">
<img
id="img-{{ forloop.index }}"
data-src="{{block.settings.block_banerimage | img_url: 'master'}}"
class="lazyload w-100"
alt="_img_slide_"
>
</a>
{% else %}
<a href="{{block.settings.block_url}}">
<img
data-src="//via.placeholder.com/1920x900"
class="lazyload img-fluid w-100"
alt="_img_slide_"
data-slick-index="{{ forloop.index }}"
>
</a>
{% endif %}
{% endif %}
</li>
<li id="x-{{ forloop.index }}" class="slide-cel">
{% if block.settings.block_banerimage_mb != blank %}
<a href="{{block.settings.block_url}}">
<img
data-src="{{block.settings.block_banerimage_mb | img_url: 'master'}}"
class="lazyload img-fluid w-100"
alt="_img_slide_"
>
</a>
{% else %}
<a href="{{block.settings.block_url}}">
<img
data-src="{{block.settings.block_banerimage | img_url: 'master'}}"
class="lazyload img-fluid w-100"
alt="_img_slide_"
>
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>

{% 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 %}

CARLOS M/A

carlosrabbit · ‎05-26-2023

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

CARLOS M/A

joseamaya · ‎05-30-2023

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

José A. Amaya
Shopify Developer
www.joseamaya.com

Configuración Banner

Configuración Banner

Artículos del Blog de la Comunidad