FROM CACHE - es_header

Configuración Banner

carlosrabbit
Nuevo miembro
9 0 0
‎05-26-2023 12:53 AM

 

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 slideshowCaptura de pantalla 2023-05-26 a la(s) 00.45.42.pngCaptura de pantalla 2023-05-26 a la(s) 00.45.59.png ordenados con las animaciones correctas ya que hasta me desaparece una 

CARLOS M/A
Etiquetas:
75 Vistas
0 Me gusta
Reportar
6 RESPUESTAS 6
joseamayadev
Shopify Partner
41 10 7
‎05-26-2023 07:35 AM

@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.joseamayadev.com
62 Vistas
0 Me gusta
Reportar
En respuesta a joseamayadev
carlosrabbit
Nuevo miembro
9 0 0
‎05-26-2023 11:09 AM

Este código donde lo integro?

CARLOS M/A
58 Vistas
0 Me gusta
Reportar
En respuesta a joseamayadev
carlosrabbit
Nuevo miembro
9 0 0
‎05-26-2023 11:39 AM

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
55 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit
carlosrabbit
Nuevo miembro
9 0 0
‎05-26-2023 11:40 AM

<style>
.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;
}
}
</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>

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

{% 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
55 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit
carlosrabbit
Nuevo miembro
9 0 0
‎05-26-2023 04:57 PM

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

CARLOS M/A
50 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit
joseamayadev
Shopify Partner
41 10 7
‎05-30-2023 08:59 AM

@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.joseamayadev.com
7 Vistas
0 Me gusta
Reportar
Colaboradores principales
Ver todo

Artículos del Blog de la Comunidad

team-sales-business-meeting.jpg
Cómo usar los informes y estadísticas de Shopify para mejorar las conversio...

Saca el mayor partido y rendimiento a tus estrategias de marketing con el sistema de infor...

By Teo May 5, 2023
Javier_0-1680008638771.png
Cómo encontrar el soporte que necesitas

Una de las dificultades que los comerciantes en Shopify tienen a menudo es saber cuáles so...

By Javier Apr 21, 2023
shopify-presentation-matthew-herchel-pointing-at-board 1920x1080.jpg
AMA de la Comunidad de Shopify: resumen de 2H Media

Gracias a todos que participaron en nuestro AMA con 2H Media sobre la planificación del pr...

By Jacqui Apr 14, 2023
Términos de servicio Política de privacidad