Hermes-slider NPM

Utilizing CSS3 Transitions

Hermes comes with:

configurable background and content transitions,
responsiveness (automatically adjusts it's layout to screen resolution),
extendability (adding new transtitions is very simple),
component-based approach (each feature can be enabled separately),
HTML/CSS programming interface (no JavaScript coding required).

Getting the Code

Preferred way to get hermes is to use bower.

bower install hermes --save-dev

You can also use npm (especially if using browserify).

npm install --save hermes-slider

Hello, Hermes!

<!DOCTYPE html>
<html>
<head>
  <title>Hello, Hermes!</title>

  <!--
    There are 4 things things needed for Hermes to work:

     1. Hermes' CSS (styles for the slider).
  -->
  <link href=bower_components/hermes/dist/hermes.min.css
        rel=stylesheet type=text/css>
</head>

<!--
     2. A flag on document's body which instructs Hermes to automatically
       create and start Slider objects for all declared sliders on the page
       (no JavaScript programming required).
-->
<body class="hermes-autoboot">

  <!--
     3. Declaration of a slider (features are enabled by adding class names
       to the slider element; this is a minimal configuration, but you can
       get pretty wild in here; please consult documentation for details).
  -->
  <div class="hermes-slider hermes-defaults">
    <div id=hello>
      <h1>Hello, Hermes!</h2>
    </div>
    <div id=transitions class=hermes-theme--black>
      <p>How's the waether?</p>
    </div>
  </div>

  <!--
     4. And Hermes script (it could be placed in the head section,
       but page may render a little faster this way).
  -->
  <script src=bower_components/hermes/dist/core.min.js type=text/javascript>
  </script>
</body>
</html>