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.
Last updated
Was this helpful?