hyper-text-slider

v0.7.3

Published

2 years ago

Declarative CSS3-Powered Slider HTML Component

Downloads

0High
0Medium
0Low

mchalapuk

slider slideshow slide css3 transitions animations background browserify

HyperText Slider

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:

HyperText Slider via Node and Browserify

Contributing

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

HyperText Slider

Getting the Code

Hello, HyperText Slider!

Documentation

Contributing

License