){kind=link}
Read more
Shopify slider 6 design using slick slider code
Follow me
Click this links and download file and add your Assets folder
Create File
Sections > jushar-slider-6.liquid
Add this code
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'jushar-slider-6.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_6_dev" style="background:{{ section.settings.background_color }}">
<div class="main_padding">
{% for block in section.blocks %}
<div class="slider_6">
<heading class="animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.2">{{ block.settings.slider_titl }} </heading>
<description>{{ block.settings.slider_desc_short }} </description>
<div class="flex_6">
{% if block.settings.img_vid_1 == 'image' %}
{% if block.settings.image_1 != blank %}
<div class="image animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.3">
<img class="first_img" src="{{ block.settings.image_1 | image_url }}">
<div class="shadow"> <img class="shadow-img" src="{{ block.settings.image_1 | image_url }}"> </div>
</div>
{% endif %}
{% else %}
{% if block.settings.url_1 != blank %}
<div class="video_play animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.3">
<div class="video f_video">
<deferred-media>
<button
id="Deferred-Poster-Modal-{{ block.settings.url_1.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if block.settings.image_1 != blank -%}
<img
srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
src="{{ block.settings.image_1 | image_url: width: 1920 }}"
sizes="{% if block.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.image_1.width }}"
height="{{ section.settings.image_1.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if block.settings.url_1.type == 'youtube' -%}
<iframe width="600" height="600" src="https://www.youtube.com/embed/{{ block.settings.url_1.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="youtube video"> </iframe>
{%- else -%}
<iframe width="600" height="600" src="https://player.vimeo.com/video/{{ block.settings.url_1.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="player vimeo video"> </iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>
{% endif %}
{% endif %}
{% if block.settings.img_vid_2 == 'image' %}
<div class="image animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.4">
<img class="second_img" src="{{ block.settings.image_2 | image_url }}">
<div class="shadow"> <img class="shadow-img" src="{{ block.settings.image_2 | image_url }}"> </div>
</div>
{% else %}
{% if block.settings.url_2 != blank %}
<div class="video_play animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.4">
<div class="video s_video">
<deferred-media>
<button
id="Deferred-Poster-Modal-{{ block.settings.url_2.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if block.settings.image_2 != blank -%}
<img
srcset="{%- if block.settings.image_2.width >= 375 -%}{{ block.settings.image_2 | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image_2.width >= 750 -%}{{ block.settings.image_2 | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image_2.width >= 1100 -%}{{ block.settings.image_2 | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image_2.width >= 1500 -%}{{ block.settings.image_2 | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image_2.width >= 1780 -%}{{ block.settings.image_2 | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image_2.width >= 2000 -%}{{ block.settings.image_2 | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image_2.width >= 3000 -%}{{ block.settings.image_2 | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image_2.width >= 3840 -%}{{ block.settings.image_2 | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image_2 | image_url }} {{ block.settings.image_2.width }}w"
src="{{ block.settings.image_2 | image_url: width: 1920 }}"
sizes="{% if block.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.image_2.width }}"
height="{{ section.settings.image_2.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if block.settings.url_2.type == 'youtube' -%}
<iframe width="600" height="600" src="https://www.youtube.com/embed/{{ block.settings.url_2.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="youtube video"> </iframe>
{%- else -%}
<iframe width="600" height="600" src="https://player.vimeo.com/video/{{ block.settings.url_2.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="player vimeo video"> </iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>
{% endif %}
{% endif %}
{% if block.settings.img_vid_3 == 'image' %}
<div class="image animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.5">
<img class="third_img" src="{{ block.settings.image_3 | image_url }}">
<div class="shadow"> <img class="shadow-img" src="{{ block.settings.image_3 | image_url }}"> </div>
</div>
{% else %}
{% if block.settings.url_3 != blank %}
<div class="video_play animated" data-animation-in="{{ section.settings.animation }}" data-delay-in="0.5">
<div class="video t_video">
<deferred-media>
<button
id="Deferred-Poster-Modal-{{ block.settings.url_3.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if block.settings.image_3 != blank -%}
<img
srcset="{%- if block.settings.image_3.width >= 375 -%}{{ block.settings.image_3 | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image_3.width >= 750 -%}{{ block.settings.image_3 | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image_3.width >= 1100 -%}{{ block.settings.image_3 | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image_3.width >= 1500 -%}{{ block.settings.image_3 | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image_3.width >= 1780 -%}{{ block.settings.image_3 | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image_3.width >= 2000 -%}{{ block.settings.image_3 | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image_3.width >= 3000 -%}{{ block.settings.image_3 | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image_3.width >= 3840 -%}{{ block.settings.image_3 | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image_3 | image_url }} {{ block.settings.image_3.width }}w"
src="{{ block.settings.image_3 | image_url: width: 1920 }}"
sizes="{% if block.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.image_3.width }}"
height="{{ section.settings.image_3.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if block.settings.url_3.type == 'youtube' -%}
<iframe width="600" height="600" src="https://www.youtube.com/embed/{{ block.settings.url_3.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="youtube video"> </iframe>
{%- else -%}
<iframe width="600" height="600" src="https://player.vimeo.com/video/{{ block.settings.url_3.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="player vimeo video"> </iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$( document ).ready(function() {
$('.main_padding').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 6",
"tag": "section",
"class": "section",
"max_blocks": 3,
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Select slider background color",
"default": "#c8bebb"
},
{
"type": "select",
"id": "animation",
"options": [
{
"value": "fadeInUp",
"label": "fadeInUp"
},
{
"value": "fadeInLeft",
"label": "fadeInLeft"
},
{
"value": "fadeInRight",
"label": "fadeInRight"
}
],
"default": "fadeInLeft",
"label": "select animation",
"info": "slider animations"
}
],
"blocks": [
{
"type": "column",
"name": "Jushar Slider 6",
"settings": [
{
"type": "text",
"id": "slider_titl",
"label": "Slider Heading",
"default": "The Great Indoors Playlist"
},
{
"type": "text",
"id": "slider_desc_short",
"label": "Slider Short Description",
"default": "Setting into a new rhythm? Slow down and let our soundtrack take you there"
},
{
"type": "header",
"content": "Image and Video First block"
},
{
"type": "select",
"id": "img_vid_1",
"options": [
{
"value": "image",
"label": "image"
},
{
"value": "video",
"label": "video"
}
],
"default": "image",
"label": "select First block",
"info": "video poster and only show image"
},
{
"type": "image_picker",
"id": "image_1",
"label": "image picker"
},
{
"type": "video_url",
"id": "url_1",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=tX-igwX84Rc",
"label": "t:sections.video.settings.video_url.label",
"placeholder": "t:sections.video.settings.video_url.placeholder",
"info": "t:sections.video.settings.video_url.info"
},
{
"type": "header",
"content": "Image and Video Second block"
},
{
"type": "select",
"id": "img_vid_2",
"options": [
{
"value": "image",
"label": "image"
},
{
"value": "video",
"label": "video"
}
],
"default": "image",
"label": "select Second block",
"info": "video poster and only show image"
},
{
"type": "image_picker",
"id": "image_2",
"label": "image picker"
},
{
"type": "video_url",
"id": "url_2",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=tX-igwX84Rc",
"label": "t:sections.video.settings.video_url.label",
"placeholder": "t:sections.video.settings.video_url.placeholder",
"info": "t:sections.video.settings.video_url.info"
},
{
"type": "header",
"content": "Image and Video Third block"
},
{
"type": "select",
"id": "img_vid_3",
"options": [
{
"value": "image",
"label": "image"
},
{
"value": "video",
"label": "video"
}
],
"default": "image",
"label": "select Third block",
"info": "video poster and only show image"
},
{
"type": "image_picker",
"id": "image_3",
"label": "image picker"
},
{
"type": "video_url",
"id": "url_3",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=tX-igwX84Rc",
"label": "t:sections.video.settings.video_url.label",
"placeholder": "t:sections.video.settings.video_url.placeholder",
"info": "t:sections.video.settings.video_url.info"
}
]
}
],
"presets": [
{
"name": "Jushar Slider 6",
"blocks": [
{
"type": "column"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Create File
Assets > jushar-slider-6.css
Add this code
.jushar_slider_6_dev{height:100vh;position: relative;}
.jushar_slider_6_dev .main_padding{padding:0 30px;}
.jushar_slider_6_dev .slider_6 heading{font-size: 200px;float: right;text-align: end;margin-top: 35px;margin-right: 30px;}
.jushar_slider_6_dev .slider_6 description{font-size: 14px;float: right;margin-top: 35px;width: 150px;}
.jushar_slider_6_dev .slider_6 .flex_6{display:flex;position:absolute;bottom:0;align-items: center;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .first_img{width:600px;height:600px;margin-left: 50px;margin-bottom: 50px;transition: all 0.5s ease;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .second_img{width:350px;height:350px;transform: rotate(-3deg);margin-top:50px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .third_img{width:350px;height:350px;transform: rotate(5deg);margin-top:80px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image.fadeInLeft .first_img{transform: rotate(3deg);transition: all 0.5s ease;}
.jushar_slider_6_dev .slider_6 .flex_6 .image{position: relative;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .shadow{position: absolute;width: 90%;height: 100%;overflow: hidden;display: flex;left: 50%;transform: translate(-50%, 0);bottom: -15px;z-index: -2;border-radius: 20px;filter: blur(15px);}
.jushar_slider_6_dev .slider_6 .flex_6 .image .shadow .shadow-img{margin-top: 2rem;object-fit: cover;}
.jushar_slider_6_dev .slick-list .slick-track{height:100vh;}
.jushar_slider_6_dev .animated {transition: all 0.5s ease;}
.jushar_slider_6_dev .slider_6 [data-animation-in] {opacity: 0;-webkit-animation-duration: 1.5s;animation-duration: 1.5s;transition: opacity 0.5s ease 0.3s;transition: 1s;}
.jushar_slider_6_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_6_dev .slick-nav.prev-arrow {left: 1%;transform: scaleX(-1);z-index: 999;}
.jushar_slider_6_dev .slick-nav.next-arrow {left: auto;right: 1%;}
.jushar_slider_6_dev .slick-nav i {display: block;position: absolute;margin: -10px 0 0 -10px;width: 20px;height: 20px;left: 50%;top: 50%;}
.jushar_slider_6_dev .slick-nav i:before, .slick-nav i:after {content: "";width: 10px;height: 2px;border-radius: 1px;position: absolute;left: 50%;top: 50%;background: #000; margin: -1px 0 0 -5px;display: block;transform-origin: 9px 50%;}
.jushar_slider_6_dev .slick-nav i:before {transform: rotate(-40deg);}
.jushar_slider_6_dev .slick-nav i:after {transform: rotate(40deg);}
.jushar_slider_6_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(0 0 0 / 24%);}
.jushar_slider_6_dev .slick-nav svg {width: 44px;height: 44px;display: block;position: relative;z-index: 1;color: #000;stroke-width: 2px;stroke-dashoffset: 126;stroke-dasharray: 126 126 0;transform: rotate(0deg);}
.jushar_slider_6_dev .slick-nav.animate svg {-webkit-animation: stroke 1s ease forwards 0.3s;animation: stroke 1s ease forwards 0.3s;}
.jushar_slider_6_dev .slick-nav.animate i {-webkit-animation: arrow 1.6s ease forwards;animation: arrow 1.6s ease forwards;}
.jushar_slider_6_dev .slick-nav.animate i:before {-webkit-animation: arrowUp 1.6s ease forwards;animation: arrowUp 1.6s ease forwards;}
.jushar_slider_6_dev .slick-nav.animate i:after {-webkit-animation: arrowDown 1.6s ease forwards;animation: arrowDown 1.6s ease forwards;}
.f_video{width:600px;height:600px;margin-left: 50px;margin-bottom: 50px;transform: rotate(3deg);}
.s_video{width:350px;height:350px;transform: rotate(-3deg);margin-top:50px;}
.t_video{width:350px;height:350px;transform: rotate(5deg);margin-top:80px;}
.jushar_slider_6_dev .deferred-media__poster{background-color: transparent;border: none;cursor: pointer;margin: 0;padding: 0;height: 100%;width: 100%;overflow: hidden;}
.jushar_slider_6_dev deferred-media{height:100%;}
.jushar_slider_6_dev button:focus{outline: none;}
.jushar_slider_6_dev button:focus-visible{outline-offset: unset;box-shadow: none;}
.jushar_slider_6_dev iframe{position: absolute;width: 100%;height: 100%;background-color: rgba(var(--color-foreground), 0.03);border: 0;top: 0;}
.jushar_slider_6_dev .deferred-media__poster-button{background-color: rgb(var(--color-background));border: 0.1rem solid rgba(var(--color-foreground), 0.1);border-radius: 50%;color: rgb(var(--color-foreground));display: flex;align-items: center;justify-content: center;height: 6.2rem;width: 6.2rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(1);transition: transform var(--duration-short) ease, color var(--duration-short) ease;z-index: 1;}
.jushar_slider_6_dev .deferred-media__poster-button .icon-play{margin-left: 0.2rem;}
.jushar_slider_6_dev .deferred-media__poster-button .icon{width: 2rem;height: 2rem;}
.jushar_slider_6_dev .deferred-media__poster-button:hover {transform: translate(-50%, -50%) scale(1.1);}
@-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);}
}
@media (max-width: 1600px){
.jushar_slider_6_dev .slider_6 heading{font-size: 150px;}
}
@media (max-width: 1440px){
.jushar_slider_6_dev .slider_6 heading{font-size: 114px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .first_img{width: 300px;height: 300px;margin-left: 40px;margin-bottom: 40px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .second_img{width: 250px;height: 250px;margin-top: 40px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .third_img{width: 200px;height: 200px;margin-top: 50px;}
.f_video{width: 300px;height: 300px;}
.s_video{width:350px;height:350px;margin-top:40px;}
.t_video{width: 200px;height: 200px;margin-top:50px;}
}
@media (max-width: 991px){
.jushar_slider_6_dev .slider_6 heading{font-size: 75px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .first_img{width: 300px;height: 300px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .second_img{width: 200px;height: 200px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .third_img{width: 170px;height: 170px;}
.f_video{width: 250px;height: 250px;}
.s_video{width: 200px;height: 200px;}
.t_video{width: 150px;height: 150px;}
}
@media (max-width: 767px){
.jushar_slider_6_dev .slider_6 .flex_6{flex-flow: row-reverse;transform: rotate(50deg);bottom:160px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .first_img{margin-left: 30px;margin-bottom: 30px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .second_img{margin-top: 30px;}
.jushar_slider_6_dev .slider_6 .flex_6 .image .third_img{margin-top: 30px;}
.jushar_slider_6_dev .main_padding{padding:0 10px;}
.f_video{transform: rotate(-50deg);}
.s_video{transform: rotate(310deg);}
.t_video{transform: rotate(310deg);}
}
0 Reviews