JQuery Slider - OnClick Play Wide Video

Question

I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.

The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.

If image in position 1 is clicked, I want to play video_1 in the player, and so on.

The URL of video will be in this format <source src="videos/video_1.mp4"

Here is my markup

<body style="background-color: #0094ff">
        <div class="container">            
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <video width="640" height="360" controls id="player"> 
                        <source src="videos\video_1.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
            <div class="row">
                 <div class="col-md-12 slider">
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
                 <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
                 </div>
            </div>
       </div>

          <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
          <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
          <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.slider').slick({
                    infinite: true,
                    slidesToShow: 3,
                    slidesToScroll: 3
                });

            })

            $('.slider').on('click', '.slick-slide', function () {
                alert("Slide clicked");
               //how can I show the video with the position of the clicked slide?
            })
    </script>
    </body>

How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?

UPDATE Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.

Vinny M Vinny M · Accepted Answer · 2015-12-15T19:37:34

To answer your question exactly do this:

$('.slider').on('click', '.slick-slide', function () {
   var index = $('.slider').slick('slickCurrentSlide');
   $('#player source').attr('src', 'videos/video_'+index+'.mp4');
})

But better control would be:

Add a data-video to each img tag:

<div class="col-md-5 col-xs-3">
  <img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>

You can then swap out the video like so:

$('.slider').on('click', 'img', function () {
   var data = $(this).data(); // Grab data from IMG
   $('#player source').attr('src', data.video);
})

JQuery Slider - OnClick Play Wide Video

1 Answers