Skip to content
Declarative, CSS3-Powered Slideshow component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
doc
examples
lib
.codeclimate.yml
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.stylelintrc
.travis.yml
LICENSE
README.md
bower.json
build.config.js
gulpfile.js
index.js
jasmine.json
package.json

README.md

HyperText Slider

Build Status Dependency Status devDependency Status Documentation Status Code Climate

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.

You can’t perform that action at this time.