Hey everyone!
I am changing my website and I reused some parts of the old one, but the video slideshow isn’t working in the new one as they were in the old one. (luzhomedesign.com)
The video show up, but the text isn’t in front of the video.
(old one)
(new one)
Here is the code: (slideshow-home.liquid)
{%- assign arrows = arrows | default: section.settings.show_arrows -%}
{%- assign dots = dots | default: section.settings.show_dots -%}
{%- assign fadein = fadein | default: section.settings.show_fadein -%}
{%- assign autoplay = autoplay | default: section.settings.autoplay -%}
{%- assign time = time | default: section.settings.autorotate_speed | times: 1000 -%}
{% if section.settings.custom_color %}
{% render 'style-slideshow-home' %}
{% endif %}
1 %}
data-slick='{
"rows": 0,
"dots": true,
"arrows": false,
"fade": {{ fadein }},
"autoplay": {{ autoplay }},
"autoplaySpeed": {{ time }},
"infinite": true,
"adaptiveHeight": true,
"slidesToScroll": 1,
"mobileFirst": true,
"prevArrow": "
",
"nextArrow": "
",
"responsive": [
{
"breakpoint": 1100,
"settings": {
"dots": {{ dots }},
"arrows": {{ arrows }}
}
}
]
}'
{% endif %}>
{% for block in section.blocks %}
{%- assign img_url = block.settings.image_slide | img_url: 'master' -%}
{% if block.type == 'image'%}
{% if block.settings.image_slide == blank %}
1920x600
{% else %}
{% if section.settings.show_image_parallax == false %}
{% if forloop.index == 1 %}
{% else %}
{% endif %}
{% if block.settings.image_slide_mb != blank %}
{%- assign img_url_mb = block.settings.image_slide_mb | img_url: 'master' -%}
{% endif %}
{% else %}
{% if block.settings.image_slide_mb != blank %}
{%- assign img_url_mb = block.settings.image_slide_mb | img_url: 'master' -%}
{% endif %}
{% endif %}
{% endif %}
{% if block.settings.link != blank %}
{% endif %}
{% for i in (1..4) %}
{% capture cap_product %}product_{{ i }}{% endcapture %}
{% assign product_id = block.settings[cap_product] %}
{% assign product = all_products[product_id] %}
{% capture cap_coordinates_y %}coordinates_y_{{ i }}{% endcapture %}
{% assign coordinates_y = block.settings[cap_coordinates_y] %}
{% capture cap_coordinates_x %}coordinates_x_{{ i }}{% endcapture %}
{% assign coordinates_x = block.settings[cap_coordinates_x] %}
{% if product != blank %}
+
{% render 'product-card-grid-2', product: product %}
{% endif %}
{% endfor %}
{% else %}
{% if block.settings.video_link != blank %}
<iframe class="youtube-player" id="player_{{ block.id }}" width="100%" height="100%" data-video-id="{{ block.settings.video_link }}" src="https://www.youtube.com/embed/{{ block.settings.video_link }}?enablejsapi=1&rel=0&autoplay=0&mute=1" frameborder="0" allowfullscreen=""></iframe>
{% elsif block.settings.video_mp4_link != blank %}
{% endif %}
{% endif %}
{% if block.settings.heading != blank or block.settings.slide-des != blank or block.settings.button_slide != blank %}
{% if block.settings.heading != blank and section.settings.show_content_bottom %}
{% if block.settings.sub_heading != blank%}
{{ block.settings.sub_heading }}
{% endif %}
{% endif %}
{% if block.settings.sub_heading != blank%}
{{ block.settings.sub_heading }}
{% endif %}
{% if block.settings.heading != blank %}
##
{{block.settings.heading}}
{% endif %}
{% if block.settings.slide-des != blank %}
{{block.settings.slide-des}}
{% endif %}
{% if block.settings.button_slide != blank %}
{{block.settings.button_slide}}
{% endif %}
{% endif %}
{% endfor %}
{% if section.settings.show_arrows_below %}
{% endif %}
{% schema %}
{
"name": "slideshow-home",
"max_blocks": 9,
"settings": [
{
"type": "header",
"content": "General"
},
{
"type": "select",
"id": "layout",
"label": "slideshow-home Layout:",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "full",
"label": "Full Width"
}
],
"default": "full"
},
{
"type": "select",
"id": "slide_height",
"label": "Slide Height",
"default": "medium",
"options": [
{
"label": "Adapt to image",
"value": "adapt"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
],
"info":"If you choose to use Parallax image please do not choose option Adapt to image"
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "large",
"options": [
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show Arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_arrows_below",
"label": "Show Arrows Below",
"default": false
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show dots",
"default": true
},
{
"type": "checkbox",
"id": "show_fadein",
"label": "Effect Fade In",
"default": true
},
{
"type": "checkbox",
"id": "show_image_parallax",
"label": "Image Parallax",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "slideshow-home Auto Play",
"default": true
},
{
"type": "checkbox",
"label": "Slider Show Button On Mobile?",
"id": "show_button_mb",
"default":false
},
{
"type": "checkbox",
"label": "Slider Content Show Bottom?",
"id": "show_content_bottom",
"default":false
},
{
"type": "text",
"id": "video_height",
"label": "slideshow-home Video Height",
"default": "44.2%",
"info": "You can adjust the height of video to be fit with slider image by %. Example: 30%, 44.2%, 51%."
},
{
"type": "range",
"id": "autorotate_speed",
"label": "Change slides every",
"max": 9,
"min": 3,
"step": 1,
"unit": "s",
"default": 5
},
{
"type": "header",
"content": "Custom Color"
},
{
"type": "checkbox",
"id": "custom_color",
"label": "Turn on custom color",
"default": false
},
{
"type": "color",
"id": "color_sub_heading",
"label": "Sub Heading Color"
},
{
"type": "color",
"id": "color_heading",
"label": "Heading Color"
},
{
"type": "color",
"id": "color_text",
"label": "Description Color"
},
{
"type": "color",
"id": "color_button_text",
"label": "Button Text Color"
},
{
"type": "color",
"id": "color_button_border",
"label": "Button Border Color"
},
{
"type": "color",
"id": "color_button_bg",
"label": "Button Background Color"
},
{
"type": "color",
"id": "color_button_text_hover",
"label": "Button Text Color Hover"
},
{
"type": "color",
"id": "color_button_border_hover",
"label": "Button Border Color Hover"
},
{
"type": "color",
"id": "color_button_bg_hover",
"label": "Button Background Color Hover"
},
{
"type": "color",
"id": "color_arrow",
"label": "Button Arrows Color"
},
{
"type": "color",
"id": "color_arrow_border",
"label": "Button Arrows Border Color"
},
{
"type": "color",
"id": "color_dot",
"label": "Button Dots Color"
},
{
"type": "color",
"id": "color_dot_border",
"label": "Button Dots Border Color"
}
],
"blocks" : [
{
"type": "image",
"name": "Image slideshow-home",
"settings":[
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "image_slide",
"label" : "Select Image",
"info": "Recommended Image: Width x Height (1920 x 600)px"
},
{
"type": "image_picker",
"id": "image_slide_mb",
"label" : "Select Image Mobile",
"info": "Recommended Image: Width x Height (450 x 300)px"
},
{
"type": "header",
"content": "Content"
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "middle",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type" : "text",
"id" : "sub_heading",
"label" : "Sub Heading"
},
{
"type" : "text",
"id" : "heading",
"label" : "Heading",
"default" : "slideshow-home Heading"
},
{
"type" : "textarea",
"id" : "slide-des",
"label" : "Slide Description",
"default": "Detiam in sapien odio senenatis leo maecenas de milancelos cosmour modio."
},
{
"type" : "text",
"id" : "button_slide",
"label" : "Button Text",
"default" : "Shop Now"
},
{
"type" : "url",
"id" : "link",
"label" : "Button Link"
},
{
"type": "header",
"content": "Product Popup"
},
{
"type": "product",
"label": "Product 1",
"id": "product_1"
},
{
"type": "range",
"id": "coordinates_x_1",
"label": "Coordinates x",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 36
},
{
"type": "range",
"id": "coordinates_y_1",
"label": "Coordinates y",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 48,
"info" : "=============="
},
{
"type": "product",
"label": "Product 2",
"id": "product_2"
},
{
"type": "range",
"id": "coordinates_x_2",
"label": "Coordinates x",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 20
},
{
"type": "range",
"id": "coordinates_y_2",
"label": "Coordinates y",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 20,
"info" : "=============="
},
{
"type": "product",
"label": "Product 3",
"id": "product_3"
},
{
"type": "range",
"id": "coordinates_x_3",
"label": "Coordinates x",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 30
},
{
"type": "range",
"id": "coordinates_y_3",
"label": "Coordinates y",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 30
},
{
"type": "product",
"label": "Product 4",
"id": "product_4"
},
{
"type": "range",
"id": "coordinates_x_4",
"label": "Coordinates x",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 30
},
{
"type": "range",
"id": "coordinates_y_4",
"label": "Coordinates y",
"max": 100,
"min": 0,
"step": 1,
"unit": "%",
"default": 30
}
]
},
{
"type": "video",
"name": "Video Slider",
"settings": [
{
"type": "header",
"content": "Youtube"
},
{
"type": "text",
"id": "video_link",
"label": "YouTube video ID",
"default": "eTCtDW7O1aM",
"info": "[Find your YouTube video ID](https://docs.joeworkman.net/rapidweaver/stacks/youtube/video-id)."
},
{
"type": "header",
"content": "MP4"
},
{
"type": "text",
"id": "video_mp4_link",
"label": "Video link",
"info": "just choose one option: YouTube or MP4"
},
{
"type": "header",
"content": "Content"
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "middle",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type" : "text",
"id" : "sub_heading",
"label" : "Sub Heading"
},
{
"type" : "text",
"id" : "heading",
"label" : "Heading",
"default" : "slideshow-home Heading"
},
{
"type" : "textarea",
"id" : "slide-des",
"label" : "Slide Description",
"default": "Use overlay text to give your customers insight into your brand. Select image and text that relates to your style and story."
},
{
"type" : "text",
"id" : "button_slide",
"label" : "Button Text",
"default" : "Shop The Collection"
},
{
"type" : "url",
"id" : "link",
"label" : "Slide link"
}
]
}
],
"presets": [{
"name": "slideshow-home",
"category": "slideshow-home",
"blocks": [
{
"type": "image"
}
]
}]
}
{% endschema %}
And the CSS (style-slideshow-home.liquid)