@KetanKumar Ketan the top code is from my new theme. There I would like to add a mobile version.
The following code is from my current theme, where you added that yourself. I would like to add this feature exactly in my new theme.
I was going to bring the theme online last week, I’m just missing this feature. Could you solve this for me. That would make me very happy.
{%- 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 %}
{% endif %}
{% if section.settings.layout == 'fixed_width' %}
{% else %}
{% endif %}
1 %}
data-slick-auto data-slick='{
"rtl": false,
"rows": 0,
"dots": true,
"arrows": false,
"fade": {{ fadein }},
"autoplay": {{ autoplay }},
"autoplaySpeed": {{ time }},
"infinite": true,
"adaptiveHeight": true,
"slidesToScroll": 1,
"mobileFirst": true,
"lazyLoad": "ondemand",
"prevArrow": "
",
"nextArrow": "
",
"responsive": [
{
"breakpoint": 1100,
"settings": {
"dots": {{ dots }},
"arrows": {{ arrows }}
}
}
]
}'
{% endif %}>
{% for block in section.blocks %}
{% assign img_url = block.settings.slide_image | img_url: 'master' %}
{% if block.type == 'image'%}
{% if block.settings.slide_image == blank %}
{% if section.settings.slide_height == 'large' %}
1920x900
{% elsif section.settings.slide_height == 'medium' %}
1920x720
{% elsif section.settings.slide_height == 'small' %}
1920x500
{% endif %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% else %}
{% if forloop.index == 1 %}
{% if block.settings.slide_image_mobile != blank %}
{% endif %}
{% else %}
{% if block.settings.slide_image_mobile != blank %}
{% endif %}
{% endif %}
{% endif %}
{% if block.settings.link != blank %}{% endif %}
{% else %}
{% if block.settings.video_link != blank %}
{% endif %}
{% if block.settings.video_mp4_link != blank %}
{% endif %}
{% endif %}
{% if block.settings.slide_heading != blank or block.settings.slide_des != blank or block.settings.slide_button != blank %}
{% if block.settings.sub_title != blank %}
#####
{{ block.settings.sub_title }}
{% endif %}
{% if block.settings.slide_heading != blank %}
##
{{ block.settings.slide_heading }}
{% endif %}
{% if block.settings.slide_des != blank %}
{{ block.settings.slide_des }}
{% endif %}
{% if block.settings.countdown != blank %}
{% endif %}
{% if block.settings.slide_button != blank %}
{{ block.settings.slide_button }}
{% endif %}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Slideshow",
"max_blocks": 9,
"settings": [
{
"type": "header",
"content": "General"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "fixed_width",
"options": [
{
"label": "Full width",
"value": "full_width"
},
{
"label": "Fixed width",
"value": "fixed_width"
}
]
},
{
"type": "select",
"id": "slide_height",
"label": "Slide Height",
"default": "medium",
"options": [
{
"label": "Normal",
"value": "normal"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "large",
"options": [
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "overlay",
"label": "Overlays",
"default": "dark",
"options": [
{
"label": "Dark",
"value": "dark"
},
{
"label": "Light",
"value": "light"
}
]
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show Arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show dots",
"default": true
},
{
"type": "checkbox",
"id": "show_fadein",
"label": "Effect Fade In",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Slideshow Auto Play",
"default": true
},
{
"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_subheading",
"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_arrow",
"label": "Button Arrows Color"
},
{
"type": "color",
"id": "color_dot",
"label": "Button Dots Color"
}
],
"blocks" : [
{
"type": "image",
"name": "Image SlideShow",
"settings":[
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "slide_image",
"label" : "Image"
},
{
"type": "image_picker",
"id": "slide_image_mobile",
"label": "Image For Mobile",
"info": "Use image for mobile to load pages faster"
},
{
"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": "checkbox",
"id": "custom_position",
"label": "Enable Custom Position Content (Left to Right)"
},
{
"type": "range",
"id": "position",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Position",
"default": 0
},
{
"type": "text",
"id": "sub_title",
"label": "Sub Heading"
},
{
"type" : "text",
"id" : "slide_heading",
"label" : "Heading",
"default" : "Slideshow Heading"
},
{
"type": "text",
"id": "countdown",
"label": "Time Countdown",
"info": "2020/12/12 0:0:00"
},
{
"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" : "slide_button",
"label" : "Button Text",
"default" : "Shop The Collection"
},
{
"type" : "url",
"id" : "link",
"label" : "Button Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "style_1",
"options": [
{
"value": "style_1",
"label": "Style 1"
},
{
"value": "style_2",
"label": "Style 2"
}]
}
]
},
{
"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" : "slide_heading",
"label" : "Heading",
"default" : "Slideshow 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" : "slide_button",
"label" : "Button Text",
"default" : "Shop The Collection"
},
{
"type" : "url",
"id" : "link",
"label" : "Slide link"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Slideshow",
"blocks": [
{
"type": "image"
}
]
}]
}
{% endschema %}