Create a Dynamic Video Slider with Customization Options in shopify

 In the fast-paced world of digital content, captivating your audience's attention is crucial. One effective way to engage your viewers is through dynamic video sliders, seamlessly blending visuals with interactivity. Today, we unveil a versatile solution that not only showcases your video content but also offers customization options to align with your brand's identity.

Unveiling the Interface

Our video slider combines sleek design with intuitive functionality. Let's dive into its key components:

1. Background Customization: Set the stage with a background color of your choice to complement your brand's aesthetic.
2. Engaging Heading and Text: Craft a compelling message with customizable heading and descriptive text, ensuring your audience stays informed and intrigued.
3. Interactive Play Button: Enhance user engagement with a play button overlay, enticing viewers to interact with your video content.
4. Navigation Arrows: Navigate through the slider effortlessly with customizable left and right arrow icons, maintaining a seamless user experience.
6. Responsive Design: Seamlessly adapt to various screen sizes, ensuring an optimal viewing experience across devices.

With our user-friendly interface, managing your video content has never been easier. Here's how it works:

• Dynamic Block Management: Add, remove, or rearrange video blocks effortlessly, allowing you to curate your content with ease.
• Video Integration: Simply input the URL of your desired video, and our slider handles the rest, ensuring smooth playback and seamless integration.
• Automated Playback Control: Enjoy hassle-free video playback, with automatic pause and play functionalities triggered by user interaction.
• Enhanced Video Navigation: Effortlessly navigate through your video library with intuitive left and right arrow controls, providing a seamless viewing experience.
• Bringing Your Vision to Life

Our versatile solution empowers you to unleash your creativity and captivate your audience like never before. Whether you're showcasing product demos, customer testimonials, or engaging brand stories, our video slider ensures your content shines.

Get Started Today

Ready to elevate your digital presence with our dynamic video slider? Explore the possibilities and bring your vision to life with customizable features tailored to your unique brand identity. Empower your content strategy, engage your audience, and leave a lasting impression with our versatile solution.

Unlock the power of dynamic video sliders and transform the way you connect with your audience. Experience seamless integration, intuitive customization, and captivating visuals—all in one comprehensive solution. Elevate your digital storytelling and stand out in today's competitive landscape with our innovative video slider.

I wanted to share some useful icons with you that I found on IconsDB. They have a great collection of black icons that you can download for various purposes. Here are a few that caught my eye:

Play Icon: Download Play Icon

https://www.iconsdb.com/black-icons/play-3-icon.html#custom_size

Arrow Icon 1: Download Arrow Icon 1

https://www.iconsdb.com/black-icons/arrow-18-icon.html#google_vignette

Arrow Icon 2: Download Arrow Icon 2

https://www.iconsdb.com/black-icons/arrow-118-icon.html

Feel free to check them out and download whichever ones you need for your projects!

Full code:

HTML

    
             <!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<style>
    #id-{{ section.id }}{
      background-color:{{ section.settings.bg_color }};
      background-image: {{ section.settings.background_gradient_color }};
    }
     #id-{{ section.id }} .video--heading {
      font-size: 42px;
      font-weight: 700;
      margin: 0;
      text-align: center;
       color: {{ section.settings.heading_color }};
  }
   #id-{{ section.id }} .video-desc {
      font-size: 18px;
      text-align: center;
      color: {{ section.settings.desc_color }};
      margin: 0;
      padding: 0 100px;
  }
  .video-width {
      max-width: 1230px;
      padding: 0 15px;
      margin:0 auto;
  }

  .video-slider-section {
      padding: 6rem 0 7rem;
  }
  .customer-video-wrapper video {
      width: 100%;
      border-radius: 10px;
  }
  .customer-video-wrapper {
      position: relative;
  }
  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  .video-slider-block .slick-track {
      display: flex;
      gap: 22px;
  }
  .video-slider-block .slick-dots button:before {
      display: none;
  }
  .video-slider-block .slick-dots button {
      width: 12px !important;
      height: 12px !important;
      background: #D9D9D9 !important;
      border-radius: 20px;
  }
  .video-slider-block .slick-dots .slick-active button {
      background: #000000 !important;
  }
  .video-slider-block .slick-dots {
      bottom: -50px;
  }
  .video-slider-inner {
      padding: 3rem 0 0;
  }
  .video-slider-block .slick-prev i, .video-slider-block .slick-prev:before {
      display: none !important;
  }
  .video-slider-block .slick-next i, .video-slider-block .slick-next:before {
      display: none !important;
  }
  {% if section.settings.left_arrow != blank %}
  .video-slider-block .slick-prev {
      content: "";
      position: absolute;
      top: -70px;
      left: 15px;
      width: 34px;
      height: 34px;
      background: url({{ section.settings.left_arrow | img_url:'master'}});
      background-repeat: no-repeat;
      background-size: cover;
  }
  {% endif %}
  {% if section.settings.right_arrow != blank %}
  .video-slider-block .slick-next {
      content: "";
      position: absolute;
      top: -70px;
      right: 15px;
      width: 34px;
      height: 34px;
      background: url({{ section.settings.right_arrow | img_url:'master'}});
      background-repeat: no-repeat;
      background-size: cover;
  }
  {% endif %}

  @media only screen and (max-width: 989px) {
  .video-slider-block .slick-prev, .video-slider-block .slick-next, .customer-testimonial-block .slick-prev, .customer-testimonial-block .slick-next {
      display: none;
  }
  .video-slider-section {
      padding: 4rem 0 5rem;
  }
  }
  @media only screen and (max-width: 749px) {
  .video-slider-section .video--heading {
      font-size: 24px;
  }
   .video-slider-section  .video-desc {
      padding: 0 20px;
  }
  .video-slider-block .slick-track {
      gap: 10;
  }
  }
