This a photo-carousel that is written by JavaScript

Demo GIF

Functions

  • 1.Scroll automatically
  • 2.Supporting left and right dragging
  • 3.Click the navigation point to switch
  • 4.Support click pictures to access the external address
  • 5.Encapsulated and easy to use
  • 6.Native JavaScript writing

Create&Init

<script src="js/photo-carousel.js"></script>Copy the code
<link rel="stylesheet" href="css/photo-carousel.css">Copy the code
<div style="width:1000px; height:600px" id="photo-carousel"></div>Copy the code
var imagess = [
	'images/one.png',
	'images/two.png',
	'images/three.png'
]
var data = [
	{
		url:'#' 
		/* no address */
	},
	{
		url:'https://github.com/xuzijie1995/Photo-Carousel' 
		/*no 'https://' or 'http://', 'http://' will be added automatically 
		& u can change this in photo-carousel.js line 227*/
	},
	{
		url:'javascript:void(0)' 
		/* no address */
	}
]
var el = new PhotoCarousel({
	images : imagess, 		// * necessary
	data : data, 			// * necessary
	id : 'photo-carousel', 		// * necessary
	max : 10, 			//default 10, unnecessary, the max (%) for next picture u can see when dragging, 0<max<100
	sensibility : 1,		//unnecessary, default 1, sensibility when dragging, but I suggest sensibility=max/10
	interval: 5 			//unnecessary, default 5(s), seconds for scroll automatically
});
el.init();
Copy the code

Attention

  • 1.The PhotoCarousel will not Scroll automatically if there is only one picture.
  • 2.No testments for mobile yet, but I have done some adaptions to mobile, I need a volunteer. 😛
  • 3.I am practising my English.