Slickjs Carousel is created by Ken Wheeler, the complete slick documentation can be found here.
The Slickjs version I used in this example is 1.8.1.
For your viewing convenience, I put my CSS and JS all in the HTML file.
Each object has a title, image, and a lower text for a name. This example is made with only Slickjs with no additional js scripts whatsoever. Most animations are made using CSS.
- Animation
- Object focus - transforms when the object becomes the center focus
- Transition - carousel sliding animation made from slickjs attributes
- Text autoscroll - title element autoscrolls when the object becomes the focus
- Functions
- Infinite scroll - objects loops back to the first when the carousel gets to the end
- Timed autoscroll - carousel will scroll automatically by a selected time interval
- Hover to stop autoscroll - carousel will stop when the mouse is hovered over the carousel
- Click to select - click on any object and the carousel will make that object the focus
- Keyboard nav - Use the left and right arrow key to control the carousel when the carousel is selected
- Hide long text - Titles overflowed will be hiddden with ellipsis
- Responsive
- When screen width > 1200px - feature 5 object
- When screen width < 1200px - feature 3 object
- When screen width < 767px - feature 2 object
- When screen width < 480px - feature 1 object
- Animation
- From what I noticed, it seems like when the object loops back (last object back to the first one), the .slick-center class selection breaks for ~300ms by selecting a wrong object. It fixes itself and refocuses to the correct object after that small time interval. This bug causes the carousel to have a weird animation when it transitions from the last element back to the first. Please let me know if you have/found a fix for this.