Read more
Shopify slider 2 design using slick slider widhout responsive
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
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
add this code in </body> tag above
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
<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-2.liquid
Add this code
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'jushar-slider-2.css' | asset_url | stylesheet_tag }}
<script src="{{ 'slick.min.js' | asset_url }}" defer="defer"></script>
<div class="container_full jushar_slider_2_dev position-relative">
<h1 class="h1 position-absolute">{{ section.settings.brand_title }}</h1>
<div class="d-flex align-items-center">
<div class="col-sm-1">
<div class="jushar_slider_2 js2_left">
{% for block in section.blocks %}
<div class="js2_left_img">
{% if block.settings.left_image != null %}
<img srcset="
{% if block.settings.left_image.width >= 493 %}{{ block.settings.left_image | image_url: width: 493 }} 493w,{% endif %}
{% if block.settings.left_image.width >= 600 %}{{ block.settings.left_image | image_url: width: 600 }} 600w,{% endif %}
{% if block.settings.left_image.width >= 713 %}{{ block.settings.left_image | image_url: width: 713 }} 713w,{% endif %}
{% if block.settings.left_image.width >= 823 %}{{ block.settings.left_image | image_url: width: 823 }} 823w,{% endif %}
{% if block.settings.left_image.width >= 990 %}{{ block.settings.left_image | image_url: width: 990 }} 990w,{% endif %}
{% if block.settings.left_image.width >= 1100 %}{{ block.settings.left_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if block.settings.left_image.width >= 1206 %}{{ block.settings.left_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if block.settings.left_image.width >= 1346 %}{{ block.settings.left_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if block.settings.left_image.width >= 1426 %}{{ block.settings.left_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if block.settings.left_image.width >= 1646 %}{{ block.settings.left_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if block.settings.left_image.width >= 1946 %}{{ block.settings.left_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ block.settings.left_image | image_url }} {{ block.settings.left_image.width }}w"
src="{{ block.settings.left_image | image_url: width: 1946 }}"
width="973"
height="{{ 973 | divided_by: block.settings.left_image.aspect_ratio | ceil }}"
alt="{{ block.settings.left_image.alt | escape }}"
>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="col-sm-4">
<div class="jushar_slider_2_1 js2_center">
{% for block in section.blocks %}
<div class="select_c_desc">
{% if block.settings.collection != blank %}
<div class="h1"><a href="{{ block.settings.collection.url }}">{{ block.settings.collection.title }}</a></div>
{% endif %}
{% if block.settings.collection != blank %}
<div class="h2">{{ block.settings.custom_liquid }}</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="col-sm-5">
<div class="jushar_slider_2 js2_right">
{% for block in section.blocks %}
<div class="js2_left_img">
{% assign media = block.settings.right_image %}
{% if block.settings.right_image != null %}
<img srcset="
{% if block.settings.right_image.width >= 493 %}{{ block.settings.right_image | image_url: width: 493 }} 493w,{% endif %}
{% if block.settings.right_image.width >= 600 %}{{ block.settings.right_image | image_url: width: 600 }} 600w,{% endif %}
{% if block.settings.right_image.width >= 713 %}{{ block.settings.right_image | image_url: width: 713 }} 713w,{% endif %}
{% if block.settings.right_image.width >= 823 %}{{ block.settings.right_image | image_url: width: 823 }} 823w,{% endif %}
{% if block.settings.right_image.width >= 990 %}{{ block.settings.right_image | image_url: width: 990 }} 990w,{% endif %}
{% if block.settings.right_image.width >= 1100 %}{{ block.settings.right_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if block.settings.right_image.width >= 1206 %}{{ block.settings.right_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if block.settings.right_image.width >= 1346 %}{{ block.settings.right_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if block.settings.right_image.width >= 1426 %}{{ block.settings.right_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if block.settings.right_image.width >= 1646 %}{{ block.settings.right_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if block.settings.right_image.width >= 1946 %}{{ block.settings.right_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ block.settings.right_image | image_url }} {{ block.settings.right_image.width }}w"
src="{{ block.settings.right_image | image_url: width: 1946 }}"
width="973"
height="{{ 973 | divided_by: block.settings.right_image.aspect_ratio | ceil }}"
alt="{{ block.settings.right_image.alt | escape }}"
>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="col-sm-2">
<div class="h1 js2_right_title">{{ section.settings.jushar_slider_title }}</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('.jushar_slider_2').slick({
dots: false,
swipe: false,
});
$('.jushar_slider_2_1').slick({
dots: false,
swipe: false,
prevArrow: '<button class="slide-arrow prev-arrow">Prev</button>',
nextArrow: '<button class="slide-arrow next-arrow">Next</button>'
});
});
$(document).on('click', '.jushar_slider_2_1 .prev-arrow', function() {
$(".jushar_slider_2 .slick-prev").click();
});
$(document).on('click', '.jushar_slider_2_1 .next-arrow', function() {
$(".jushar_slider_2 .slick-next").click();
});
$( document ).ready(function() {
$(".jushar_slider_2_1 .next-arrow").click(function(){
$(".jushar_slider_2_1 .next-arrow").toggleClass("j21_before");
});
});
</script>
{% schema %}
{
"name": "Jushar Slider 2",
"tag": "section",
"class": "section",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "jushar_slider_title",
"default": "2022 Spring/Summer",
"label": "Add Jushar Slider Title"
},
{
"type": "text",
"id": "brand_title",
"default": "Shopify Dev",
"label": "Background Title"
}
],
"blocks": [
{
"type": "column",
"name": "Jushar Slider 2",
"settings": [
{
"type": "image_picker",
"id": "left_image",
"label": "Left Side Image"
},
{
"type": "image_picker",
"id": "right_image",
"label": "Left Side Image"
},
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "Add Description",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
}
],
"presets": [
{
"name": "Jushar Slider 2",
"blocks": [
{
"type": "column"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Create File
Assets > jushar-slider-2.css
Add this code
.container_full{max-width:100%;width:100%;margin:0 auto; padding: 0 30px;}
.jushar_slider_2 .js2_left_img{height: 100vh;overflow: hidden;}
.jushar_slider_2 .js2_left_img img{width:100%;height: auto;}
.js2_left .slick-prev.slick-arrow,
.js2_left .slick-next.slick-arrow,
.js2_right .slick-prev.slick-arrow,
.js2_right .slick-next.slick-arrow{display:none !important;}
.js2_left .js2_left_img img{transform: scale(3);}
.js2_left .slick-list .slick-track .js2_left_img img{transition: all 5s ease-in;}
.js2_left .slick-list .slick-track .js2_left_img.slick-active img{transition: all 5s ease-in;transform: scale(1);}
.js2_center{padding: 15px;text-align: right;}
.js2_center .select_c_desc .h1{font-size:60px;text-transform: uppercase;font-weight: 600;}
.js2_center .select_c_desc .h1 a{color:#000000;text-decoration: none;}
.js2_center .select_c_desc .h2{margin-top:50px;}
.jushar_slider_2_1{position:relative}
.jushar_slider_2_1 .prev-arrow{position:absolute;bottom: -50px;right: 150px;background: transparent;border: none;font-size: 26px;z-index:2;}
.jushar_slider_2_1 .next-arrow{position:absolute;bottom: -50px;right: 0px;background: transparent;border: none;font-size: 26px;z-index:2;}
.jushar_slider_2_1 button.slide-arrow.next-arrow.slick-arrow:before {content: '';position: absolute;left: 60px;width: 500px;height: 1px;background: #000;z-index: 999;bottom: 17px;}
.jushar_slider_2_1 button.slide-arrow.next-arrow.slick-arrow:after{content: '';position: absolute;left: 60px;width: 0px;height: 1px;background: #fff;z-index: 999;bottom: 17px;transition: all 5s ease-in;}
.jushar_slider_2_1 button.slide-arrow.next-arrow.slick-arrow.j21_before:after{width: 500px;}
.jushar_slider_2_dev h1{z-index: 1;bottom: 0;font-size: 250px;text-transform: uppercase;font-weight: 600;margin: 0 auto;text-align: center;display: block;left: 15%;opacity: 0.1;}
.js2_right_title{transform: rotate(90deg);}
@media only screen and (max-width: 1440px) {
.jushar_slider_2_dev h1{font-size: 175px;}
.js2_center .select_c_desc .h1{font-size:36px;}
.jushar_slider_2_1 .next-arrow, .jushar_slider_2_1 .prev-arrow{bottom:-40px;}
.js2_left .slick-list .slick-track .js2_left_img.slick-active img{transform: scale(2);}
.js2_right_title{font-size:2rem;}
.jushar_slider_2 .js2_left_img img{height:100vh;}
}
0 Reviews