SHOPIFY DEBUT THEME SWIPER OR SLICK SLIDER AND ZOOM
---------------------------------------------------------------------------------------------------------------------------ADD SLICK SLIDER FOR SHOPIFY THEME
---------------------------------------------------------------------------------------------------------------------------
<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper">
<div class="slideshow slideshow--"id="Slideshow-{{ section.id }}"data-slide-nav-a11y="">{% for image in product.images %}
<div class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img
src="{{ image | img_url: '' }}"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}</div>
<div class="slideshow__controls"><div class="slideshow__arrows"
style="width:169px">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="Previous slide"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-left" viewBox="0 0 7 11"><path d="M5.5.037a1.5 1.5 0 0 1 1.06 2.56l-2.94 2.94 2.94 2.94a1.5 1.5 0 0 1-2.12 2.12l-4-4a1.5 1.5 0 0 1 0-2.12l4-4A1.5 1.5 0 0 1 5.5.037z" fill="#fff" class="layer"/></svg></button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="Next slide"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-right" viewBox="0 0 7 11"><path d="M1.5 11A1.5 1.5 0 0 1 .44 8.44L3.38 5.5.44 2.56A1.5 1.5 0 0 1 2.56.44l4 4a1.5 1.5 0 0 1 0 2.12l-4 4A1.5 1.5 0 0 1 1.5 11z" fill="#fff"/></svg></button>
</div></div>
</div>
</div></div>
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
{% schema %}
{
"name": {
"en": "Product pages"
},
"settings": [
//==========ZoomEnableProductCodeStart==========//
{
"type": "checkbox",
"id": "enable_zoom",
"default": true,
"label": {
"en": "Enable image zoom"
}
}
//==========ZoomEnableProductCodeFinish==========//
]
}
{% endschema %}
---------------------------------------------------------------------------------------------------------------------------
CODE 2
---------------------------------------------------------------------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
<div class="slider single-item">
{% for image in product.images %}
<div class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img
src="{{ image | img_url: '' }}"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript">
//https://kenwheeler.github.io/slick/js/scripts.js
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
})
</script>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
{% schema %}
{
"name": {
"en": "Product pages"
},
"settings": [
//==========ZoomEnableProductCodeStart==========//
{
"type": "checkbox",
"id": "enable_zoom",
"default": true,
"label": {
"en": "Enable image zoom"
}
}
//==========ZoomEnableProductCodeFinish==========//
]
}
{% endschema %}
--------------------------------------------------------------------------------------------------------------------CODE 3ReadMore:---------------------------------------------------------------------------------------------------------------------<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
<!-- Swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
{% for image in product.images %}
<div class="swiper-slide">
<div class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img
src="{{ image | img_url: '' }}"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
{% schema %}
{
"name": {
"en": "Product pages"
},
"settings": [
//==========ZoomEnableProductCodeStart==========//
{
"type": "checkbox",
"id": "enable_zoom",
"default": true,
"label": {
"en": "Enable image zoom"
}
}
//==========ZoomEnableProductCodeFinish==========//
]
}
{% endschema %}
---------------------------------------------------------------------------------------------------------------------------
Comments
Post a Comment