1.0.3 • Published 6 years ago

kno-slider v1.0.3

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

kno-slider

Responsive Slider

npm.io

Get Started

1. Include JS/CSS

<!-- include libraries(jQuery) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="dist/js/swipe.js"></script>

<!-- include kno-slider css/js-->
<link rel="stylesheet" href="dist/css/kno-slider.css">
<script type="text/javascript" src="dist/js/kno-slider.js"></script>

2. kno-slider it!

Then create the necessary tags in the body tag:

<div class="slider-container">

        <div class="slids">
        
            <div class="item">

                <div class="caption">
                    <div class="head1"><span>...</span> ...</div>
                    <div class="head2">...</div>
                </div>

                <img src="...">

            </div>

        </div>
             
        <div class="navigation">
            <div class="next">
                <div class="icon"></div>
                <div class="img"></div>
            </div>
            <div class="prev">
                <div class="icon"></div>
                <div class="img"></div>
            </div>
        </div>

    </div>

That is all. There's nothing you need to do after that. The kno-slider will operate automatically.