</style>
<section class="video-slider-section" id="id-{{ section.id }}">
  <div class="video-width">
    <div class="video-slider-wrapper">
      <div class="video-slider-content">
        <h2 class="video--heading">{{ section.settings.the_heading }}</h2>
        <p class="video-desc">{{ section.settings.the_text }}</p>
      </div>
      <div class="video-slider-inner">
        <div class="cstm-slider video-slider-block customer-video">
          {%- for block in section.blocks -%}
            <div class="customer-video-wrapper">
              <video
                style="display:block;"
                width="100%"
                class="slick-video"
                preload="metadata"
                poster="{{ block.settings.bg_video.preview_image | image_url }}"
                playsinline
              >
                <source src="{{ block.settings.bg_video.sources[1].url }}" type="video/mp4">
              </video>
              <div class="play-button">
                {% if section.settings.video_play_btn != blank %}
                  <img src="{{ section.settings.video_play_btn | img_url:'master' }}">
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  // Function to handle showing play button when video ends
  function handleVideoEnded(videoElement) {
    // Show play button when video ends
    $(videoElement).siblings('.play-button').show();
  }

  // Initialize slick slider
  var slider = $('.cstm-slider').not('.slick-initialized').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true,
    dots: true,
    prevArrow: "<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
    nextArrow: "<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true
        }
      },
      {
        breakpoint: 780,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          arrows: false
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false
        }
      }
    ]
  });

  // Pause video when slider changes slide
  slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var currentSlideElement = slick.$slides[currentSlide];
    var currentVideo = $(currentSlideElement).find('.slick-video')[0];
    if (currentVideo && !currentVideo.paused) {
      currentVideo.pause();
      $(currentVideo).siblings('.play-button').show();
    }
  });

  // Handle play button click and video play/pause
  $('.cstm-slider').on('click', '.slick-slide', function() {
    var clickedVideo = $(this).find('.slick-video')[0];
    $('.slick-video').each(function(index, video) {
      if (video !== clickedVideo) {
        video.pause();
        $(video).siblings('.play-button').show();
      }
    });
    if (clickedVideo.paused) {
      clickedVideo.play();
      $(clickedVideo).siblings('.play-button').hide();
    } else {
      clickedVideo.pause();
      $(clickedVideo).siblings('.play-button').show();
    }
  });

  // Add event listener to each video to detect when playback ends
  $('.slick-video').each(function(index, video) {
    video.onended = function() {
      handleVideoEnded(video);
    };
  });
</script>

{% schema %}
{
  "name": "Video with slider",
  "settings": [
    {
      "type":"color",
      "id":"bg_color",
      "label":"Background color"
    },
    {
      "type": "color_background",
      "id": "background_gradient_color",
      "label": "Background gradient"
    },
    {
      "type": "text",
      "id": "the_heading",
      "label": "Heading"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Color",
      "default": "#000000"
    },
    {
      "type": "textarea",
      "id": "the_text",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "desc_color",
      "label": "Color",
      "default": "#000000"
    },
    {
      "type": "image_picker",
      "id": "video_play_btn",
      "label": "Play Button image"
    },
    {
      "type": "image_picker",
      "id": "left_arrow",
      "label": "Left arrow"
    },
    {
      "type": "image_picker",
      "id": "right_arrow",
      "label": "Right arrow"
    }
  ],
  "blocks": [
    {
      "name": "Block",
      "type": "Video",
      "settings": [
          {
            "type": "video",
            "id": "bg_video",
            "label": "Video"
          }
        ]
      }
  ],
    "presets":[
    {
      "name":"Video with slider"
    }
  ]
}
{% endschema %}