FLEX SLIDER IN SHOPIFY 9️⃣

-

 

----------------------------------------------------------------------------------------------------------------------
FLEX SLIDER IN SHOPIFY CODE FOR SECTION FILE  slideshow.liquid
READ MORE







--------------------------------------------------------------------------------
<!-- REMOVE DEFER IN VENDOR IN THEME LIQUID -->
<script src="{{ 'vendor.js' | asset_url }}"></script>
------------------------------------------------------------------------------------------------------------
SECTION SLIDESHOW LIQUID FILE CODE
OR  THIS LINK
<script defer src="
https://www.jqueryscript.net/demo/Awesome-Fully-Responsive-
jQuery-Slider-FlexSlider/jquery.flexslider.js"></script>
READ MORE
https://shopifyjs.blogspot.com/2020/11/supply-vendor-extract-js-and-use_23.html
---------------------------------------------------------------------------------------------------------
<style>
div#shopify-section-slideshow {
margin: auto;
width: 800px;
height:220px;
border: 3px solid green;
padding: 10px;
}
</style>
<!--UPLOADER FlexSlider JavaScript File In Asset Folder -->
{{'jquery.flexslider.js' | asset_url | script_tag }}

<style>
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.c496e9cf2031deec4c4bca338faa81971c8631d4.woff2?&hmac=b9a918bf2f468523f460d46c1177ce19f91e4e2d2e985e9790e19f7a38d94a90") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.78b0223375c94b39ce1af7e09a0225f2bb3d05f7.woff?&hmac=8239ed8fbc7d038e4f5187456563d0dfae3f53b3737d96c3d6b510d70dafb13d") format("woff")
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2?&hmac=a51355a3cbe15aebc1c1554760a284fd97876d256948d4151d76b08cd7a65c73") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.18a018b6c83e89030c5d70a6d4c02c969f228500.woff?&hmac=1f425240c6882b6b59bf030962238f189bee59b0451390685d40a5a2eb939f4b") format("woff")
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2?&hmac=a51355a3cbe15aebc1c1554760a284fd97876d256948d4151d76b08cd7a65c73") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.18a018b6c83e89030c5d70a6d4c02c969f228500.woff?&hmac=1f425240c6882b6b59bf030962238f189bee59b0451390685d40a5a2eb939f4b") format("woff")
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.c496e9cf2031deec4c4bca338faa81971c8631d4.woff2?&hmac=b9a918bf2f468523f460d46c1177ce19f91e4e2d2e985e9790e19f7a38d94a90") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.78b0223375c94b39ce1af7e09a0225f2bb3d05f7.woff?&hmac=8239ed8fbc7d038e4f5187456563d0dfae3f53b3737d96c3d6b510d70dafb13d") format("woff")
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2?&hmac=a51355a3cbe15aebc1c1554760a284fd97876d256948d4151d76b08cd7a65c73") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_n5.18a018b6c83e89030c5d70a6d4c02c969f228500.woff?&hmac=1f425240c6882b6b59bf030962238f189bee59b0451390685d40a5a2eb939f4b") format("woff")
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: italic;
src: url("https://fonts.shopifycdn.com/montserrat/montserrat_i7.83866c3eec90071fa974c17980ffb42977f9e667.woff2?&hmac=49e2f753aa1bbed2499a3208c3f2e6969080a740e643ad544e4e9d95dbdd13a9") format("woff2"),url("https://fonts.shopifycdn.com/montserrat/montserrat_i7.25524241b12d864609c85325613d60efcf1a87e3.woff?&hmac=52d5d1f52cacaac04dec2f10df0bcaeec767bd41569a43d36480d4a16030455d") format("woff")
}
@font-face {
font-family: "icons";
src: url("//cdn.shopify.com/s/files/1/0042/9811/3117/t/9/assets/icons.eot?v=12799323123844063080");
src: url("//cdn.shopify.com/s/files/1/0042/9811/3117/t/9/assets/icons.eot?v=12799323123844063080#iefix") format("embedded-opentype"),url("//cdn.shopify.com/s/files/1/0042/9811/3117/t/9/assets/icons.woff?v=12824116054993862840") format("woff"),url("//cdn.shopify.com/s/files/1/0042/9811/3117/t/9/assets/icons.ttf?v=14842525264320281252") format("truetype"),url("//cdn.shopify.com/s/files/1/0042/9811/3117/t/9/assets/icons.svg?v=3824197220449812877#timber-icons") format("svg");
font-weight: normal;
font-style: normal
}
.clearfix:after {
content: "";
display: table;
clear: both
}
*,input,:before,:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display: block
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline
}
html,body {
padding: 0;
margin: 0;
background-color: #fff
}
html.js .no-js,body.js .no-js {
display: block
}
html.no-js .no-js,body.no-js .no-js {
display: none !important
}
.wrapper {
max-width: 1060px;
margin: 0 auto;
padding: 0 15px
}
.wrapper:after {
content: "";
display: table;
clear: both
}
@media screen and (min-width: 481px) {
.wrapper {
padding:0 30px
}
}
.main-content {
display: block;
padding-top: 30px;
padding-bottom: 60px
}
.demo-image {
background: url("//cdn.shopify.com/s/files/1/0383/9765/t/1/assets/blankslate-producticon.png?4") no-repeat center center #eee;
display: block;
text-align: center;
padding: 100px 0;
color: #aaa;
font-size: 0.875em;
text-decoration: none
}
.flexslider {
margin: 0 0 45px;
padding: 0
}
.flexslider li {
margin: 0;
max-width: 100%
}
.flexslider .slides>li {
display: none;
margin: 0;
position: relative;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden
}
.flexslider .slides>li .slide-hide {
visibility: hidden
}
.flexslider .slides img {
max-width: 100%;
margin: 0 auto;
display: block
}
.flexslider .slides .placeholder-noblocks {
width:250px;
height:140px;
width: 100%;
background: #fff;
border: 4px solid #fff;
max-height: 100%
}
@media screen and (min-width: 769px) {
.flexslider .slides .placeholder-noblocks {
width:250px;
height:140px;
background: #fff;
border: 4px solid #fff;
}
}
@media screen and (max-width: 768px) {
.flexslider .slides .placeholder-noblocks {
height:30vh
}
}
.slides:after {
content: "";
display: table;
clear: both
}
html[xmlns] .slides {
display: block
}
* html .slides {
height: 1%
}
.no-js .slides>li:first-child {
display: block
}
.flexslider {
position: relative;
zoom:1}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease
}
.loading .flex-viewport {
max-height: 300px
}
.flexslider .slides {
zoom:1}
.carousel li {
margin-right: 5px
}
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none
}
.flex-direction-nav {
*height: 0
}
.flex-direction-nav a {
display: block;
width: 45px;
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease
}
.flex-direction-nav .flex-disabled {
opacity: 0 !important;
filter: alpha(opacity=0);
cursor: default
}
.flex-direction-nav a {
text-indent: -9999px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 20px auto
}
.flex-direction-nav a.flex-prev {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0xOC43LDBMMCwxOS43TDE4LjcsNDBjMCwwLDUuMi0xLDMuMS0zLjFTNS43LDE5LjcsNS43LDE5LjdzMTQtMTQuNSwxNi4xLTE2LjZTMTguNywwLDE4LjcsMHoiLz4NCjwvc3ZnPg0K");
background-position: center left
}
.flex-direction-nav a.flex-next {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0wLjUsMy4xYzIuMSwyLjEsMTYuMSwxNi42LDE2LjEsMTYuNlMyLjYsMzQuOCwwLjUsMzYuOVMzLjYsNDAsMy42LDQwbDE4LjctMjAuM0wzLjYsMEMzLjYsMC0xLjYsMSwwLjUsMy4xDQoJeiIvPg0KPC9zdmc+DQo=");
background-position: center right
}
.flex-control-nav {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
list-style: none
}
.flex-control-nav li {
margin: 0 4px;
display: inline-block;
zoom:1;*display: inline;
vertical-align: middle
}
.flex-control-paging li a {
width: 12px;
height: 12px;
display: block;
background-color: #ececec;
cursor: pointer;
text-indent: -9999px;
border-radius: 20px;
border: 2px solid #fff;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out
}
.flex-control-paging li a:hover {
background-color: #d3d3d3
}
.flex-control-paging li a.flex-active {
background-color: #fff;
border-color: #528ec1;
cursor: default
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer
}
.flex-control-thumbs img:hover {
opacity: 1
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default
}
@media screen and (max-width: 768px) {
.flex-direction-nav a {
opacity:1;
width: 25px
}
.flex-direction-nav a.flex-prev {
left: 0;
background-position: center right
}
.flex-direction-nav a.flex-next {
right: 0;
background-position: center left
}
}
@media screen and (min-width: 769px) {
.flex-direction-nav .flex-prev {
left:10px
}
.flex-direction-nav .flex-next {
right: 10px
}
.flexslider:hover .flex-prev {
opacity: 1;
left: -25px
}
.flexslider:hover .flex-next {
opacity: 1;
right: -25px
}
}
@media screen and (min-width: 1120px) {
.flex-direction-nav .flex-prev {
left:20px
}
.flex-direction-nav .flex-next {
right: 20px
}
.flexslider:hover .flex-prev {
opacity: 1;
left: -45px
}
.flexslider:hover .flex-next {
opacity: 1;
right: -45px
}
}
.flexslider .slides {
margin: 0;
padding: 0;
list-style-type: none
}
.slide-link {
display: block
}
.slide-link img {
display: block
}

