This time I will share jQuery Plugin and tutorial about Lightweight Touchable jQuery Carousel / Slider Plugin – Slydeshow, hope it will help you in programming stack.
Slydeshow is an easy, lightweight jQuery plugin used for generating an infinite-looping, mobile/touch-friendly carousel slider that supports any types of content such as images, text, iframes, videos and many more.
How to use it:
1. To get started, make sure to load the following files loaded properly in the html document.
1 |
<link rel="stylesheet" href="css/slydeshow.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="js/jquery.slydeshow.js"></script> |
2. Load the jQuery easing plugin for extra easing functions support.
1 |
<script src="/path/to/jquery.easing.js"></script> |
3. The primary HTML structure for the carousel slider. You’re allows to config the animations for each slide using HTML5 data attributes as follows:
01 |
<div id="main-slideshow"> |
05 |
<div class="video-container"> |
08 |
<div class="video-description"> |
09 |
<h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Rising: Rebuilding Groun |
11 |
<div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo"> |
12 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p> |
20 |
<div class="video-container"> |
23 |
<div class="video-description"> |
24 |
<h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Sheriff of Ghost Town</h1> |
25 |
<div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo"> |
26 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p> |
34 |
<div class="video-container"> |
37 |
<div class="video-description"> |
38 |
<h1 data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-easing="easeOutExpo">Super Sellers</h1> |
39 |
<div class="video-lede" data-x-start="100" data-x-end="0" data-opacity-start="0" data-opacity-end="1" data-speed="300" data-delay="300" data-easing="easeOutExpo"> |
40 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum ligula aliquam dictum. Vestibulum dui nisl, volutpat et molestie quis, mollis sed nulla. Aenean at tortor dui. Mauris sit amet justo arcu. Pellentesque hendrerit, enim tristique ultricies luctus, odio tellus tempus nulla, eu commodo nisi erat at lacus.</p> |
48 |
<div class="video-container"> |
51 |
<div |
