# Slider Project Setup

## Source Folder Overview

![](/files/-M_glPSFrgvarlJL92uy)

![](/files/-M_glWuxWwprtT6PnHCx)

![](/files/-M_gl_FkE89T-7rAC7ww)

## Initial Files Setup

At first you need to insert required files into your page. Go to plugin folder in the downloaded package and upload “transitionslider” and “assets” folder to your server.

![](/files/-M_glkTiJODlTMXzVjmh)

![](/files/-M_gln9AT97NMK7fck0H)

![](/files/-M_gloV9DXhhNGPMw_--)

## Include plugin scripts

```markup
<!-- External libraries style sheet -->
<link rel="stylesheet" href="transitionslider/css/swiper.min.css" />
<link rel="stylesheet" href="transitionslider/css/animate.min.css" />

<!-- Base TransitionSlider style sheet -->
<link rel="stylesheet" href="transitionslider/css/style.min.css" />

<!-- External libraries JS files -->
<script type="text/javascript" src="transitionslider/lib/jquery.min.js"></script>
<script type="text/javascript" src="transitionslider/lib/three.min.js"></script>
<script type="text/javascript" src="transitionslider/lib/Tween.min.js"></script>
<script type="text/javascript" src="transitionslider/lib/swiper.min.js"></script>
<script type="text/javascript" src="transitionslider/lib/webfontloader.js"></script>

<!-- TransitionSlider main JS file -->
<script type="text/javascript" src="transitionslider/js/transitionSlider.min.js"></script>
```

![](/files/-M_gm8S9i_ggYJgyFxKM)

## Slider HTML element

Insert following HTML to the `<body>` section. This HTML defines your slider content.

```markup
<!-- transitionslider -->
<div id="slider-wrapper"></div>
```

## Initializing Slider

Insert the following JavaScript after slider HTML.

```markup
<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            width: 640,                     // slider standard width
            height: 320,                    // slider standard height
            fullscreen: false,              // slider fullscreen mode
            responsive: false,               // slider device responsive mode
            // more slider options goes here...
            // check slider options section in documentation for more options.

            slides: [
                { src: "assets/images/1.jpg" },    // 1. slide background image
                { src: "assets/images/2.jpg" },    // 2. slide background image
                { src: "assets/images/3.jpg" },    // 3. slide background image
                { src: "assets/videos/4.mp4" }     // 4. slide background video
                // more slide options goes here...
                // check slide options section in documentation for more options.
            ]
        });
    });
</script>
```

![](/files/-M_gmTCXnh3q_O3d-7l6)

Open the index.html file in your browser to preview your new Transition Slider added to your website.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://transition-slider.gitbook.io/jquery/getting-started/source-folder-and-slider-project-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
