> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/js/modules.md).

# Modules

{% hint style="info" %}
Liste des modules à utiliser si besoin
{% endhint %}

<details>

<summary>SwiperJS (slider)</summary>

<https://swiperjs.com/>

```
yarn add swiper
```

Import JS

```javascript
import Swiper, { Navigation } from 'swiper';
```

Import CSS

```css
@import 'swiper/swiper.min.css';
```

Configuration

```javascript
const swiper = new Swiper('.classe', {
            modules: [Navigation],
            slidesPerView: 3,
            spaceBetween: 16,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
```

</details>

<details>

<summary>AOS (effets d'apparition)</summary>

<https://michalsnik.github.io/aos/>

```
yarn add aos@next
```

Import JS

```javascript
import AOS from 'aos';
```

Import CSS

```css
@import 'aos/dist/aos.css';
```

Utilisation

```html
<div data-aos="fade-up-right"></div>
```

</details>

<details>

<summary>Countup (défilement de chiffres)</summary>

```
yarn add countup.js
```

</details>

<details>

<summary>Gsap (animation complexe)</summary>

</details>

<details>

<summary>Axios (ajax)</summary>

```
yarn add axios
```

</details>

<details>

<summary>Layout Masonry</summary>

**Si vous avez besoin uniquement d'un simple layout Masonry sans filtre, utilisez :**&#x20;

<https://spope.github.io/MiniMasonry.js/>

Il s'utilise de la même façon que Masonry.js mais il est plus léger&#x20;

**Pour un layout Masonry avec filtre, utilisez :** &#x20;

<https://isotope.metafizzy.co/>

</details>