UIkit 3 Beta 31 – Goodbye jQuery, Hello Slideshow!
Today is a special day for us. We've worked very hard and are happy to introduce some big improvements with UIkit 3 Beta 31! Finally, the new Slideshow component that you've all been waiting for is here. We think it is truly amazing! But that's not all. We also got rid of jQuery. Yes, you've heard right, UIkit is now a lot slicker :-) And there is more we would like to highlight in this post.
Slideshow
The new Slideshow component was written from scratch. It's now much lighter and flexible and has everything you expect from a modern slideshow. It's fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, you can control animation with your fingertips or mouse cursor. It even accelerates to keep up with your pace. This way, no click or swipe goes wasted. Despite all these new features, the slideshow even got 25% smaller (gzipped). Let's take a look at what's new.
Content Parallax
This is the most exciting feature of the new slideshow. Any content inside the slides can be animated together with the in and out animation of the slideshow. This functionality is inherited from the Parallax component, and it allows you to animate CSS properties depending on the scroll position of the slideshow. You can now create beautiful parallax effects with the content sliding in and out. When swiping through the slides, the parallax animation literally clings on to your fingertips.
Animations
The slideshow animations underwent some changes. We dropped the outdated, so called "advanced image transitions" from UIkit 2 in favor of the new, modern parallax and scroll effects. Thus, besides the classic Slide, Fade and Scale animations, there are also Pull and Push. The first one resembles pulling an image from a collection of slides by uncovering the image below with a smooth parallax effect. The second one does the opposite by pushing an image on the deck. All animations are hardware accelerated for a smoother performance.
Videos
You can create video slideshows by using the video element or iframe videos from YouTube. When scrolling through the slides, the videos are muted and start playing automatically. They will also autopause when you move to the next slide and start playing again where you left off when you swipe back.
Responsiveness
Image and video slideshows are fully responsive. They always take up the full width of their parent container while the height adapts according to the defined ratio. You can also set a minimum height for small devices and a maximum height for large ones.
Goodbye jQuery
UIkit 3 Beta 31 also removes the jQuery dependency, which means that UIkit works on its own, and you no longer need to load the JavaScript library. Now your website works faster since jQuery is huge. This was quite a big JavaScript alteration, and we hope everything still works as expected. If you notice any new JavaScript bugs, please report them in the GitHub issues.
More Improvements
We've added an autoplay option to the Lightbox component, and videos can now benefit from a poster image using data-poster attribute. Also, YouTube and Vimeo videos play in full screen mode, which was not possible before.
While we worked on the Slideshow parallax, we got some new ideas for the Parallax component as well. Now, instead of only one start and end value, you can set unlimited values, and the animation will evenly go through them.
As always, the release comes with many more features, fixes and changes. For example, you can style checkboxes and radio buttons in Firefox. For the full list together with all the bug fixes check out the changelog.
What's Next?
Now the Slider, the Slideset and the Dynamic Grid are the only three components which stand between us and the stable version of UIkit 3. We are sure that you will love our new release! Leave your feedback in the comments section and let us know what you would like to see in the future.
