Last active
September 14, 2016 18:26
-
-
Save ScottJr/526ce042eab002c4b35a25913ed54c36 to your computer and use it in GitHub Desktop.
Shopfiy Slider: requires bx-slider as a dependency.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .bx-wrapper img { | |
| width: 100%; | |
| } | |
| #ktc-slider-container{ | |
| position: relative; | |
| @media screen and (max-width: 767px){ | |
| display: none; | |
| } | |
| } | |
| #ktc-slider-container-mob{ | |
| @media screen and (min-width: 768px){ | |
| display: none; | |
| } | |
| } | |
| .bx-default-pager{ | |
| @media screen and (max-width: 990px){ | |
| display: none; | |
| } | |
| } | |
| .bx-pager-item{ | |
| margin: 0px 4px; | |
| } | |
| .slider-outer-wrap{ | |
| position: absolute; | |
| @include displayFlex(); | |
| @include justifyContentFlexEnd(); | |
| top: 39%; | |
| right: 5%; | |
| .slider-text{ | |
| width: 55%; | |
| } | |
| @media screen and (min-width: 481px) and (max-width: 990px){ | |
| top: 13%; | |
| right: 5%; | |
| .slider-text{ | |
| width: 40%; | |
| h1{ | |
| font-size: 42px; | |
| text-align: left; | |
| } | |
| h2{ | |
| font-size: 28px; | |
| text-align: left; | |
| } | |
| p{ | |
| font-size: 18px; | |
| text-align: left; | |
| } | |
| } | |
| } | |
| @media screen and (max-width: 480px){ | |
| top: 12%; | |
| right: 0%; | |
| .slider-text{ | |
| h1{ | |
| font-size: 18px; | |
| text-align: left; | |
| } | |
| h2{ | |
| font-size: 16px; | |
| text-align: left; | |
| margin: 2px 0 10px 0; | |
| } | |
| p{ | |
| font-size: 11px; | |
| text-align: left; | |
| line-height: 14px; | |
| } | |
| } | |
| } | |
| @media screen and (min-width: 991px) and (max-width: 1160px){ | |
| top: 35%; | |
| right: 5%; | |
| .slider-text{ | |
| width: 40%; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "Slider - Landing Page", | |
| "settings": [ | |
| { | |
| "type": "header", | |
| "content": "Slide 1" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_one_enable", | |
| "label": "Use this slide" | |
| }, | |
| { | |
| "type": "image", | |
| "id": "slider_1.jpg", | |
| "label": "Desktop", | |
| "info": "Upload slider image for desktop." | |
| }, | |
| { | |
| "type": "image", | |
| "id": "mobile_slider_1.jpg", | |
| "label": "Mobile", | |
| "info": "Upload slider image for mobile." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_one_enable_link", | |
| "label": "Enable slide link - desktop & mobile" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "slider_one_link_url", | |
| "label": "Slider Link URL", | |
| "info": "URL link for slider." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_one_enable_link_new_page", | |
| "label": "Open link in new tab?" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Slide 2" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_two_enable", | |
| "label": "Use this slide" | |
| }, | |
| { | |
| "type": "image", | |
| "id": "slider_2.jpg", | |
| "label": "Desktop", | |
| "info": "Upload slider image for desktop." | |
| }, | |
| { | |
| "type": "image", | |
| "id": "mobile_slider_2.jpg", | |
| "label": "Mobile", | |
| "info": "Upload slider image for mobile." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_two_enable_link", | |
| "label": "Enable slide link - desktop & mobile" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "slider_two_link_url", | |
| "label": "Slider Link URL", | |
| "info": "URL link for slider." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_two_enable_link_new_page", | |
| "label": "Open link in new tab?" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Slide 3" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_three_enable", | |
| "label": "Use this slide" | |
| }, | |
| { | |
| "type": "image", | |
| "id": "slider_3.jpg", | |
| "label": "Desktop", | |
| "info": "Upload slider image for desktop." | |
| }, | |
| { | |
| "type": "image", | |
| "id": "mobile_slider_3.jpg", | |
| "label": "Mobile", | |
| "info": "Upload slider image for mobile." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_three_enable_link", | |
| "label": "Enable slide link - desktop & mobile" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "slider_three_link_url", | |
| "label": "Slider Link URL", | |
| "info": "URL link for slider." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_three_enable_link_new_page", | |
| "label": "Open link in new tab?" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Slide 4" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_four_enable", | |
| "label": "Use this slide" | |
| }, | |
| { | |
| "type": "image", | |
| "id": "slider_4.jpg", | |
| "label": "Desktop", | |
| "info": "Upload slider image for desktop." | |
| }, | |
| { | |
| "type": "image", | |
| "id": "mobile_slider_4.jpg", | |
| "label": "Mobile", | |
| "info": "Upload slider image for mobile." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_four_enable_link", | |
| "label": "Enable slide link - desktop & mobile" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "slider_four_link_url", | |
| "label": "Slider Link URL", | |
| "info": "URL link for slider." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_four_enable_link_new_page", | |
| "label": "Open link in new tab?" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Slide 5" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_five_enable", | |
| "label": "Use this slide" | |
| }, | |
| { | |
| "type": "image", | |
| "id": "slider_5.jpg", | |
| "label": "Home - Fifth Slider - Desktop", | |
| "info": "Upload slider image for desktop." | |
| }, | |
| { | |
| "type": "image", | |
| "id": "mobile_slider_5.jpg", | |
| "label": "Mobile", | |
| "info": "Upload slider image for mobile." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_five_enable_link", | |
| "label": "Enable slide link - desktop & mobile" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "slider_five_link_url", | |
| "label": "Slider Link URL", | |
| "info": "URL link for slider." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "slider_five_enable_link_new_page", | |
| "label": "Open link in new tab?" | |
| } | |
| ] | |
| }, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{ 'jquery.bxslider.min.js' | asset_url | script_tag }} | |
| <div id="ktc-slider-container" style="visibility: hidden;"> | |
| <section id="ktc-slider"> | |
| {% comment %} Slider 1/5 {% endcomment %} | |
| {% if settings.slider_one_enable %} | |
| <li class="slider-1-outer-wrap"> | |
| {% if settings.slider_one_enable_link %} | |
| <a href="{{ settings.slider_one_link_url }}" target="_new"> | |
| <img src="{{ 'slider_1.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'slider_1.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% comment %} Slider 2/5 {% endcomment %} | |
| {% if settings.slider_two_enable %} | |
| <li class="slider-2-outer-wrap"> | |
| {% if settings.slider_two_enable_link %} | |
| <a href="{{ settings.slider_two_link_url }}" {% if settings.slider_two_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'slider_2.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'slider_2.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% comment %} Slider 3/5 {% endcomment %} | |
| {% if settings.slider_three_enable %} | |
| <li class="slider-3-outer-wrap"> | |
| {% if settings.slider_three_enable_link %} | |
| <a href="{{ settings.slider_three_link_url }}" {% if settings.slider_three_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'slider_3.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'slider_3.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_four_enable %} | |
| <li class="slider-4-outer-wrap"> | |
| {% if settings.slider_four_enable_link %} | |
| <a href="{{ settings.slider_four_link_url }}" {% if settings.slider_four_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'slider_4.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'slider_4.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_five_enable %} | |
| <li class="slider-5-outer-wrap"> | |
| {% if settings.slider_five_enable_link %} | |
| <a href="{{ settings.slider_five_link_url }}" {% if settings.slider_five_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'slider_5.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'slider_5.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| </section> | |
| </div> | |
| <div id="ktc-slider-container-mob" style="visibility: hidden;"> | |
| {% if settings.slider_one_enable %} | |
| <li> | |
| {% if settings.slider_one_enable_link %} | |
| <a href="{{ settings.slider_one_link_url }}" target="_new"> | |
| <img src="{{ 'mobile_slider_1.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'mobile_slider_1.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_two_enable %} | |
| <li> | |
| {% if settings.slider_two_enable_link %} | |
| <a href="{{ settings.slider_two_link_url }}" {% if settings.slider_two_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'mobile_slider_2.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'mobile_slider_2.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_three_enable %} | |
| <li> | |
| {% if settings.slider_three_enable_link %} | |
| <a href="{{ settings.slider_three_link_url }}" {% if settings.slider_three_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'mobile_slider_3.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'mobile_slider_3.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_four_enable %} | |
| <li> | |
| {% if settings.slider_four_enable_link %} | |
| <a href="{{ settings.slider_four_link_url }}" {% if settings.slider_four_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'mobile_slider_4.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'mobile_slider_4.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| {% if settings.slider_five_enable %} | |
| <li> | |
| {% if settings.slider_five_enable_link %} | |
| <a href="{{ settings.slider_five_link_url }}" {% if settings.slider_five_enable_link_new_page %} target="_new" {% endif %}> | |
| <img src="{{ 'mobile_slider_5.jpg' | asset_url }}" /> | |
| </a> | |
| {% else %} | |
| <img src="{{ 'mobile_slider_5.jpg' | asset_url }}" /> | |
| {% endif %} | |
| </li> | |
| {% endif %} | |
| </div> | |
| <script> | |
| $(window).load(function() { | |
| var homeSlider = $('#ktc-slider').bxSlider({ | |
| auto: true, | |
| control: true, | |
| pager: true, | |
| mode: 'fade', | |
| preloadImages: 'all', | |
| onSlideBefore: function($slideElement, oldIndex, newIndex) { | |
| if (newIndex == 3) { | |
| $('.slider-outer-wrap').css('display', 'none'); | |
| } else { | |
| $('.slider-outer-wrap').css('display', 'flex'); | |
| } | |
| }, | |
| onSliderLoad: function() { | |
| $("#ktc-slider-container").css("visibility", "visible"); | |
| } | |
| }); | |
| var windowsize = $(window).innerWidth(); | |
| if (windowsize < 767) { | |
| $('#shop-slider').bxSlider({ | |
| auto: true, | |
| speed: 2000, | |
| nextSelector: '#prev', | |
| prevSelector: '#next', | |
| nextText: '<i class="fa fa-angle-left"></i>', | |
| prevText: '<i class="fa fa-angle-right"></i>', | |
| mode: 'fade' | |
| }); | |
| var homeSliderMob = $('#ktc-slider-container-mob').bxSlider({ | |
| auto: true, | |
| pager: true, | |
| mode: 'fade', | |
| preloadImages: 'all', | |
| onSliderLoad: function() { | |
| $("#ktc-slider-container-mob").css("visibility", "visible"); | |
| } | |
| }); | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment