Shopfiy Slider: requires bx-slider as a dependency.

ktc-slider.scss

.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%;
      } 
    }
}

settings_schema.json

  {
    "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?"
      }
    ]
  },

slider.liquid

{{ '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>