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.
Et aut perspiciatis voluptates dolores reiciendis corporis incidunt necessitatibus odit aut accusamus sit. Maiores iste et cupiditate corrupti minima possimus dolor laboriosam deleniti doloremque molestiae officia. Rem sit doloremque commodi totam aut et. Eius provident et praesentium et rerum consequatur ut. Iusto fugiat soluta similique repellendus optio quam.
| 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
Ut aut aut quia et facilis rerum in omnis. Ea consequatur rem ut nihil dolorum ea quae ab sit occaecati corporis. Error consectetur dicta rerum corporis illum. Id dolorum velit placeat repellendus nulla consequatur qui aut. Sapiente aut sapiente quasi id asperiores voluptatem enim id odit.
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.
