Skip to main content

HTML page with simple slider

This dummy HTML page might be helpful if you're new to HTML, CSS, or JavaScript and you don't know where to put code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title>RoyalSlider Example</title>

    <!-- jQuery, 1.7 or higher is required -->
    <script  src="royalslider/jquery-1.8.3.min.js"></script>
    <!-- main slider JS files -->
    <script src="royalslider/jquery.royalslider.min.js"></script>


    <!-- main slider CSS file -->
    <link href="royalslider/royalslider.css" rel="stylesheet">
    <!-- selected skin CSS file -->
    <link href="royalslider/default/rs-default.css" rel="stylesheet">


    <!-- slider css -->
    <style>
            /* you may put here additional slider CSS */
            /* but it'll be better if you move it to separate CSS file that your site uses */
    </style>

  </head>
  <body>

    <!-- actual slider code -->
    <div id="content-slider" class="royalSlider contentSlider rsDefault">
      <div>slide1</div>
      <div>slide2</div>
      <div>slide3</div>
    </div>

    <script>
    // Slider initialization, you may put this part of th=ge code in a JS file
    jQuery(document).ready(function($) {

        // slider initialization
        $('#content-slider').royalSlider({
            // example of slider options
            controlNavigation: 'bullets',
            autoPlay: {
                enabled: true
            },
            deeplinking: {
                enabled: true,
                prefix: 'slider-'
            }
        });

    });
    </script>

  </body>
</html>