New banner Uscren

_slider.liquid

{% comment %}
  Slider
{% endcomment %}

<section class="slider-first-screen">
  <div class="main-slider slick-slider"
       data-slick='{"autoplay": {{ slider.settings.autoplay }}, "infinite": true, "slidesToScroll": 1, "slidesToShow": 1, "autoplaySpeed": {{ slider.settings.autoplay_speed }},"fade": {{ slider.settings.fade }}, "arrows": true, "dots": false }'>
    {% for slide in slider.slides %}
      <div>
        {% unless slide.video_url == nil %}
          <video class="slider-first-screen__video" id="video-{{ slide.id }}" loop>
            <source src="{{slide.video_url}}" type="video/mp4">
          </video>
        {% endunless %}
        <div class="slider-bg" style="background: url({{ slide.image.original }}) center no-repeat; background-size: cover; opacity: {{slider.settings.image_opacity}};"></div>
        <div class="slider-content section-wrapper">
          <div class="row expanded">
            <div class="large-12 columns">
              <h1 class="slider-title">{{ slide.title | spoiler, 50 }}</h1>
              <div class="slider-description">
                {{ slide.description | spoiler, 200 }}
              </div>
              {% if slider.settings.show_buttons %}
                {{ slide.button_text | link_to: slide.url, class: "button button-success slider-link"  }}
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</section>

{% include "slider_video_play_script" %}

_slider_video_play_script.liquid

{% comment %}
  This script run video on each slide
{% endcomment %}

<script>
  $(function(){
    if ($(window).width() > 768) {
      var slides = [{{ slider.slides | map: 'id' | join: ', ' }}];
      if ($('#video-' + {{ slider.slides.first.id }}).length) {
        $('#video-' + {{ slider.slides.first.id }}).ready(function(){
          $('#video-' + {{ slider.slides.first.id }})[0].play();
        })
      }
      $('.main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('.slider-first-screen__video').each(function(){
          $(this)[0].pause();
        })
        if ($('#video-' + slides[nextSlide]).length) {
          $('#video-' + slides[nextSlide])[0].play();
        }
      });
    }
  });
</script>

main.css

/* -------------------- Slider style -------------------- */

  .slick-slide {
    outline: none !important;
  }

  .slider-first-screen {
    overflow: hidden;
    position: relative;
    max-height: 520px;
    opacity: 0;
    -webkit-transition: opacity .2s ease-in;
            transition: opacity .2s ease-in;
  }

  .slider-first-screen .slick-slide:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .slider-first-screen .slick-slide {
    position: relative;
    max-height: 520px;
    min-height: 520px;
    overflow: hidden;
  }

  .slider-bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
  }

  .slider-content {
    position: absolute;
    top: 50%;
    -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .slider-title {
    font-size: 45px;
    color: {{settings.data.colors.slider_title_color}};
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    font-weight: bold;
    text-transform: uppercase;
    font-family: '{{settings.data.fonts.name_headers_font}}', sans-serif;
  }

  .slider-description {
    color: {{settings.data.colors.slider_description_color}};
    font-weight: 500;
    font-size: 22px;
    line-height: 25px;
    margin: 20px auto;
    margin-left: 0;
  }

  .slider-link {
    display: inline-block;
    margin-top: 15px;
    padding: 1.5rem 3.5rem;
    text-align: center;
    outline: none;
    font-size: 1.4rem;
    background-color: {{settings.data.colors.slider_link_background_color}};
    color: {{settings.data.colors.slider_link_color}};
    -webkit-transition: border-color .2s, color .2s, background-color .2s;
            transition: border-color .2s, color .2s, background-color .2s;
    min-width: 140px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .slider-link i {
    margin-left: 15px;
  }

  .slider-link:hover, .slider-link:focus {
    background-color: {{settings.data.colors.slider_link_hover_background_color}};
    color: {{settings.data.colors.slider_link_hover_color}};
  }

  .slick-dots {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: .55;
  }

  .slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0);
            box-shadow: 0 0 0 2px rgba(255,255,255,0);
    -webkit-transition: -webkit-box-shadow .3s ease;
            transition: box-shadow .3s ease;
  }

  .slick-dots li button {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-radius: 50%;
    background-color: {{ settings.data.colors.main_text_color }};
    background-color: rgba(255,255,255,1);
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
    -webkit-transition: background-color .3s ease,-webkit-transform .3s ease;
            transition: background-color .3s ease,transform .3s ease;
    -webkit-transition: background-color .3s ease,-webkit-transform .3s ease,-webkit-transform .3s ease;
            transition: background-color .3s ease,transform .3s ease,-webkit-transform .3s ease;
    padding: 1px;
    will-change: transform;
    -ms-transform: scale(.4);
        -webkit-transform: scale(.4);
            transform: scale(.4);
  }

  .slick-dots li.slick-active {
    cursor: default;
    -webkit-box-shadow: 0 0 0 2px {{ settings.data.colors.main_text_color }};
            box-shadow: 0 0 0 2px {{ settings.data.colors.main_text_color }};
  }

  .slick-dots li.slick-active button {
    -ms-transform: scale(1);
        -webkit-transform: scale(1);
            transform: scale(1);
    background-color: {{ settings.data.colors.main_text_color }};
  }

  @media only screen and (max-width: 767px) {
    .slider-first-screen {
        margin-top: 0px;
    }

    .slider-content {
      width: 100%;
    }

    .slider-title {
      font-size: 17px;
    }

    .slider-description {
      line-height: 20px;
      font-size: 14px;
    }

    .slick-dots {
      bottom: 5px;
    }

    .slider-first-screen .slick-slide {
      min-height: 290px;
    }

  }

  .slider-first-screen__video {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    background-size: cover;
  }

  .bottom-banner img {
    width: 100%;
  }

  .slider-first-screen .slick-prev {
    left: 15px;
    height: 30px;
    top: 46%;
    position: absolute;
    z-index: 2;
    outline: none !important;
    font-size: 0;
  }
  .slider-first-screen .slick-prev:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f053";
    font-size: 25px;
  }

  .slider-first-screen .slick-next {
    right: 15px;
    height: 30px;
    top: 46%;
    position: absolute;
    z-index: 2;
    outline: none !important;
    font-size: 0;
  }
  .slider-first-screen .slick-next:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f054";
    font-size: 25px;
  }

  .slick-prev:before, .slick-next:before {
    color: {{settings.data.colors.slider_link_color}} !important;
  }

/* -------------------- end Slider -------------------- */

main.js

// First screen slider init
$('.main-slider').slick();

$('.main-slider').ready(function () {
  $('.slider-first-screen').css('opacity', '1');
});