Swiper is a free, modern slider built for touch screens. It uses your device’s hardware to make smooth, natural-feeling moves. It is made for mobile websites, mobile web apps, and apps that run on phones — whether they are web-based or built right into the phone.
J1 Slider
The J1 Slider is a slideshow that visitors can click or swipe through. It is built on SwiperJS (version 1.2.0, January 2025) and adapts to every screen size, from desktop to phone.
Text Sliders
A slider does not have to show images — it can also show text. The J1 Template includes several styles of text sliders you can use as small banners or animated messages on a page.
A slider is mostly used to show pictures. But in the J1 Template, you can use it to show many other things too — like plain text in a slide show.
Base Text Carousel
You can place important statements or topics at the top of an article or paragraph so readers notice them. With animation, you can share key facts and get your readers' attention.
Image Slider
Image sliders (also called carousels) show a series of pictures one after another. They are perfect for an animated banner that introduces your site, your products, or any visual story you want to tell.
One Slide Slider + Pagination
SwiperJS supports both single-image and multi-image slideshows. The example below shows a single image at a time, with arrow buttons to step back and forth and a row of dots ("pagination") that shows how many slides there are.
Image Slider + Lightbox
You can also combine a slider with a lightbox. The result is a very compact image gallery: visitors browse the slides, and when they want a closer look, they click an image to enlarge it in the lightbox.
The J1 lightbox module also supports image groups. Once one image is open in the lightbox, visitors can step through the rest of the group with simple arrow buttons.
Extendend Image Slider
A layout changes how a slider looks and behaves — not the slides themselves, but the way they are arranged on screen. Layouts can make a slideshow easier to navigate or more visually striking. The next sections show three layout options.
Layout Thumb Top|Bottom
The thumb layout adds a row of small preview images (called thumbnails) above or below the main slider. Visitors can click a thumbnail to jump to that slide, or use the arrow buttons to step through them.
| This layout looks best with high-quality images on websites that are mostly used on desktop computers, where you have more space. |
This example places thumbnails above the main slider. The layout uses two rows (one for the big image and one for the thumbnails), which takes more space but shows the images at their best.
Layout Neighbor
The neighbor layout shows the active slide with a preview of the slide before it on the left and a preview of the next slide on the right. Clicking the left preview goes back a slide, and clicking the right preview goes forward.
| With the neighbor layout, the slider feels compact and self-contained — you do not need extra navigation buttons or arrows. |
Layout Panorama
The panorama layout adds a 3D-like curved effect to a slider. As you move from one slide to the next, the slides appear to flow along a curved surface, like looking through the window of a moving train. This works best for wide images such as landscapes or panoramic photos.