Introducing UB PWA Slider – Dynamic carousels on Magento PWA Studio

Aug 5, 2021 Update: UB Content Slider v1.2.1 is fully compatible with Magento PWA Studio v10.0.0.

Today we are happy to release our 2nd module for Magento PWA Studio -- UB PWA Slider module. It is packed with the newly added service layer for UB Content Slider (ContentSliderGraphQl with GraphQL APIs ready for PWA Storefront). As you might know,
GraphQL is defined as the main API to support PWA Studio functionality.

The UB PWA Slider module gives you a convenient way to display multiple content boxes -- text, banners, (upcoming feature) product slider, videos or other promotional graphics -- in a single place to your PWA Studio site.

In this article, we share the preview of what we’re working on with the UB PWA Slider module.

Easy to create banner sliders

UB PWA Slider module allows you to create effective carousels on top of Magento PWA Studio with ease. You can create a responsive slider that associate with promotional banners, or features and links to specific videos (either Youtube or Vimeo). It’s also easy to make image links or add CTA buttons within each slide item to further engage your users with your site.

Below are a few examples of the built-in layouts we’re working on:

Image slideshow on the Desktop view

Text & CTA buttons nested within the image on the mobile view

Text & CTA buttons nested under the image on the mobile view

Video slideshow on the mobile view

Multiple videos on the Desktop view

Create multiple sliders & place anywhere

In case you want to create multiple responsive slideshows, you can add as many as you want and place them anywhere on your PWA site.

You can define different custom width and height for each slideshow depending on your preference (our module automatically optimizes all these images for better performance). The typical code below allows you to call a slider and place them to the desired position:

<ContentSlider
slideKey={'sl1'}
itemHeight={1200}
itemWidth={960}
itemMobileWidth={640}
autoPlay={false}
interval={3000}
stopOnInteraction={true}
style={'default'}
animation={'foldOutAnimation'}
cssClasses={['extra-class']}
/>

Easy configuration

UB PWA Slider provides an easy backend configuration process; allows you to create and manage multiple sliders within the module panel. You have the ability to change the behavior of the slider, including the animation effect, the look and feel, etc.

A slider can be set to play automatically or be controlled manually with navigation buttons.

If you enable the slider arrows and turn off the automatic rotation by default, users will have full control over the sliders. This means users see only the first slide and navigate through the rest of the slides manually. This is a great way to engage your users and enhance the usability of your store.

Navigation arrows and slide buttons make navigation obvious

Meanwhile, it’s possible to upload multiple image versions, each optimized for desktop and mobile. Using separate images for mobile typically help keep your store mobile-friendly and cater to touch gestures.

Separate image optimized for mobile

The module also comes with the option that allows you to upload your own cover image for the video. Users expect an attractive cover image that communicates the subject of your video.

A side note

At the moment Magento PWA Studio doesn’t cover 100% of the functionalities in Magento 2, so some of the features of the UB PWA Slider module are still in ‘to do’ stage, such as the Product Slider, etc. We’ll be adding new features and improving existing code along with changes and updates in Magento PWA Studio.

Live Demo Download

We make UB PWA Slider available for free for ones with an active UB Content Slider subscription at Ubertheme.

Get involved:

We hope you like the short overview of the key features of the UB PWA Slider module. Work for the module release is underway at the moment. So stay tuned for further updates!

Do you have a great idea for PWA Content Slider? Do not hesitate to contact us on email info (at) ubertheme.com, we love to hear your feedback and ideas.