Simple Slider

Title from this beautiful picture

Benefits from SimpleSlider

ENLDESS LOOP
Responsive
You can style it to FullSize with css
Use ANY HTML Content
Easy to handle
Customize the speed
Size adjustable with css
Multiple slider in each site
Simple to style
Less code
Only HTML, Javascript, CSS
Easy to combine with other Javascript Librarys

Install in your website with only 3 easy steps

1. Include simpleSlider.css and simpleSlider.js in the head

    <head>
         <link rel="stylesheet" href="simpleSlider.css" type="text/css" media="screen"/>
         <script src="simpleSlider.js"></script>
    </head>

2. Include the SimpleSlider in your homepage in the body

    <body>
    
    <div class="simpleSlider">
    
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider1.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider2.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider3.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider4.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider5.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider6.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider7.jpg' alt='' ></div>
        <div class="slide"><div class="title">Title from this beautiful picture</div><img src='images/simple-slider8.jpg' alt='' ></div>
    
    </div>
    
    </body>

3. Include this simple Javascript function

    
    <script>
    
        simpleSlider(6000);  // the inverval time in ms
        
    </script>

Simple Slider

Benefits from SimpleSlider

Install in your website with only 3 easy steps

1. Include simpleSlider.css and simpleSlider.js in the head

2. Include the SimpleSlider in your homepage in the body

3. Include this simple Javascript function

That's it!