I originally built this for a client's website and later realized it has great potential for future projects.

When the users clicks on the video icons the videos above change as well as the corresponding description below. I built this function using two data-attributes; data-index and data-youtube. The former is to align the current video with the correct title and description the latter is to find the correct youtube id for the video. The information is stored in an array and is appended when the user clicks on the respective video.

The slideshow is built using slick.js (http://kenwheeler.github.io/slick/) I customized the breakpoints and put in my own arrows.