Endless Carousel Slider
Any HTML Content
Any HTML Content
Benefits from Endless Carousel Slider
- ENLDESS LOOP
- Responsive
- Use ANY HTML Content
- Easy to handle
- Customize the speed
- Change the direction with mouseover
- Size adjustable
- Multiple slider in each site
- Simple to style
- Little code
- Only HTML, Javascript, CSS
- Easy to combine with other javascript librarys
Install in your website with only 3 easy steps
1. Include endlessCarousel.css and endlesscarousel.js
<head>
<link rel="stylesheet" href="endlessCarousel.css" type="text/css" media="screen"/>
<script src="endlesscarousel.js"></script>
</head>
2. Include the Endless Carousel Slider in your homepage
<body>
<div id="endlessCarousel">
<div class="left-arrow" onmouseover="change(0);" ><img src="ec-arrow-right.png"></div>
<div class="right-arrow" onmouseover="change(1);" ><img src="ec-arrow-left.png"></div>
<div class="slidebox" >
<div class="box"><img src="slider/01.endlessCarousel.jpg" alt="" ></div>
<div class="box">
<div class="HTMLinput text">Any HTML Content</div>
<img src="slider/02.endlessCarousel.jpg" alt="" >
</div>
<div class="box"><img src="slider/03.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/04.endlessCarousel.jpg" alt="" ></div>
<div class="box">
<a class="HTMLinput button" href="javascript: void(0)" >Button</a>
<img src="slider/05.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/06.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/07.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/08.endlessCarousel.jpg" alt="" ></div>
<div class="box">
<div class="HTMLinput text" >Any HTML Content</div>
<img src="slider/09.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/10.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/11.endlessCarousel.jpg" alt="" ></div>
<div class="box">
<a class="HTMLinput button" href="javascript: void(0)" >Button</a>
<img src="slider/12.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/13.endlessCarousel.jpg" alt="" ></div>
<div class="box"><img src="slider/14.endlessCarousel.jpg" alt="" ></div>
</div>
</div>
</body>
3. Include this simple javascript function
<script>
endlessCarousel(200, 50);
//endlessCarousel(width, speed);
// width of the boxes
// speed in ms, how often move left
</script>
That's it!
