---
title: "Swiper files. Full layout. Initialization with parameters. - WebTolk websites development, Joomla Extensions"
description: "Swiper files. Full HTML Layout and Styles. Initialization Swiper with parameters."
url: "https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/documentation/swiper-files-html-layout-initialization-with-parameters"
date: "2026-06-20T06:38:08+00:00"
language: "en-GB"
---

# Swiper files. Full layout. Initialization with parameters.

WT JSwiper - SWiper.js for Joomla developers - Documentation

**Category:** [Joomla plugins](https://web-tolk.ru/en/dev/joomla-plugins)

[Project](https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper)[Versions](https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/versions)[Documentation](https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/documentation)[GitHub](https://github.com/WebTolk/WT-JSwiper-Joomla-web-asset-plugin)[JED](https://extensions.joomla.org/extension/core-enhancements/libraries/wt-jswiper/)

Swiper files. Full HTML Layout and Styles.
 Initialization Swiper with parameters.

## Swiper Full HTML Layout

```
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
```

## Files

Swiper package contains different sets of CSS, Less and SCSS styles. All of them you can see in [official documentation](https://swiperjs.com/swiper-api#styles). WT JSwiper web asset for Joomla provide only bandle package.

 swiper-bundle.min.cssAll Swiper styles including all modules styles (like Navigation, Pagination, etc.). Located in **media/plg_system_wtjswiper/css**. Minified.swiper-bundle.min.jsAll Swiper modules in one file. Located in **media/plg_system_wtjswiper/js**. Minified.

## Initialize Swiper

Now, when we have Swiper's HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters)- initialize swiper with options

- `swiperContainer` - `HTMLElement` or `string` (with CSS Selector) of swiper container HTML element. Required.
- `parameters` - `object` - object with Swiper parameters. Optional.
- **Method returns initialized Swiper instance**

For example:

```
const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});
```

**After** you initialize Swiper it is possible to access to Swiper's instance on its HTMLElement. It is swiper property of Swiper's HTML container element:

```
const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();
```

[See also](https://swiperjs.com/swiper-api#initialize-swiper)

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/en",
                "name": "Home"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/en/dev",
                "name": "Joomla extensions"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/en/dev/joomla-plugins",
                "name": "Joomla plugins"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/en/dev/joomla-plugins/wt-jswiper",
                "name": "WT JSwiper - SWiper.js for Joomla developers"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/en/dev/joomla-plugins/wt-jswiper/documentation",
                "name": "Documentation"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "Swiper files. Full layout. Initialization with parameters."
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk websites development, Joomla Extensions",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/documentation/swiper-files-html-layout-initialization-with-parameters",
            "name": "Swiper files. Full layout. Initialization with parameters. - WebTolk websites development, Joomla Extensions",
            "description": "Swiper files. Full HTML Layout and Styles. Initialization Swiper with parameters.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "en-GB",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "Swiper files. Full layout. Initialization with parameters.",
            "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/documentation/swiper-files-html-layout-initialization-with-parameters",
            "description": "Swiper files. Full HTML Layout and Styles. \r\nInitialization Swiper with parameters.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-jswiper/documentation/swiper-files-html-layout-initialization-with-parameters"
            }
        }
    ]
}
```