The ultimate jQuery Slider

What is it?

startVal is an open source toolkit for developers and web designers who want to add an image slider to their website. It is a fast and lightweight slider, and in addition, it's 100% customizable!

It was built using the jQuery library. Licensed under both MIT and GPL licenses. It was powered by @pausanchezv (Makethejobs and SaveAllTheRobots developer).

  Get started   Download   Github

Features

  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!

How to use it

The easy way

The easy way is to use the links directly from the startVal server. This way it is not necessary to download the startVal library and upload it to your server!


    <html>
    <head>

        <!-- Links to the libraries needed -->
        <link rel="stylesheet" href="//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="//startval.com/plugin/js/sv-slider.min.js" type="text/javascript"></script>

        <!-- Initialize the slider -->
        <script type="text/javascript">
            $(document).ready(function() {
                $('.sv-slider').SVSlider();
            });
        </script>
    
    </head>
    <body>

        <!-- Slider HTML (change this to your own!) -->
        <div class="sv-slider">
            <img src="//startval/assets/img/examples/1.jpg" />
            <img src="//startval/assets/img/examples/2.jpg" />
            <img src="//startval/assets/img/examples/3.jpg" />
        </div>
    
    </body>
    </html>

The other way

The other way is to download the plugin and link it to your website. In this way you should have a copy of the files on your server.

Click here to download plugin


    <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" type="text/javascript"></script>
    
        <!-- Initialize the slider -->
        <script type="text/javascript">
            $(document).ready(function() {
                $('.sv-slider').SVSlider();
            });
        </script>
    
    </head>
    <body>
    
        <!-- Slider HTML (change this to your own!) -->
        <div class="sv-slider">
            <img src="//startval/assets/img/examples/1.jpg" />
            <img src="//startval/assets/img/examples/2.jpg" />
            <img src="//startval/assets/img/examples/3.jpg" />
        </div>
    
    </body>
    </html>