.lazyload__image-wrapper {
display: block;
margin-bottom: 10px;
position: relative;
margin: 0 auto
}
.lazyload__image-wrapper img {
display: block
}
.lazyload__image-wrapper img {
display: block;
width: 100%;
margin: 0 auto;
position: absolute;
top: 0
}
.lazyload__image-wrapper img.lazyload {
opacity: 0
}
@media screen and (min-width: 769px) {
.header-logo__image {
margin:0
}
}
</style>
<script>
$(document).ready(function(){
// http://jsfiddle.net/helgatheviking/BSwJn/ FLEX SLIDER CODE CHANGE MAX ITEM 
// START JAVASCRIPT CODE WHICH GET FROM theme.js.liquid-->

theme.Slideshow = function(el) {
$slider: $(el),
$('.flexslider').flexslider({
animation: 'slide',
animationSpeed:500,
pauseOnHover: true,
keyboard: false,
itemWidth:250,
itemHeight:300,
minItems: 3,
maxItems: 12,
slideshow: $(el).data('slider-home-auto'),
slideshowSpeed: $(el).data('slider-home-rate'),
smoothHeight: true,
before: function(slider) {
$(slider).resize();
$(slider)
.find('.slide')
.not('.flex-active-slide')
.removeClass('slide-hide');
},
after: function(slider) {
$(slider)
.find('.slide')
.not('.flex-active-slide')
.addClass('slide-hide');
$(slider).resize();
},
start: function(slider) {
$(slider)
.find('.slide')
.not('.flex-active-slide')
.addClass('slide-hide');
if (
$(slider)
.find('.slide')
.not('.clone').length === 1
) {
$(slider)
.find('.flex-direction-nav')
.remove();
}
$(window).trigger('resize');
slider.addClass('loaded');
if ($('#slider').data('loaded-index') !== undefined) {
$('#slider').flexslider($('#slider').data('loaded-index'));
}
}
});

if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.cache.$slider.flexslider(this.cache.sliderArgs);
};

theme.slideshows = theme.slideshows || {};

theme.SlideshowSection = (function() {
function SlideshowSection(container) {
var $container = (this.$container = $(container));
var id = $container.attr('data-section-id');
var slideshow = (this.slideshow = '#heroSlider--' + id);
var numberOfSlides = $(slideshow).find('li').length;

if (numberOfSlides <= 0) return;

theme.slideshows[slideshow] = new theme.Slideshow(slideshow);
}

return SlideshowSection;
})();

theme.SlideshowSection.prototype = _.assignIn(
{},
theme.SlideshowSection.prototype,
{
onUnload: function() {
delete theme.slideshows[this.slideshow];
},

onBlockSelect: function(evt) {
var $slideshow = $(this.slideshow);
var $slide = $('#slide--' + evt.detail.blockId + ':not(.clone)');

var slideIndex = $slide.data('flexslider-index');
var $slideImg = $slide.find('img') || $slide.find('svg');

$slide.imagesLoaded($slideImg, function() {
$slideshow.flexslider(slideIndex);
$slideshow.resize();
$slideshow.flexslider('pause');
});
},

onBlockDeselect: function() {
$(this.slideshow).flexslider('play');
}
}
);

$(document).ready(function() {
var sections = new theme.Sections();
sections.register('slideshow-section', theme.SlideshowSection);
});

// FINISH JAVASCRIPT CODE WHICH GET FROM theme.js.liquid
});
</script> 
<div class="flexslider" id="heroSlider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-slider-home-auto="{{ section.settings.slider_home_auto }}" data-slider-home-rate="{{ section.settings.slider_home_rate }}">
<ul class="slides">
{% for block in section.blocks %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.slide != blank %}
{% if block.settings.link %}
<a href="{{ block.settings.link }}" class="slide-link">
{% endif %}
{%- assign image = block.settings.slide -%}
{%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 1000 -%}
{%- assign max_height = 1500 -%}

