npm

Need private packages and team management tools?Check out npm Orgs. »

hyper-text-slider

0.7.3 • Public • Published

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.

install

npm i hyper-text-slider

Downloadsweekly downloads

3

version

0.7.3

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability