startVal is an open source toolkit for developers and web designers who want a jQuery slider for their website. It is a fast and lightweight slider, and in addition, it's 100% customizable!
Customize slider buttons (type, position, radius...)
Customize slider captions (position, font size, font type...)
Customize slider pager (position, background, type...)
Add image filters (green, red, black...)
And customize aspects such as font size, border radius, border shadows, random effects, type of animations, and many others!
The easy way is to use the links directly from the startVal server. This way it is not necessary download the startVal library and upload it to your server!
<html>
<head>
<!-- Links to the libraries needed -->
<link rel="stylesheet" href="https://www.startval.com/plugin/css/sv-slider.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.startval.com/plugin/js/sv-slider.min.js"></script>
<!-- Initialize the slider -->
<script>
$(document).ready(function() {
$('.sv-slider').SVSlider();
});
</script>
</head>
<body>
<!-- Slider HTML (change this to your own!) The images can have any name and any type! -->
<div class="sv-slider">
<img src="https://www.startval.com/assets/img/examples/1.jpg" />
<img src="https://www.startval.com/assets/img/examples/2.jpg" />
<img src="https://www.startval.com/assets/img/examples/3.jpg" />
</div>
</body>
</html>
The other way is download the plugin and link it to your website. In this way you should have a copy of the files in your server.
<html>
<head>
<!-- Links to the libraries needed -->
<link rel="stylesheet" href="/path/to/css/sv-slider.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/path/to/js/sv-slider.min.js"></script>
<!-- Initialize the slider -->
<script type="text/javascript">
$(document).ready(function() {
$('.sv-slider').SVSlider();
});
</script>
</head>
<body>
<!-- Slider HTML (change this to your own!) The images can have any name and any type! -->
<div class="sv-slider">
<img src="https://www.startval/assets/img/examples/1.jpg" />
<img src="https://www.startval/assets/img/examples/2.jpg" />
<img src="https://www.startval/assets/img/examples/3.jpg" />
</div>
</body>
</html>