Etiam porta sem malesuada slider integration and settings euismody
In order to add your page a new Edge Slider, first of all you should ass the jQuery library in between the tags. There are two different methods for adding jQuery library. You can use either one of the two methods below.
You can see the "jquery-1.7.1.min.js" file that belongs to jQuery 1.7.1 version in ../edgeslider/js/ folder. In order to add the jQuery files in this folder to your website, put the codes below between tags
.<!DOCTYPE html> <html> <head> … <!-- Latest compiled and minified Jquery Framework --> <script src=“/edgeslider/js/jquery-1.7.1.min.js“></script> … </head> <body> …
Another way of adding jQuery library to your website is installing it through remote servers that contain the jQuery libary. If your website has a lot of visitors, you can reduce the server traffic by installing jQuery library through Google CDN servers. Just add the codes below between <head> </head>.
<!DOCTYPE html> <html> <head> … <!-- Latest compiled and minified Jquery Framework --> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/ jquery.min.js"></script> … </head> <body> …
In order to add Edge Slider to your page, you need to add Edge Slider jQuery plug-in to your page first. Put the code below between the tags <head> </head> and strengthen your website with Edge Slider plug-in.
<!DOCTYPE html> <html> <head> … <script src="/edgeslider/js/jquery.edgeSlider.js"></script> … </head> <body> …
After adding jQuery and Edge Slider libraries to your website, you can add a new Edge Slider object to your page. At first you should add Edge Slider to a place where you can specify it between the tags <body> </body>.
<!DOCTYPE html> <html> <head> </head> <body> … <div id=“slider”></div> … </body> </html>
We use the name "slider", the id name of the <div> </div> object, again amongst the javascript codes that we can add between <head></head> like shown below.
<head>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').edgeslider({
edgeTag: 'tagname',
customCss: 'slider.css',
transitionEffect: 'linear',
transitionEffectTime: 600,
navigation: true,
pagination: 'number',
cursor: 'pointer',
type: 'normal',
count: 2
});
});
</script>
</head>
The javascript codes we added above make sure Edge Slider is viewed in features we specify in <div></div> area named “slider”. The detail you should be careful about is in “sliderDataTag:’tagname’” line, the variable we define as “tagname” has to be one of the tag groups specified in admin panel.
You can customize your slider by adjusting the following features.
$(‘#slider').edgeslider({
…
properties: ‘value',
…
});
Edge Slider plug-in is pretty flexible for use. It allows you to design your slider however you want.
You can adjust the slider.css folder that belongs to the slider you add for further appearance settings.
/**************************************************/
/*********** Custom Edge Slider CSS ***************/
/**************************************************/
#slider {
width: 550px;
height: 400px;
margin: 0 auto;
overflow:hidden;
position:relative;
background-color: #FFF;
text-align: center;
}
.slider-pagination {
list-style: none;
background-color: #577f15;
width: 100%;
left:0px;
bottom: 0px;
position:absolute;
overflow: hidden;
margin: 0;
padding: 0;
z-index: 100;
}
.slider-pagination ul {
list-style: none;
padding: 0;
margin: 0;
}
.slider-pagination li {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
"Edge Slider Management Panel" integrates with your website's admin panel, so you can install, organize and delete your slides by only using package numbers.