Skip to content

Latest commit

 

History

History
74 lines (65 loc) · 4.16 KB

README.md

File metadata and controls

74 lines (65 loc) · 4.16 KB
Raw

Slide Projection (SP)

Slide Projection - Its a image slider which is built in pure vanilla js

Visit https://slide-projection.herokuapp.com

CSS production version, or the development version

JS production version or the development version

Features:

  • Next / Prev Controls
    • Description: Set inside / outside the container, Create multiple controls for single slider.
    • Settings:
      • data-sp-prev selector id or class
      • data-sp-next selector id or class
    • Demo: Link
  • Pause on Hover Controls
    • Description: Slider pause on mouse enter and play on leave.
    • Settings:
      • data-sp-pause-on-hover true or false, set selector id or class
    • Demo: Link
  • Caption Controls
    • Description: slide caption at bottom and customization.
    • Settings:
      • Default template: {{slideNum}} / {{slideCount}}
      • slideNum Active slide number
      • slideCount Total number of slides
      • Add new empty element with this class sp-caption name it will show the caption
      • Customization properties:
      • data-sp-caption selector id or class
      • data-sp-caption-template Set you own template
    • Demo: Link
  • Manual Fx Controls
    • Description: Slide in / out effect customization, adding custom class.
    • Settings:
      • data-sp-fx default will be fade, another is slide this will slide right to left and can set own customize class name directly
      • data-sp-fx-next default will be next-fade next event class effect
      • data-sp-fx-prev default will be prev-fade prev event class effect
      • data-sp-fx-active default will be active-fade active event class effect
      • data-sp-fx-initial default will be initial-fade initial event class effect
    • Demo: Link
  • Overlay Options
    • Description: title and description of slide customization.
    • Settings:
      • Add new empty element with this class sp-overlay name it will show the overlay text from passed below property
      • below properties need to present in sp-slide class
      • data-sp-title Title of the slide
      • data-sp-desc Description of the slide
      • data-sp-overlay-template this property need to be added in sp-slideshow class, set template as we need using keywords {{title}}, {{desc}}, {{slideNum}} and {{slideCount}}
    • Demo: Link
  • Speed Option
    • Description: set interval time in milliseconds.
    • Settings:
      • data-sp-speed set milliseconds
    • Demo: Link
  • Auto Play Option
    • Description: set auto play on / off slider.
    • Settings:
      • data-sp-auto-play true or false
    • Demo: Link
  • Multiple Slideshow in Single Page
    • Description: Can define multiple slider sin a single page without any conflict.
    • Settings:
      • there are no need to setting anything
    • Demo: above almost demo examples have doubled sliders.

Review & Suggestion & Solutions:

I am really poor in CSS, so there will be most of issues, will cover as soon as possible.

I am open to accept suggestion and solutions, please add issues Issues and will try to resolve as soon as possible.