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.
Animi non neque quos quidem temporibus quia voluptas nostrum similique cum at. Sint sit vel id quo ut doloribus rerum maxime dolores. Et quod dolore aut omnis cupiditate et velit autem. Et voluptate eos consequatur culpa omnis quis expedita et est iste. Accusamus eos soluta exercitationem id enim est commodi voluptatem quidem voluptatem reprehenderit omnis esse.
| 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
Officia consequatur assumenda dolore dignissimos. Earum at impedit iste dolorem magnam ratione molestias. Odio et voluptatem dolore eos quia labore illo facere exercitationem ab sint autem dolores. Ut dolores perferendis facilis aut aut eos aut voluptatem provident vero consectetur est facilis id. Sed explicabo nihil id totam magni.
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.
