---
title: "Начало работы со Swiper.js - WebTolk"
description: "Как работать со Swiper.js: HTML макет, способы подключения js и css, инициализация скрипта swiper в javascript"
url: "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-js-getting-started"
date: "2026-06-20T04:45:58+00:00"
language: "ru-RU"
---

# Начало работы со Swiper

WT JSwiper - SWiper.js для Joomla-разработчиков - Документация

**Категория:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins)

[Проект](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/versions)[Документация](https://web-tolk.ru/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.js в Joomla.

В нужном php-файле (`index.php` вашего шаблона или в php-файле макета (layout) вашего расширения) выполните подключение **Swiper.js**. Как правило макеты вывода модулей и плагинов находятся в папке `tmpl` модуля или плагина. Это может быть, например, путь **modules/mod_articles/tmpl** или **plugins/content/wtcontentimagegallery/tmpl**.

```
<?php
use Joomla\CMS\Factory; // В начале файла

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('swiper-bundle')->useStyle('swiper-bundle'); // Local file.
$wa->usePreset('swiper-bundle-remote'); // From CDN - get the latest version
```

Таким образом в код страницы будут подключены JS и CSS файлы **swiper.js**.

## Добавьте HTML-макет Swiper

Добавьте разметку Swiper в код страницы:

```
<!-- 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>
```

## Swiper: стили и размеры

Можно указывать пользовательские стили и размеры для swiper с помощью CSS.

```
.swiper {
  width: 600px;
  height: 300px;
}
```

## Инициализация Swiper

Необходимо инициализировать скрипт, чтобы swiper начал работать:

```
const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
```

**Примечание:** рекомендую оборачивать инициализацию скрипта в `DOMContentLoaded`.

```
document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
});
```

## 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/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/dev",
                "name": "Расширения Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/dev/joomla-plugins",
                "name": "Плагины Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper",
                "name": "WT JSwiper - SWiper.js для Joomla-разработчиков"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper/documentation",
                "name": "Документация"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "Начало работы со Swiper"
            }
        }
    ]
}
```

```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",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-js-getting-started",
            "name": "Начало работы со Swiper.js - WebTolk",
            "description": "Как работать со Swiper.js: HTML макет, способы подключения js и css, инициализация скрипта swiper в javascript",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "Начало работы со Swiper",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-js-getting-started",
            "description": "Как начать работать со Swiper.js в Joomla.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-js-getting-started"
            },
            "keywords": [
                " Swiper.js",
                "  Swiper",
                " свайпер",
                " "
            ]
        }
    ]
}
```