> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/layouts/features/pre-built-libraries.md).

# How to use Pre-built libraries

{% hint style="info" %}
Pre-built libraries are available only in **Advanced Views Pro**. In Lite, you need to download and enqueue JS libraries manually, and then [employ them in templates](broken://pages/k0TXqgUUlLyFPpZP1roJ#employing-js-libraries).
{% endhint %}

**Advanced Views Pro** includes a collection of pre-loaded JavaScript libraries. Beyond loading the required assets, it also understands each library's markup requirements and provides the minimal configuration needed, **automatically applying it** to the selected fields.

Unlike drag-and-drop solutions, Advanced Views Pro doesn't hide the instance setup details. Instead, it gives you full control over the instance setup code, allowing you to customize each field using the complete set of options provided by the underlying library.

This approach makes it easy to integrate powerful JavaScript libraries into your *Layouts* and *Post Selections* while retaining the flexibility to tailor every implementation to your needs.

## 1. Usage example

Suppose you have an ACF gallery field and want to turn it into an inline gallery. 

You select the [LightGallery library](https://www.lightgalleryjs.com/demos/inline/) in the [Gallery option](https://docs.acfviews.com/display-content/meta-fields/content-fields/gallery) of the field settings. Advanced Views will automatically adjust the field's markup by adding the necessary classes and wrappers required by the LightGallery library. It will also include the minimal configuration settings for the instance in the JS code of the current *Layout*.

Now, if you need to, you can quickly customize this default gallery markup and the JS configuration of the inline gallery.

When the *Layout* or *Post Selection* that uses a specific JS library is displayed on a page, Advanced Views will automatically load that library on the page. This means you still have full control over the markup and JS instance settings, but you don't need to worry about library loading, reading documentation about markup requirements, or configuring the instances from scratch.

You can find the full list of pre-loaded JS libraries on this page, along with information about which field types are supported by each library.

## 2. Supported libraries

Below you'll find a list of the supported libraries grouped by layout types.

{% hint style="info" %}
All the included JS libraries are well-known, written in pure JavaScript, and offer flexibility in their settings.
{% endhint %}

### 2.1) Masonry gallery

* [Macy](http://macyjs.com/)
* [Flat masonry](https://gitlab.com/lightsource/masonry)

Supported field types: all fields that support multiple images inside, like WooCommerce Product Gallery, ACF Gallery fields, etc. 

### 2.2) Classic gallery

* [LightGallery](https://www.lightgalleryjs.com/)

Supported field types: all fields that support multiple images inside, like WooCommerce Product Gallery, ACF Gallery fields, etc. 

### 2.3) Slider/Carousel

* [Splide](https://splidejs.com/)

Supported field types include all fields that support multiple (non-plain) items. Examples of such fields are ACF relationship and user fields with multiple options, and Repeaters, among others. Additionally, you can enable a slider for the *Layout*, which can be configured in the Display Settings tab of your *Post Selection*.

### 2.4) Lightbox (image popup)

* [LightGallery](https://www.lightgalleryjs.com/)
* Simple (custom)

Supported field types: all image fields (like Post.FeaturedImage or ACF image), and all fields that support multiple images inside. It means, that for example, you can use Lightbox for the Masonry gallery. 

### 2.5) Google and OpenStreetMap

The Advanced Views Pro comes with the built-in JS code to display [Google](/advanced-views/field-types/media/map-field.md) and [Open Street Maps](broken://pages/FIInPJRWACQBa7peseo9). No extra library is required.

## 3. Libraries compatibility

Different libraries have different markup requirements, so when several libraries are mixed, they may not work out of the box and require manual adjustments.

Known incompatibilities are listed below:

### 3.1) Splide with LightGallery Lightbox

Workaround: 

1. Copy the default template to the custom template.
2. In the custom template, change the `splide__track` element tag from `ul` into `div`
3. Open the CSS & JS tab
4. In the JS code, above the `lightGallery` setup, change the query selector from `.avf-layout__gallery` to `.avf-layout__gallery-list`, as shown below:

```javascript
var gallery = this.querySelector('.avf-layout__gallery-list');
if (gallery) {
	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(gallery, {
```

After saving, the setup will work properly.

## 4. Extra libraries

Haven't found your favorite library in the list? Read [how to enqueue a custom JS library](broken://pages/k0TXqgUUlLyFPpZP1roJ#employing-js-libraries) or use the [suggest a feature](https://docs.advanced-views.com/customization/suggest-a-feature) option to request it.