Basic Swiper Structure

To create a Swiper slider, you need a specific HTML structure. The outermost element is the swiper container. This acts as the main box that holds your slider and provides a styling hook for layout and appearance.

Inside the container, the swiper-wrapper element is required. This wrapper groups all the slides together and is essential for Swiper.js to function. The wrapper enables the slider to move all slides as a unit, allowing smooth transitions and effects.

Each individual slide is placed inside a swiper-slide element. Every slide you want to show—text, images, or other content—goes into its own swiper-slide. Swiper.js will treat each of these as a separate, swipeable slide.

The CSS provides basic styling: setting a fixed width and height for the slider, centering it on the page, and giving each slide a distinct background and layout. The wrapper uses display: flex to align the slides in a row, while each slide uses flex: 0 0 100% so only one is visible at a time.

This structure—container, wrapper, and slides—is required for Swiper.js to recognize and initialize your slider properly.