We are using Flickity in this case to create our awesome slideshow.
Go to your Shopify theme code editor, scroll down to the Asset folder and create a .js file and name it flickity then create a .css file and name it flickity aswell. You should now have 2 files flickity.js and flickity.css.
Create Styling File
Now create a third file in the Asset Folder, this time another css file, name it flickity-slideshow. So you should now have a third file called flickity-slideshow.css Paste the below code in the newly created file.
.flickity-slideshow .carousel-cell {
width: 100%;
height: 80vh;
}
.flickity-slideshow .carousel-cell img {
width: 100%;
height: 80vh;
object-fit: cover;
}
.flickity-slideshow .carousel-cell {
opacity: 0 !important;
transition: opacity 1s ease !important;
}
.flickity-slideshow .carousel-cell.is-selected {
opacity: 1 !important;
}
.overlay-color {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.2);
display: block !important;
}
.flickity-mobile {
display: none;
}
.flickity-slideshow .flickity-button,
.flickity-slideshow .flickity-button:hover {
background: transparent;
}
.flickity-overlay {
position: absolute;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.flickity-btn {
display: inline-block;
padding: 10px 24px;
background-color: transparent;
text-transform: uppercase;
letter-spacing: 0.1rem;
transition: 0.3s ease;
}
.flickity-enabled.is-fade .flickity-slider > * {
pointer-events: none;
z-index: 0;
}
.flickity-enabled.is-fade .flickity-slider > .is-selected {
pointer-events: auto;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.flickity-slideshow .carousel-cell {
height: 70vh;
}
.flickity-slideshow .carousel-cell img {
height: 70vh;
}
}
@media only screen and (max-width: 479px) {
.flickity-desktop {
display: none;
}
.flickity-mobile {
display: block;
}
}
Now we have the 3 files created and code saved in the Asset Folder, head over to your theme.liquid, find the ending </head> tag and right above the line, paste the below code, this will activate the 3 new files you created on your Shopify store.
{{ 'flickity.css' | asset_url | stylesheet_tag }}
{{ 'flickity-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'flickity.js' | asset_url | script_tag }}
Create The Section Liquid
Now head over to the Section folder and create a new section, name it what ever you like, in this case, I’ve called the new section ‘flickity-slideshow‘ in the newly created section, remove any created code, paste the below code.
<div class="flickity-slideshow">
<div class="carousel">
{% for block in section.blocks %}
<div class="carousel-cell">
<img class="flickity-desktop"
data-flickity-lazyload-srcset="
{{ block.settings.image | img_url: '1440x' }} 1440w,
{{ block.settings.image | img_url: '1080x' }} 1080w,
{{ block.settings.image | img_url: '720x' }} 767w,
{{ block.settings.image | img_url: '480x' }} 480w"
sizes="(min-width: 480px) 1440px, 1080px, 767px, 480x"
data-flickity-lazyload-src="{{ block.settings.image | img_url: 'master' }}"
alt="{{ block.settings.image.alt | escape }}"
border="0"/>
{% if block.settings.mobile_image != blank %}
<img class="flickity-mobile"
data-flickity-lazyload-srcset="
{{ block.settings.mobile_image | img_url: '479x' }} 479w"
sizes="(max-width: 479px) 479px"
data-flickity-lazyload-src="{{ block.settings.mobile_image | img_url: 'master' }}"
alt="{{ block.settings.mobile_image.alt | escape }}"
border="0" />
{% endif %}
{% if section.settings.overlay %}
<div class="overlay-color"></div>
{% endif %}
<div class="flickity-overlay">
{% if block.settings.subtitle != blank %}
<h3 class="flickity-subtitle">{{ block.settings.subtitle }}</h3>
{% endif %}
{% if block.settings.title != blank %}
<h2 class="flickity-title h1">{{ block.settings.title }}</h2>
{% endif %}
{% if block.settings.btnlink != blank or block.settings.btntext != blank %}
<a href="{{ block.settings.btnlink }}" class="flickity-btn">{{ block.settings.btntext }}</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<!--- Coded by bluish.io --->
</div>
<script>
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
contain: true,
{% if section.settings.loop %}
wrapAround: true,
{% endif %}
{% if section.settings.auto %}
autoPlay: {{ section.settings.range | times: 1000 }},
pauseAutoPlayOnHover: false,
{% endif %}
imagesLoaded: true,
pageDots: false,
lazyLoad: true,
{% if section.settings.fade %}
fade: true
{% endif %}
});
{% if request.design_mode %}
document.addEventListener("shopify:section:load", function(event) {
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
contain: true,
{% if section.settings.loop %}
wrapAround: true,
{% endif %}
{% if section.settings.auto %}
autoPlay: {{ section.settings.range | times: 1000 }},
pauseAutoPlayOnHover: false,
{% endif %}
imagesLoaded: true,
pageDots: false,
lazyLoad: true,
{% if section.settings.fade %}
fade: true
{% endif %}
});
});
{% endif %}
</script>
{% style %}
.flickity-overlay .flickity-title, .flickity-overlay .flickity-subtitle {
color: {{ section.settings.textcolor }};
}
.flickity-slideshow .flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
.flickity-btn {
border: 2px solid {{ section.settings.btnbgcolor }};
color: {{ section.settings.btncolor }} !important;
}
.flickity-btn:hover {
background-color: {{ section.settings.btnbgcolor }};
}
{% if section.settings.auto %}
.flickity-slideshow .carousel-cell {
transition: 0.1s ease;
}
.flickity-slideshow .carousel-cell img {
transition: 0.1s ease;
}
{% endif %}
{% endstyle %}
{% schema %}
{
"name": "Flickity slideshow",
"settings": [
{
"type": "checkbox",
"id": "overlay",
"label": "Enable dark overlay",
"default": true
},
{
"type": "checkbox",
"id": "loop",
"label": "Enable loop",
"default": true
},
{
"type": "checkbox",
"id": "fade",
"label": "Enable fade effect",
"default": true
},
{
"type": "checkbox",
"id": "auto",
"label": "Enable autoplay",
"default": true
},
{
"type": "range",
"id": "range",
"label": "Autoplay seconds",
"min": 3,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "color",
"id": "textcolor",
"label": "Change color of the titles"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the navigation arrows"
},
{
"type": "color",
"id": "btnbgcolor",
"label": "Your button background hover color"
},
{
"type": "color",
"id": "btncolor",
"label": "Your button text color"
}
] ,
"blocks": [
{
"type": "card",
"name": "Hero Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Your slideshow image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Your slideshow mobile image"
},
{
"type": "text",
"id": "title",
"label": "Your title"
},
{
"type": "text",
"id": "subtitle",
"label": "Your subtitle"
},
{
"type": "text",
"id": "btntext",
"label": "Your button text"
},
{
"type": "url",
"id": "btnlink",
"label": "Your button link"
}
]
}
] ,
"presets": [
{
"name": "Flickity slideshow",
"category":"Custom"
}
]
}
{% endschema %}
And you are now done! you can now create a slideshow on your Shopify home page. The slideshow is named Flickity slideshow in your Shopify theme customizer.
No comments: