Slider Project Setup
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
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.
<!-- 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>Insert following HTML to the <body> section. This HTML defines your slider content.
<!-- transitionslider -->
<div id="slider-wrapper"></div>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.
