Slider Project Setup

Source Folder Overview

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.

Include plugin scripts

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

Slider HTML element

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

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

Initializing Slider

Insert the following JavaScript after slider HTML.

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

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

PreviousWelcome NextGeneral

Last updated 4 years ago

Was this helpful?