Make carousel slider in shopify
1) In index.liquid file include following code:
add css and js files
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
{{ 'slick.js' | asset_url | script_tag }}
add html part of slider
<!--slider start-->
<div id="slider">
<!-- Wrapper for carousel items -->
<div class="home_slider">
<div>
<a href="{{ settings.slide1_url }}" title="{{ settings[alt] | escape }}"> <img src="{{ 'slide1.jpg' | asset_url }}" class="img-responsive" alt="{{shop.name}}" /></a>
</div>
{% for i in (2..10) %}
{% capture show_slide %}slide-{{ i }}-check{% endcapture %}
{% capture image %}slide{{ i }}.jpg{% endcapture %}
{% capture link %}slide{{ i }}_url{% endcapture %}
{% capture alt %}slide{{ i }}_alt{% endcapture %}
{% if settings[show_slide] %}
<div class="item" >
<a href="{{ settings[link] | escape }}" title="{{ settings[alt] | escape }}"><img src="{{ image | asset_url }}" class="img-responsive" alt="{{ settings[alt] | escape }}" /></a>
</div>
{% endif %}{% endfor %}
</div>
</div>
<!--slider end-->
add script
<!--slider script-->
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({interval: 3000 })
});
$('.home_slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3500,
speed: 2500
});
</script>
2) In custom.css file include following code:
/*slider start*/
#slider {padding: 0px;}
#slider .carousel-inner .item {height: inherit;}
#slider .carousel-inner .item img {width: 100%;height:100%;}
#myCarousel .right{background: url(button-next.png) no-repeat;background-position-y: 50%;background-position-x: 90%;}
#myCarousel .left{background: url(button-previous.png) no-repeat; background-position-y: 50%; background-position-x: 10%; }
.shop_now {position: absolute;bottom: 24%;right: 29%;background-color: transparent;color: #fff;border: 2px solid #9be9d5;padding: 13px;width: 17%;border-radius: 5px;font-size: 24px;font-family: "Futura Std Light";font-weight: 400;}
.home_slider .slick-next, .home_slider .slick-next:hover, .home_slider .slick-next:focus{ border:none; background-color: rgba(255,255,255,0.7);}
.home_slider .slick-prev, .home_slider .slick-prev:hover, .home_slider .slick-prev:focus{border:none; left:0px; z-index:9;background-color: rgba(255,255,255,0.7);}
.home_slider .slick-next, .home_slider .slick-prev{width:45px; height:45px;border-radius: 50%;}
.home_slider .slick-slide img{width:100%;}
.slick-prev:before, .slick-next:before{display:none;}
.home_slider .slick-next:after{ content: "\f054"; font: normal normal normal 20px/1 FontAwesome; color:#000;}
.home_slider .slick-prev:after{ content: "\f053"; font: normal normal normal 20px/1 FontAwesome; color:#000;}
/*slider end*/
3) Include following css and js files in Assets:
slick.css
/* Slider */
<linkrel="stylesheet",href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
slick-theme.css
<linkrel="stylesheet",href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
slick.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
4) In config --> settings_schema.jason file include following code:
{
"name": "Front Page Images",
"settings": [
{
"type": "paragraph",
"content": "Slideshow Images"
},
{
"type": "image",
"id": "slide1.jpg",
"label": "Slide 1 image "
},
{
"type": "text",
"id": "slide1_url",
"label": "slide 1 URL (include http:\/\/)",
"default": "\/collections\/all"
},
{
"type": "text",
"id": "slide1_alt",
"label": "slide 1 Alt Text",
"default": "Slide 1 Alt Text"
},
{
"type": "checkbox",
"id": "slide-2-check",
"label": "Show slide 2"
},
{
"type": "image",
"id": "slide2.jpg",
"label": "Slide 2 image"
},
{
"type": "text",
"id": "slide2_url",
"label": "slide 2 URL (include http:\/\/)",
"default": "\/collections\/all"
},
{
"type": "text",
"id": "slide2_alt",
"label": "slide 2 Alt Text",
"default": "Slide 2 Alt Text"
}
]
},
After adding this code you will seen this part in custom theme,in this you can put your slider images.
Comments
Post a Comment