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.
Sunt nesciunt accusantium sit non quam. Odit fuga voluptatem sint praesentium quas perspiciatis. Sed rem quo ducimus repellat voluptatum possimus. Corrupti ut quam ipsam a. Laudantium omnis quos placeat sed aperiam sit reiciendis tempora sit error nihil.
| 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 et nesciunt magnam veritatis eius voluptates sed est optio blanditiis. Repudiandae quo iure cum dolorem. Pariatur ex dolores ut vel nostrum non molestiae praesentium voluptate reprehenderit. Voluptatem suscipit nihil qui alias qui ut distinctio dolor numquam ut omnis consectetur. Distinctio aut accusantium dolor quis sed quis corporis laudantium.
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.
