Read more
Shopify slider 5 design using slick slider code
Follow me
Click this links and download file and add your Assets folder
Go to this file
Layout > theme.liquid
Add this code in </head> tag above
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
add this code in </body> tag above
<script src="{{ 'bootstrap.bundle.min.js' | asset_url }}"></script>
<script src="{{ 'popper.min.js' | asset_url }}"></script>
<script src="{{ 'bootstrap.min.js' | asset_url }}"></script>
Create File
Sections > jushar-slider-5.liquid
Add this code
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'jushar-slider-5.css' | asset_url | stylesheet_tag }}
{{ 'animate.min.css' | asset_url | stylesheet_tag }}
<script src="{{ 'slick.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'slick-animation.min.js' | asset_url }}"></script>
<div class="jushar_slider_5_dev">
<div class="js_5s page-width">
{% for block in section.blocks %}
<div class="slider">
<div class="row">
<div class="col-sm-3">
<div class="js5s_left animated" data-animation-in="{{ block.settings.animation_left }}" data-delay-in="0.3">
{% if block.settings.heading_titl != blank %}
<div class="h1">{{ block.settings.heading_titl }}</div>
{% endif %}
{% if block.settings.heading_desc != blank %}
<p>{{ block.settings.heading_desc }}</p>
{% endif %}
{% if block.settings.url or block.settings.buttone_title != blank %}
<a href="{{ block.settings.url }}" style="color:{{ block.settings.buttone_color }}; background:{{ block.settings.buttone_bg }};" class="ifr_{{ forloop.index }} button" target="iframe_a">{{ block.settings.buttone_title }}</a>
{% endif %}
</div>
</div>
<div class="col-md-6">
{% if block.settings.bg_image != blank %}
<img src="" alt="" data-lazy="{{ block.settings.bg_image | image_url }}" class="full-image animated" data-animation-in="zoomInImage"/>
{% endif %}
</div>
<div class="col-sm-3">
{% assign article = articles[block.settings.blogPost] %}
{% if article %}
<div class="js5s_article animated" data-animation-in="{{ block.settings.animation_right }}" data-delay-in="0.3">
<div title="Featured Journal Post" class="middle-parallax vertical-center bg-cover hidden-xs" style="background-image: url('{{ article.image.src | image_url }}')">
<div class="vertical-center-inner">
<div class="middle-parallax-content text-center">
<h2>{{ article.title | upcase }}</h2>
<a href="{{ article.url }}" style="color:{{ block.settings.buttone_color }}; background:{{ block.settings.buttone_bg }};" class="button">{{ block.settings.button_text | upcase }}</a>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="iframe_{{ forloop.index }} iframe">
<div class="js_5s_close">{% render 'icon-close' %}</div>
<iframe src="demo_iframe.htm" name="iframe_a" height="600px" width="100%" title="Iframe Example"></iframe>
</div>
<style>
</style>
<script>
$( document ).ready(function() {
$(".ifr_{{ forloop.index }}").click(function(){
$(".iframe_{{ forloop.index }}").addClass("active");
});
$(".js_5s_close").click(function(){
$(".iframe_{{ forloop.index }}").removeClass("active");
});
});
</script>
</div>
{% endfor %}
</div>
</div>
<script>
$( document ).ready(function() {
$('.js_5s').slick({
autoplay: false,
speed: 800,
lazyLoad: 'progressive',
arrows: true,
dots: false,
prevArrow: '<div class="slick-nav prev-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
nextArrow: '<div class="slick-nav next-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
}).slickAnimation();
$('.slick-nav').on('click touch', function(e) {
e.preventDefault();
var arrow = $(this);
if(!arrow.hasClass('animate')) {
arrow.addClass('animate');
setTimeout(() => {
arrow.removeClass('animate');
}, 1600);
}
});
});
</script>
{% schema %}
{
"name": "Jushar Slider 5",
"tag": "section",
"class": "section",
"max_blocks": 3,
"settings": [
],
"blocks": [
{
"type": "column",
"name": "Jushar Slider 5",
"settings": [
{
"type": "image_picker",
"id": "bg_image",
"label": "Background image"
},
{
"type": "text",
"id": "heading_titl",
"label": "Slider Heading",
"default": "Home Is Where My Plants Are"
},
{
"type": "text",
"id": "heading_desc",
"label": "Slider desc",
"default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
},
{
"type": "select",
"id": "animation_left",
"options": [
{
"value": "fadeInUp",
"label": "fadeInUp"
},
{
"value": "fadeInLeft",
"label": "fadeInLeft"
},
{
"value": "fadeInRight",
"label": "fadeInRight"
}
],
"default": "fadeInLeft",
"label": "select text animation",
"info": "slider animations"
},
{
"type": "header",
"content": "button"
},
{
"type": "text",
"id": "buttone_title",
"label": "Buttone text",
"default": "Play Video"
},
{
"type": "url",
"id": "url",
"label": "Buttone url"
},
{
"type": "color",
"id": "buttone_color",
"label": "Select buttone text color",
"default": "#ffffff"
},
{
"type": "color",
"id": "buttone_bg",
"label": "Select buttone background color",
"default": "#111111"
},
{
"type": "header",
"content": "Right Side content"
},
{
"type": "article",
"id": "blogPost",
"label": "Blog article"
},
{
"type": "header",
"content": "Button Settings"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "View Blog"
},
{
"type": "select",
"id": "animation_right",
"options": [
{
"value": "fadeInUp",
"label": "fadeInUp"
},
{
"value": "fadeInLeft",
"label": "fadeInLeft"
},
{
"value": "fadeInRight",
"label": "fadeInRight"
}
],
"default": "fadeInRight",
"label": "select text animation",
"info": "slider animations"
}
]
}
],
"presets": [
{
"name": "Jushar Slider 5",
"blocks": [
{
"type": "column"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Create File
Assets > jushar-slider-5.css
Add this code
.jushar_slider_5_dev .slide .slide__content--headings .animated {transition: all 0.5s ease;}
.jushar_slider_5_dev .slick-nav {--active: #111;--border: rgb(17 17 17 / 12%);width: 44px;height: 44px;position: absolute;cursor: pointer;top: calc(50% - 44px);}
.jushar_slider_5_dev .slick-nav.prev-arrow {left: 0%;transform: scaleX(-1);z-index: 999;}
.jushar_slider_5_dev .slick-nav.next-arrow {left: auto;right: 0%;}
.jushar_slider_5_dev .slick-nav i {display: block;position: absolute;margin: -10px 0 0 -10px;width: 20px;height: 20px;left: 50%;top: 50%;}
.jushar_slider_5_dev .slick-nav i:before, .slick-nav i:after {content: "";width: 10px;height: 2px;border-radius: 1px;position: absolute;left: 50%;top: 50%;background: #619400; margin: -1px 0 0 -5px;display: block;transform-origin: 9px 50%;}
.jushar_slider_5_dev .slick-nav i:before {transform: rotate(-40deg);}
.jushar_slider_5_dev .slick-nav i:after {transform: rotate(40deg);}
.jushar_slider_5_dev .slick-nav:before, .slick-nav:after {content: "";display: block;position: absolute;left: 1px;right: 1px;top: 1px;bottom: 1px;border-radius: 50%;border: 2px solid rgb(97 148 0 / 24%);}
.jushar_slider_5_dev .slick-nav svg {width: 44px;height: 44px;display: block;position: relative;z-index: 1;color: #619400;stroke-width: 2px;stroke-dashoffset: 126;stroke-dasharray: 126 126 0;transform: rotate(0deg);}
.jushar_slider_5_dev .slick-nav.animate svg {-webkit-animation: stroke 1s ease forwards 0.3s;animation: stroke 1s ease forwards 0.3s;}
.jushar_slider_5_dev .slick-nav.animate i {-webkit-animation: arrow 1.6s ease forwards;animation: arrow 1.6s ease forwards;}
.jushar_slider_5_dev .slick-nav.animate i:before {-webkit-animation: arrowUp 1.6s ease forwards;animation: arrowUp 1.6s ease forwards;}
.jushar_slider_5_dev .slick-nav.animate i:after {-webkit-animation: arrowDown 1.6s ease forwards;animation: arrowDown 1.6s ease forwards;}
.jushar_slider_5_dev .js5s_left{height: 100%;display: flex;flex-direction: column;justify-content: center;}
.jushar_slider_5_dev .js5s_left .h1{font-size: 45px;font-weight: 800;line-height: 65px;text-transform: capitalize;}
.jushar_slider_5_dev .js5s_left p{font-size: 14px;margin: 25px 0;}
.jushar_slider_5_dev img{margin:0 auto;}
.slider{position: relative;}
.slider .iframe{display:none;}
.slider .iframe.active{display:block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:100%}
.js_5s_close{width: 50px;height: 50px;float: right;background: #fff;padding: 12px;cursor: pointer;}
.slider a, .slider a:hover{text-decoration: none;color: #fff;}
.slider .button:not([disabled]):hover:after, .slider .button:after, .slider .button:before{box-shadow:none;}
.js5s_article{height: 100%;display: flex;flex-direction: column;justify-content: end;margin-top: -100px;}
.js5s_article .vertical-center-inner{background-repeat: no-repeat;background-repeat: no-repeat;background-size: cover;padding: 15px;}
.js5s_article .vertical-center-inner h2 {background: #fff;font-size: 26px;filter: opacity(0.5);margin-bottom: 20px;}
.animated {transition: all 0.5s ease;}
.slider [data-animation-in] {opacity: 0;-webkit-animation-duration: 1.5s;animation-duration: 1.5s;transition: opacity 0.5s ease 0.3s;transition: 1s;}
.js5s_article .middle-parallax{background-size: cover;background-position: center;}
@-webkit-keyframes zoomInImage {
from {transform: scale3d(1, 1, 1);transition: 1s;}
to {transform: scale3d(1.1, 1.1, 1.1);transition: 1s;}
}
@keyframes zoomInImage {
from {transform: scale3d(1, 1, 1);transition: 1s;}
to {transform: scale3d(1.1, 1.1, 1.1);transition: 1s;}
}
.zoomInImage {-webkit-animation-name: zoomInImage;animation-name: zoomInImage;}
@-webkit-keyframes zoomOutImage {
from {transform: scale3d(1.1, 1.1, 1.1);transition: 1s;}
to {transform: scale3d(1, 1, 1);transition: 1s;}
}
@keyframes zoomOutImage {
from {transform: scale3d(1.1, 1.1, 1.1);transition: 1s;}
to {transform: scale3d(1, 1, 1);transition: 1s;}
}
@-webkit-keyframes stroke {
52% {transform: rotate(-180deg);stroke-dashoffset: 0;}
52.1% {transform: rotate(-360deg);stroke-dashoffset: 0;}
100% {transform: rotate(-180deg);stroke-dashoffset: 126;}
}
@keyframes stroke {
52% {transform: rotate(-180deg);stroke-dashoffset: 0;}
52.1% {transform: rotate(-360deg);stroke-dashoffset: 0;}
100% {transform: rotate(-180deg);stroke-dashoffset: 126;}
}
@-webkit-keyframes arrow {
0%, 100% {transform: translateX(0);opacity: 1;}
23% {transform: translateX(17px);opacity: 1;}
24%, 80% {transform: translateX(-22px);opacity: 0;}
81% {opacity: 1;transform: translateX(-22px);}
}
@keyframes arrow {
0%, 100% {transform: translateX(0);opacity: 1;}
23% {transform: translateX(17px);opacity: 1;}
24%, 80% {transform: translateX(-22px);opacity: 0;}
81% {opacity: 1;transform: translateX(-22px);}
}
@-webkit-keyframes arrowUp {
0%, 100% {transform: rotate(-40deg) scaleX(1);}
20%, 80% {transform: rotate(0deg) scaleX(0.1);}
}
@keyframes arrowUp {
0%, 100% {transform: rotate(-40deg) scaleX(1);}
20%, 80% {transform: rotate(0deg) scaleX(0.1);}
}
@-webkit-keyframes arrowDown {
0%, 100% {transform: rotate(40deg) scaleX(1);}
20%, 80% {transform: rotate(0deg) scaleX(0.1);}
}
@keyframes arrowDown {
0%, 100% {transform: rotate(40deg) scaleX(1);}
20%, 80% {transform: rotate(0deg) scaleX(0.1);}
}
0 Reviews