This time I will share jQuery Plugin and tutorial about Fullscreen Split Card Slider With Parallax Effect – ContentSlider, hope it will help you in programming stack.
An awesome, responsive, vertical, fullscreen split slider which enables the user to slide through contents with a parallax scrolling effect.
Based on jQuery, CSS3 and GSAP’s TweenMax.js library.
How to use it:
1. Add slides to the card slider as follows:
01 |
<div class="slide active"> |
03 |
<div class="card-img" id="img01"></div> |
04 |
<div class="card-content"> |
05 |
<p class="card-theme">According to The Quote Verifier: Who Said What, Where, And When (2006)</p> |
06 |
<h2 class="card-header">"If you can't stand the heat, get out of the kitchen."</h2> |
07 |
<p class="card-para">by Eugene Purcell</p> |
08 |
<a href="" class="card-link">Read</a> |
15 |
<div class="card-img" id="img02"></div> |
16 |
<div class="card-content"> |
17 |
<p class="card-theme">As quoted in Curiosities in proverbs, (1916) pg. 130</p> |
18 |
<h2 class="card-header">"Never leave that till tomorrow which you can do today."</h2> |
19 |
<p class="card-para">by Benjamin Franklin</p> |
20 |
<a href="" class="card-link">Read</a> |
27 |
<div class="card-img" id="img03"></div> |
28 |
<div class="card-content"> |
29 |
<p class="card-theme">As quoted in How to Write a Book Proposal, (2011) pg. 19</p> |
30 |
<h2 class="card-header">"Nothing is particularly hard if you divide it into small jobs."</h2> |
31 |
<p class="card-para">by Henry Ford</p> |
32 |
<a href="" class="card-link">Read</a> |
2. Create prev/next buttons to slide through the slides.
2 |
<button class="pn-btn" id="prev"></button> |
3 |
<button class="pn-btn" id="next"></button> |
3. The main CSS for the card slider.
03 |
justify-content: center; |
06 |
flex-direction: column; |
19 |
background-position: center; |
22 |
background-size: cover; |
23 |
background-repeat: no-repeat; |
28 |
box-sizing: border-box; |
36 |
text-transform: uppercase; |
45 |
text-transform: capitalize; |
source : jquery.net
