1. Install Flexslider >  https://www.drupal.org/project/flexslider
  2. Install Flexslider Library > https://github.com/woocommerce/FlexSlider
  3. Install Libraries (if you not install yet) > https://www.drupal.org/project/libraries
  4. Enable Flexslider Module & Libraries Module
  5. Create Slideshow contant type
  6. Creat Views > Block > Configure the view
  7. Place the Block to the site

To extent the funtionality for video: Using FitVids: https://www.drupal.org/project/fitvids

See video below for detail..


Create a new Image style (Config > Media > Image styles) and set it to Scale and Crop to 250px high x 1140px wide.

Then in View settings (Structure > Views - edit relevant View, Flexslider Slideshow), edit the image field to use the image style we just created.

Theming a responsive slideshow: Using Markup > See video no 2