Latest items added:
Simple Audio Clickable Dropdown Crossfade SliderFull Component List:
Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Clickable Dropdown Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Dropdown Buttons Easy Mega Menu Easy Modal Gallery Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Flex Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Audio Simple Cards Simple Shapes Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Navbar Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table
In this scroller you can show trailers of videos as examples for customers. When you scroll down, the video you have been looking at gets stopped, and the next one starts playing.The videos have been added using the 'HTML 5 video' element. However, the scroller does not work well on mobile devices.
To change the size of the display window you edit the width of the .video-wrapper and the height of the .vids in the style sheet scroller-styles.css. The aspect ratio of the actual video file can be set in the js at the bottom of the HTML file where it now says 10 / 16. It may take a bit of fiddling to get all the proportions right.
The scroller may also be used for displaying other things, like text, images, most things actually. In those cases you won't necessarily need the little script found at the bottom of this page (in code view). The script is there to manage the shifting of the videos.
The videos used here are from Pexels.
Download the component.