Swiper, the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Autem impedit minus tempore recusandae a voluptas adipisci itaque sunt reiciendis velit natus. Ab autem ipsa nostrum ratione ut quia ad a suscipit cum et pariatur est. Iure voluptatem nisi aut velit maiores hic quo ut. Modi consequatur enim quia aliquam. Fugit repellendus quaerat sed porro aspernatur eveniet.
| Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. |
Examples
Omnis provident ea et est voluptate et eum voluptatem nam eius. Et ipsum reprehenderit ut exercitationem dolorem voluptas repellendus vel vel eligendi est ipsum qui et. Magnam assumenda fugit nemo fugit quia velit tempore. Hic porro nesciunt ut laborum ea aut alias labore ut. Ad eveniet laboriosam magnam ut et debitis expedita rem velit saepe ut eaque quidem.
Text Slider
A slider is typically used for displaying images. Still, the implementation for the J1 Template supports a lot more sources to be displayed as a slide show — simple text for example.
Base Text Carousel
Important statements or topics can be placed on top of an article or a paragraph to give them better visibility. You can present facts to know animated for the readers attention.
Image Slider
Sliders (or Carousels) are mostly used for pictures data to animate the images as a series. Find with the following some examples of how to use a slider for your image data.
Base Silder + Captions
A simple image show is useful, for example, as an animated (or not animated) banner presenting exciting things about your site or the products offered.
-
Image 1 -
Image 2 -
Image 3 -
Image 4 -
Image 5 -
Image 6
Base Slider + Captions + Lightbox
Carousels are used for an exceptionally compact form of image galleries. This example shows some pictures having individual caption text and supports a lightbox to enlarge images full size.
Thumbs Slider (bottom)
To give the users a more visual control over a slideshow, Swiper sliders can provide UI elements by placing mini-images or short text elements (thumbs) side-by-side (on the left|right), or at bottom|toop of a slideshow. Find below examples how to control such sliders by a thumbs slave silder.
Thumbs Slider (right) + Captions
A more compact version using image thumbs can defined by placing the thumb images (slave slider) on the right of the master slider side-by-side. The will reduce the size of the (master) slider, but all elements of the combined sliders are in a single row.
- Image 1
- Image 2
- Image 3
- Image 4
- Image 5
- Image 6
- Image 1
- Image 2
- Image 3
- Image 4
- Image 5
- Image 6
Video Slider
If only a small number of video sources should presented, the concept of controller based slders using Thumb Elements provide a quite space-saving way to do so.
The J1 template system uses VideoJS to enable mixed video sliders. VideoJS for J1 supports VJS plugins for local Video like MP4 files or platforms like YouTube, Vimeo, or Dailymotion to play video sources from different providers.
