This time I will share jQuery Plugin and tutorial about Easy Responsive Content Slider With jQuery And CSS3, hope it will help you in programming stack.
A responsive, fullscreen content slider that comes with a ‘Zoom out’ animation when transitioning between slides. Based on jQuery, SVG icon, CSS Flex box and CSS3 transitions & transforms.
How to use it:
1. Add html content together with the SVG based navigation arrows into the slider.
01 |
< div class = "slide one" > |
04 |
< div class = "slide two" > |
07 |
< div class = "slide three" > |
10 |
< div class = "slide four" > |
13 |
< div class = "slide five" > |
2. The CSS to position the navigation arrows.
3. The core CSS/CSS3 styles for the slides.
03 |
-webkit- display : flex; |
04 |
-webkit-align-items: center ; |
06 |
justify- content : center ; |
07 |
-webkit-justify- content : center ; |
11 |
transition: all 1 s ease; |
12 |
-moz-transition: all 1 s ease; |
13 |
-ms-transition: all 1 s ease; |
14 |
-webkit-transition: all 1 s ease; |
15 |
-o-transition: all 1 s ease; |
4. Create the ‘Zoom out’ effect using CSS3 2D transforms.
3 |
-moz-transform: scale( 0.7 ); |
4 |
-webkit-transform: scale( 0.7 ); |
5 |
-o-transform: scale( 0.7 ); |
6 |
-ms-transform: scale( 0.7 ); |
5. Place the needed jQuery JavaScript library at the end of the document.
1 |
< script src = "//code.jquery.com/jquery-2.2.3.min.js" ></ script > |
6. The core JavaScript (jQuery script) to active the slider.
08 |
$( "#next" ).click( function () { |
12 |
$( "#previous" ).click( function () { |
17 |
function initialiseSlider() { |
18 |
$( "div" ).each( function (value) { |
20 |
var position = -100 * value; |
21 |
$( this ).css( "left" , position + "%" ); |
24 |
if (elementCount === 1) |
28 |
function slideRight() { |
29 |
$( "div" ).each( function (value) { |
30 |
$( this ).addClass( "zoomout" ); |
31 |
var position = parseInt($( this )[0].style.left) + 100; |
36 |
$( this ).css( "left" , position + "%" ); |
37 |
timer = setTimeout(removeZoom, 1000); |
40 |
console.log(firstPos); |
42 |
if (firstPos !== ((elementCount - 1) * 100)) { |
44 |
$( "#previous" ).show(); |
46 |
$( "#next" ).hide(); |
source : jqueryscript.net