FROM CACHE - es_header

Configuración Banner

carlosrabbit
Nuevo miembro
11 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:
586 Vistas
0 Me gusta
Reportar
6 RESPUESTAS 6

joseamayadev
Shopify Partner
63 12 15
‎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
573 Vistas
0 Me gusta
Reportar
En respuesta a joseamayadev

carlosrabbit
Nuevo miembro
11 0 0
‎05-26-2023 11:09 AM

Este código donde lo integro?

CARLOS M/A
569 Vistas
0 Me gusta
Reportar
En respuesta a joseamayadev

carlosrabbit
Nuevo miembro
11 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
566 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit

carlosrabbit
Nuevo miembro
11 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
566 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit

carlosrabbit
Nuevo miembro
11 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
561 Vistas
0 Me gusta
Reportar
En respuesta a carlosrabbit

joseamayadev
Shopify Partner
63 12 15
‎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
518 Vistas
0 Me gusta
Reportar

Artículos del Blog de la Comunidad

Alejandro Moreno _ Getmore.jpg
Entrevista con Alejandro Moreno de Getmore

Hola Comunidad, Es un placer poder continuar brindándoos entrevistas de profesionales qu...

By Val Apr 9, 2024
business-owner-working-on-online-store.jpg
La Historia De Los Negocios Y La Razón Por Qué Empezar Tu Propio Negocio Nu...

Abrir una empresa puede ser un viaje apasionante. Se convierte en su propio jefe, puede ha...

By Javier Apr 9, 2024
jeshoots-com--2vD8lIhdnw-unsplash (1).jpg
Desvelando el misterio: ¿Por qué mi tienda en Shopify sigue sin vender?

¿Por qué mi tienda no vende? Esta es una pregunta muy común y una preocupación compre...

By Ann Apr 2, 2024
Términos de servicio Política de privacidad