Easy Carousel plugin
Before the examples:
- This is a img slideshow plugin for jQuery, with builtin lightbox capability.
- For more information and the parameters, see the github repo.
- You have to include jQuery, preferably in the head section:
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"<</script>
</head>
- The html code for the images is similar in every example:
<div id="easy-carousel-1">
<img src="imgs/2/1.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<img src="imgs/2/2.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<img src="imgs/2/3.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<img src="imgs/2/4.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<img src="imgs/2/5.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<img src="imgs/2/6.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
</div>
Example 2:
- custom image sizes and visible image number
- images with different sizes
<script>
$('#easy-carousel-2').easyCarousel({
imgWidth: '350px',
imgMaxHeight: '200px',
visibleImgCount: 4
});
</script>
Example 3:
- custom style
- images with different sizes
<script>
$('#easy-carousel-3').easyCarousel({
wrapperBorder: '3px solid #666',
wrapperBackground: 'white',
imgBorder: '5px solid #999',
buttonBackground: 'rgba(0, 0, 0, 0.6)',
buttonColor: 'white',
buttonHoverBackground: 'black',
buttonBorder: '1px solid #222',
buttonHoverBorder: '1px solid #444',
modalWindowBackground: '#444',
modalWindowBorder: '2px solid #444',
modalNumberColor: '#ccc',
modalCaptionColor: 'white',
modalCaptionFontWeight: 'normal',
modalButtonBackground: '#aaa',
});
</script>