<!--CREATE SNIPPET image-logic.liquid  In SNIPPET FOLDER -->
{%- include 'image-logic' with width: max_width, height: max_height -%}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img
class="lazyload js {% if forloop.index > 1%}lazypreload{% endif %}"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>

<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% comment %}<img src="{{ image | img_url: '1024x' }}"
srcset="{{ image | img_url: '1024x' }} 1x, {{ image | img_url: '1024x', scale: 2 }} 2x" alt="{{ image.alt }}">{% endcomment %}

{% if block.settings.link %}
</a>
{% endif %}

{% else %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{% capture svg_tag_class %}placeholder-noblocks slide-link slide-link--{{ block.id }}{% endcapture %}
{%- assign placeholder = 'placeholder-lifestyle-' | append: current -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: svg_tag_class }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>


{% schema %}
{
"name": {
"cs": "Prezentace",
"da": "Diasshow",
"de": "Slideshow",
"en": "FlexSlider",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pl": "Pokaz slajdów",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"tr": "Slayt gösterisi",
"vi": "Bản trình chiếu",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"class": "slider-section",
"max_blocks": 12,
"settings": [
{
"type": "checkbox",
"id": "slider_home_auto",
"label": {
"cs": "Automaticky otočit snímky",
"da": "Roter automatisk slides",
"de": "Auto-rotieren der Slides",
"en": "Auto-rotate slides",
"es": "Rotar las diapositivas automáticamente",
"fi": "Käännä diat automaattisesti",
"fr": "Rotation automatique des diapositives",
"hi": "ऑटो-रोटेट स्लाइड",
"it": "Ruota slide automaticamente",
"ja": "スライドの自動切り替え",
"ko": "슬라이드 자동 회전",
"nb": "Autoroter lysbildene",
"nl": "Dia's automatisch draaien",
"pl": "Automatycznie obracaj slajdy",
"pt-BR": "Rodar os slides automaticamente",
"pt-PT": "Reprodução automática de diapositivos",
"sv": "Auto-rotera bilder",
"th": "หมุนสไลด์อัตโนมัติ",
"tr": "Slaytları otomatik olarak döndür",
"vi": "Tự động xoay vòng trang chiếu",
"zh-CN": "自动旋转幻灯片",
"zh-TW": "自動旋轉投影片"
}
},
{
"type": "select",
"id": "slider_home_rate",
"label": {
"cs": "Doba trvání přechodu",
"da": "Overførselstid",
"de": "Übergangszeit",
"en": "Transition time",
"es": "Tiempo de transición",
"fi": "Siirtymäaika",
"fr": "Temps de transition",
"hi": "हस्तांतरण का समय",
"it": "Tempo transizione",
"ja": "トランジション時間",
"ko": "전환 시간",
"nb": "Overgangstid",
"nl": "Overgangstijd",
"pl": "Czas przejścia",
"pt-BR": "Tempo da transição",
"pt-PT": "Tempo da transição",
"sv": "Övergångstid",
"th": "เวลาเปลี่ยน",
"tr": "Geçiş süresi",
"vi": "Thời gian chuyển",
"zh-CN": "过渡时间",
"zh-TW": "轉場時間"
},
"options": [
{
"value": "5000",
"label": {
"cs": "5 s",
"da": "5 sekunder",
"de": "5 Sekunden",
"en": "5 seconds",
"es": "5 segundos",
"fi": "5 sekuntia",
"fr": "5 secondes",
"hi": "5 सेकंड",
"it": "5 secondi",
"ja": "5秒",
"ko": "5초",
"nb": "5 sekunder",
"nl": "5 seconden",
"pl": "5 sekund",
"pt-BR": "5 segundos",
"pt-PT": "5 segundos",
"sv": "5 sekunder",
"th": "5 วินาที",
"tr": "5 saniye",
"vi": "5 giây",
"zh-CN": "5 秒",
"zh-TW": "5 秒"
}
},
{
"value": "7000",
"label": {
"cs": "7 s",
"da": "7 sekunder",
"de": "7 Sekunden",
"en": "7 seconds",
"es": "7 segundos",
"fi": "7 sekuntia",
"fr": "7 secondes",
"hi": "7 सेकंड",
"it": "7 secondi",
"ja": "7秒",
"ko": "7초",
"nb": "7 sekunder",
"nl": "7 seconden",
"pl": "7 sekund",
"pt-BR": "7 segundos",
"pt-PT": "7 segundos",
"sv": "7 sekunder",
"th": "7 วินาที",
"tr": "7 saniye",
"vi": "7 giây",
"zh-CN": "7 秒",
"zh-TW": "7 秒"
}
},
{
"value": "10000",
"label": {
"cs": "10 s",
"da": "10 sekunder",
"de": "10 Sekunden",
"en": "10 seconds",
"es": "10 segundos",
"fi": "10 sekuntia",
"fr": "10 secondes",
"hi": "10 सेकंड",
"it": "10 secondi",
"ja": "10秒",
"ko": "10초",
"nb": "10 sekunder",
"nl": "10 seconden",
"pl": "10 sekund",
"pt-BR": "10 segundos",
"pt-PT": "10 segundos",
"sv": "10 sekunder",
"th": "10 วินาที",
"tr": "10 saniye",
"vi": "10 giây",
"zh-CN": "10 秒",
"zh-TW": "10 秒"
}
},
{
"value": "15000",
"label": {
"cs": "15 s",
"da": "15 sekunder",
"de": "15 Sekunden",
"en": "15 seconds",
"es": "15 segundos",
"fi": "15 sekuntia",
"fr": "15 secondes",
"hi": "15 सेकंड",
"it": "15 secondi",
"ja": "15秒",
"ko": "15초",
"nb": "15 sekunder",
"nl": "15 seconden",
"pl": "15 sekund",
"pt-BR": "15 segundos",
"pt-PT": "15 segundos",
"sv": "15 sekunder",
"th": "15 วินาที",
"tr": "15 saniye",
"vi": "15 giây",
"zh-CN": "15 秒",
"zh-TW": "15 秒"
}
}
]
}
],
"presets": [
{
"name": {
"cs": "Prezentace",
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pl": "Pokaz slajdów",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"tr": "Slayt gösterisi",
"vi": "Bản trình chiếu",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"blocks": [
{
"type": "image"
}
]
}
],
"blocks": [
{
"type": "image",
"name": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"settings": [
{
"type": "image_picker",
"id": "slide",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"info": {
"cs": "Doporučujeme 1 000 × 800 pixelů",
"da": "1.000 x 500 px anbefales",
"de": "1000 x 500px empfohlen",
"en": "1000 x 500px recommended",
"es": "1000 x 500px recomendado",
"fi": "Suositus 1000 x 500 px",
"fr": "1000 x 500 px recommandé",
"hi": "1000 x 500px की अनुशंसा की जाती है",
"it": "Dimensione consigliata: 1000 x 500 pixel",
"ja": "1000 x 500ピクセルを推奨",
"ko": "1280 x 800 픽셀 권장",
"nb": "1000 x 500 piksler anbefales",
"nl": "1000 x 500px aanbevolen",
"pl": "Zalecane 1000 x 500 px",
"pt-BR": "1.000 x 500 px recomendado",
"pt-PT": "1000 x 500 px recomendado",
"sv": "1 280 x 800px rekommenderas",
"th": "แนะนำขนาด 1000 x 500px พิกเซล",
"tr": "1000 x 500 piksel önerilir",
"vi": "Đề xuất 1000 x 500px",
"zh-CN": "推荐使用 1000 x 500 px 大小",
"zh-TW": "建議使用 1000 x 500px"
}
},
{
"type": "url",
"id": "link",
"label": {
"cs": "URL odkazu",
"da": "Link-webadresse",
"de": "Link URL",
"en": "Link URL",
"es": "URL del enlace",
"fi": "Linkin URL",
"fr": "Lien URL",
"hi": "URL लिंक करें",
"it": "Link URL",
"ja": "リンクURL",
"ko": "링크 URL",
"nb": "Nettadresse for kobling",
"nl": "URL van link",
"pl": "Adres URL linku",
"pt-BR": "URL do link",
"pt-PT": "URL da ligação",
"sv": "Länk-URL",
"th": "ลิงก์ URL",
"tr": "Bağlantı URL'si",
"vi": "URL liên kết",
"zh-CN": "链接 URL",
"zh-TW": "連結 URL"
}
}
]
}
]
}
{% endschema %}

-----------------------------------------------------------------------------------------------------------------------

image-logic.liquid CODE

-----------------------------------------------------------------------------------------------------------------------
{% if image.aspect_ratio < 1 %}
{% assign max_width = height | times: image.aspect_ratio %}
{% if image.height < height %}
{% assign max_height = image.height %}
{% assign max_width = image.width %}
{% else %}
{% assign max_height = height %}
{% endif %}
{% else %}
{% assign max_height = width | divided_by: image.aspect_ratio %}
{% if image.width < width %}
{% assign max_height = image.height %}
{% assign max_width = image.width %}
{% else %}
{% assign max_width = width %}
{% endif %}
{% endif %}
-----------------------------------------------------------------------------------------------------------------------
FLEXSILDER STYLE CAHNGE THIS PART
-----------------------------------------------------------------------------------------------------------------------
theme.Slideshow = function(el) {
$('.flexslider').flexslider({
animation: 'slide',
animationSpeed:500,
pauseOnHover: true,
keyboard: false,
});
if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.flexslider.$slider.flexslider(this.cache.sliderArgs);
};
-----------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
-----------------------------------------------------------------------------------------------------------------------
theme.Slideshow = function(el) {
$('.flexslider').flexslider({
animation: 'slide',
animationSpeed:500,
pauseOnHover: true,
keyboard: false,
itemWidth:250,
itemHeight:300,
minItems: 3,
maxItems: 12, 
});
if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.flexslider.$slider.flexslider(this.cache.sliderArgs);
};
-----------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE FORPLAY PAUSE BUTTON
-----------------------------------------------------------------------------------------------------------------------
theme.Slideshow = function(el) {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 3,
pausePlay: true,
mousewheel: true,
rtl: true,
asNavFor:'.flexslider'
});
if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.flexslider.$slider.flexslider(this.cache.sliderArgs);
};
-----------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE FORPLAY PAUSE BUTTON
/* PLAY PAUSE BUTTON CSS CODE */
@font-face {
font-family: 'flexslider-icon';
src: url('https://rawgit.com/woothemes/FlexSlider/master/fonts/flexslider-icon.eot');
src: url('https://rawgit.com/woothemes/FlexSlider/master/fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('https://rawgit.com/woothemes/FlexSlider/master/fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('https://rawgit.com/woothemes/FlexSlider/master/fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}   
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
-----------------------------------------------------------------------------------------------------------------------
theme.Slideshow = function(el) {
$('.flexslider').flexslider({
animation: 'slide',
animationSpeed:500,
pauseOnHover: true,
keyboard: false,
itemWidth:250,
itemHeight:300,
minItems: 3,
maxItems: 12, 
pausePlay: true,
mousewheel: true,
});
if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.flexslider.$slider.flexslider(this.cache.sliderArgs);
};
-----------------------------------------------------------------------------------------------------------------------
READ MORE:
-----------------------------------------------------------------------------------------------------------------------
HOW TO ADD THUMBNAIL IN FLEXSLIDER
ADD NEW AJAX JQUERY FILE AND FLEXSLIDER 
OR CHANGE OLD CODE WITH NEW CODE
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.
or use controlNav: "thumbnails IN ABOVE  CODE
AND GET FLEX SLIDER SUPPLY THEME CODE
https://shopifyjs.blogspot.com/2020/11/supply-vendor-extract-js-and-use_23.html
--------------------------------------------------------------------------------------------
theme.Slideshow = function(el) {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
slideshow: false
});
if (this.cache.$slider.find('li').length === 1) {
this.cache.sliderArgs.touch = false;
}
this.flexslider.$slider.flexslider(this.cache.sliderArgs);
};

---------------------------------------------------
MINI FLEXSLIDER AND SCHEMA CODE
---------------------------------------------------
<div class="flexslider" id="heroSlider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-slider-home-auto="{{ section.settings.slider_home_auto }}" data-slider-home-rate="{{ section.settings.slider_home_rate }}">
<ul class="slides">
{% for block in section.blocks %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.slide != blank %}
{% if block.settings.link %}
<a href="{{ block.settings.link }}" class="slide-link">
{% endif %}
{%- assign image = block.settings.slide -%}
<img src="{{ image | img_url: '300x' }}">
{% if block.settings.link %}
</a>
{% endif %}
{% else %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{% capture svg_tag_class %}placeholder-noblocks slide-link slide-link--{{ block.id }}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: svg_tag_class }}
<!-- AFTER ELSE SVG LINK IMAGE CHANGE WITH IMAGE LINK -->
<!-- <img src="https://via.placeholder.com/250x170/000/ff"> -->
{% endif %}
</li>
{% endfor %}
</ul>
</div>

 
{% schema %}
{
 
"class": "slider-section",
"max_blocks": 12,
 
 
"blocks": [
 
{
"type": "image",
"name": {
"en": "Image"
},
 
"settings": [
{
"type": "image_picker",
"id": "slide",
"label": {
 
"en": "Image Picker"
}
}
]
 
 
}
]
}
{% endschema %}
----------------------------------------------------------------------------------------------





Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more