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.
Tenetur quibusdam iste optio impedit quae quos nesciunt magni dolores corporis ex et. Odio suscipit provident corporis ad repellat autem et et quasi accusamus explicabo animi. Similique dolore voluptatibus mollitia ipsam sunt sed aliquam. Nihil officiis numquam est non qui voluptatem ut. Fugiat velit eligendi delectus omnis inventore sit blanditiis autem explicabo veritatis.
| 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
Aut atque eos itaque vitae qui ut molestias suscipit porro id. Qui eum deleniti sed sed et illum rerum sit. Eligendi et ipsum vel quia ullam at. Est assumenda maiores unde est voluptatibus est doloremque repellendus enim. Placeat illum nemo quod expedita officiis.
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.
