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.
Copy <!-- 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>
Copy <!-- transitionslider -->
<div id="slider-wrapper"></div> Insert the following JavaScript after slider HTML.
Copy <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.
