Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
doc
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

HyperText Slider

Build Status Dependency Status devDependency Status Documentation Status

Web slideshow component which comes with:

  • separately configurable background and content CSS3 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),
  • declarative (HTML/CSS) programming interface (no JavaScript coding required).

Getting the Code

Preferred way to get HyperText Slider is to use bower.

bower install hyper-text-slider --save-dev

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

npm install --save hyper-text-slider

Hello, HyperText Slider!

<!DOCTYPE html>
<html>
<head>
  <title>Hello, HyperText Slider!</title>

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

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

<!--
     2. A flag on document's body which instructs HyperText Slider
       to automatically create and start Slider objects for all declared
       sliders on the page (no JavaScript programming required).
-->
<body class="ht-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="ht-slider ht-defaults">
    <div id=hello>
      <h1>Hello, HyperText Slider!</h2>
    </div>
    <div id=transitions class=ht-theme--black>
      <p>How's the waether?</p>
    </div>
  </div>

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

Documentation

API Reference:

User Guides:

Tutorials:

See Also:

Project Info:

Contributing

Please read build.config.js file before contributing. Pull requests are very welcome!

License

Copyright © 2016 Maciej Chałapuk. Released under Apache License Version 2.0.

About

Declarative, CSS3-Powered Slideshow component.

Resources

License

Packages

No packages published