Fullscreen jQuery Image Slider with CSS3 Animations
File Size: | 328 KB |
---|---|
Views Total: | 7492 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
DP Tile Slider is a simple, responsive, fullscreen image slider plugin which enables you to navigate between images with cool CSS3 powered animations.
Available animations:
- scale
- translate
- split
- split2
- fall
- rotate3D
- rotate3D2
- rotate
- random
How to use it:
1. Wrap your images into DIV slides with the data-anim
attribute specifying the CSS3 animations you want to use.
<div id="dp-slider"> <div data-anim="random"> <img src="1.jpg" alt="Image"> </div> <div data-anim="split"> <img src="2.jpg" alt="Image"> </div> <div data-anim="rotate3D"> <img src="3.jpg" alt="Image"> </div> </div>
2. The basic CSS styles for the image slider.
html, body { height: 100%; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dp-tile-slider { width: 100%; height: 100%; position: relative; overflow: hidden; } .dp-tile-slider .dp-slide { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; overflow: hidden; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .dp-tile-slider .dp-slide.active { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.2s; -moz-transition: -moz-transform 1.2s; transition: transform 1.2s; z-index: 2; } .dp-tile-slider .dp-slide.active::after { clear: both; content: ""; display: table; } .dp-tile-slider .dp-slide.animated { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); z-index: 3; } .dp-tile-slider .dp-slide.scale-anim .dp-tile .dp-img { -webkit-animation: dp-scale-down 1.2s; -moz-animation: dp-scale-down 1.2s; animation: dp-scale-down 1.2s; } .dp-tile-slider .dp-slide.translate-clockwise-anim .dp-tile:nth-child(1) .dp-img { -webkit-animation: dp-to-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.translate-clockwise-anim .dp-tile:nth-child(2) .dp-img { -webkit-animation: dp-to-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.translate-clockwise-anim .dp-tile:nth-child(3) .dp-img { -webkit-animation: dp-to-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.translate-clockwise-anim .dp-tile:nth-child(4) .dp-img { -webkit-animation: dp-to-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim .dp-tile:nth-child(1) .dp-img { -webkit-animation: dp-to-top-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-top-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-top-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim .dp-tile:nth-child(2) .dp-img { -webkit-animation: dp-to-top-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-top-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-top-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim .dp-tile:nth-child(3) .dp-img { -webkit-animation: dp-to-bottom-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-bottom-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-bottom-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim .dp-tile:nth-child(4) .dp-img { -webkit-animation: dp-to-bottom-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-bottom-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-bottom-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim-sync .dp-tile:nth-child(1) .dp-img { -webkit-animation: dp-to-top-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-top-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-top-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.split-anim-sync .dp-tile:nth-child(2) .dp-img { -webkit-animation: dp-to-top-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-top-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-top-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .dp-tile-slider .dp-slide.split-anim-sync .dp-tile:nth-child(3) .dp-img { -webkit-animation: dp-to-bottom-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-bottom-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-bottom-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s; } .dp-tile-slider .dp-slide.split-anim-sync .dp-tile:nth-child(4) .dp-img { -webkit-animation: dp-to-bottom-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-to-bottom-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-to-bottom-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } .dp-tile-slider .dp-slide.fall-anim .dp-tile:nth-child(1) .dp-img { -webkit-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.fall-anim .dp-tile:nth-child(2) .dp-img { -webkit-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .dp-tile-slider .dp-slide.fall-anim .dp-tile:nth-child(3) .dp-img { -webkit-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } .dp-tile-slider .dp-slide.fall-anim .dp-tile:nth-child(4) .dp-img { -webkit-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-fall 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s; } .dp-tile-slider .dp-slide.rotate3D-anim .dp-tile { -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dp-tile-slider .dp-slide.rotate3D-anim .dp-tile:nth-child(1) .dp-img { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-animation: dp-rotate3d-Y-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-Y-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-Y-left 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.rotate3D-anim .dp-tile:nth-child(2) .dp-img { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-animation: dp-rotate3d-X-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-X-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-X-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.rotate3D-anim .dp-tile:nth-child(3) .dp-img { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: dp-rotate3d-X-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-X-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-X-bottom 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.rotate3D-anim .dp-tile:nth-child(4) .dp-img { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: dp-rotate3d-Y-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-Y-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-Y-right 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.rotate3D-anim-sync .dp-tile { -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dp-tile-slider .dp-slide.rotate3D-anim-sync .dp-tile:nth-child(1) .dp-img { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-animation: dp-rotate3d-Y-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-Y-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-Y-left 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide.rotate3D-anim-sync .dp-tile:nth-child(2) .dp-img { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-animation: dp-rotate3d-X-top 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-X-top 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-X-top 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .dp-tile-slider .dp-slide.rotate3D-anim-sync .dp-tile:nth-child(3) .dp-img { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: dp-rotate3d-X-bottom 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-X-bottom 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-X-bottom 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s; } .dp-tile-slider .dp-slide.rotate3D-anim-sync .dp-tile:nth-child(4) .dp-img { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: dp-rotate3d-Y-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate3d-Y-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate3d-Y-right 1.2s forwards cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } .dp-tile-slider .dp-slide.rotate-anim .dp-tile .dp-img { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-animation: dp-rotate 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation: dp-rotate 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); animation: dp-rotate 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .dp-tile-slider .dp-slide .dp-tile { height: 50%; width: 50%; position: absolute; overflow: hidden; } .dp-tile-slider .dp-slide .dp-tile:nth-child(1) { left: 0; top: 0; } .dp-tile-slider .dp-slide .dp-tile:nth-child(1) img { left: 0; } .dp-tile-slider .dp-slide .dp-tile:nth-child(2) { left: 50%; top: 0; } .dp-tile-slider .dp-slide .dp-tile:nth-child(2) img { left: -100%; } .dp-tile-slider .dp-slide .dp-tile:nth-child(3) { top: 50%; left: 0; } .dp-tile-slider .dp-slide .dp-tile:nth-child(3) img { top: -100%; left: 0; } .dp-tile-slider .dp-slide .dp-tile:nth-child(4) { top: 50%; left: 50%; } .dp-tile-slider .dp-slide .dp-tile:nth-child(4) img { left: -100%; top: -100%; } .dp-tile-slider .dp-slide .dp-img { height: 100%; width: 100%; position: absolute; overflow: hidden; } .dp-tile-slider .dp-slide .dp-img img { height: 200%; max-width: none; width: auto; display: block; position: absolute; } .dp-tile-slider .dp-slide .dp-img img.is-landscape { width: 200%; max-height: none; height: auto; } .dp-tile-slider .next, .dp-tile-slider .prev { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); width: 40px; height: 40px; margin: 0; z-index: 3; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-top-right-radius: 50%; } .dp-tile-slider .next span::after, .dp-tile-slider .next span::before, .dp-tile-slider .prev span::after, .dp-tile-slider .prev span::before { content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 2px; height: 15px; background-color: #FFF; } .dp-tile-slider .next { right: 20px; } .dp-tile-slider .next span::before { -webkit-transform: translateY(-12px) rotate(-45deg); -moz-transform: translateY(-12px) rotate(-45deg); -ms-transform: translateY(-12px) rotate(-45deg); -o-transform: translateY(-12px) rotate(-45deg); transform: translateY(-12px) rotate(-45deg); } .dp-tile-slider .next span::after { -webkit-transform: translateY(-2px) rotate(45deg); -moz-transform: translateY(-2px) rotate(45deg); -ms-transform: translateY(-2px) rotate(45deg); -o-transform: translateY(-2px) rotate(45deg); transform: translateY(-2px) rotate(45deg); } .dp-tile-slider .prev { left: 20px; } .dp-tile-slider .prev span::after { -webkit-transform: translateY(-12px) rotate(45deg); -moz-transform: translateY(-12px) rotate(45deg); -ms-transform: translateY(-12px) rotate(45deg); -o-transform: translateY(-12px) rotate(45deg); transform: translateY(-12px) rotate(45deg); } .dp-tile-slider .prev span::before { -webkit-transform: translateY(-2px) rotate(-45deg); -moz-transform: translateY(-2px) rotate(-45deg); -ms-transform: translateY(-2px) rotate(-45deg); -o-transform: translateY(-2px) rotate(-45deg); transform: translateY(-2px) rotate(-45deg); } .dp-tile-slider .dp-pager { margin: 0 auto; margin-top: 20%; list-style-type: none; position: absolute; bottom: 10%; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 4; } .dp-tile-slider .dp-pager li { display: inline-block; margin: 0 10px 0 0; } .dp-tile-slider .dp-pager li:last-child { margin-right: 0; } .dp-tile-slider .dp-pager li a { width: 10px; height: 10px; border: 2px solid rgba(0, 0, 0, 0.5); background-color: rgba(255, 255, 255, 0.5); display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-top-right-radius: 50%; -webkit-transition: background-color 0.5s, border-color 0.5s; -moz-transition: background-color 0.5s, border-color 0.5s; transition: background-color 0.5s, border-color 0.5s; } .dp-tile-slider .dp-pager li a.active { background-color: #000; border-color: #fff; -webkit-transition: background-color 0.5s, border-color 0.5s; -moz-transition: background-color 0.5s, border-color 0.5s; transition: background-color 0.5s, border-color 0.5s; }
3. Create CSS3 animations for the image slider using CSS3 transitions, transforms and @keyframes.
@-webkit-keyframes dp-scale-down { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); } } @-moz-keyframes dp-scale-down { 0% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(0); } } @keyframes dp-scale-down { 0% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } } @-webkit-keyframes dp-to-right { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(101%); } } @-moz-keyframes dp-to-right { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(101%); } } @keyframes dp-to-right { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(101%); -moz-transform: translateX(101%); -ms-transform: translateX(101%); -o-transform: translateX(101%); transform: translateX(101%); } } @-webkit-keyframes dp-to-bottom { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(101%); } } @-moz-keyframes dp-to-bottom { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(101%); } } @keyframes dp-to-bottom { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(101%); -moz-transform: translateY(101%); -ms-transform: translateY(101%); -o-transform: translateY(101%); transform: translateY(101%); } } @-webkit-keyframes dp-to-left { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%); } } @-moz-keyframes dp-to-left { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-101%); } } @keyframes dp-to-left { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%); -moz-transform: translateX(-101%); -ms-transform: translateX(-101%); -o-transform: translateX(-101%); transform: translateX(-101%); } } @-webkit-keyframes dp-to-top { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-101%); } } @-moz-keyframes dp-to-top { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-101%); } } @keyframes dp-to-top { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-101%); -moz-transform: translateY(-101%); -ms-transform: translateY(-101%); -o-transform: translateY(-101%); transform: translateY(-101%); } } @-webkit-keyframes dp-rotate { 0% { opacity: 1; -webkit-transform: rotate(0); } 100% { opacity: 0; -webkit-transform: rotate(46deg); } } @-moz-keyframes dp-rotate { 0% { opacity: 1; -moz-transform: rotate(0); } 100% { opacity: 0; -moz-transform: rotate(46deg); } } @keyframes dp-rotate { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { opacity: 0; -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); -ms-transform: rotate(46deg); -o-transform: rotate(46deg); transform: rotate(46deg); } } @-webkit-keyframes dp-to-top-left { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%) translateY(-101%); } } @-moz-keyframes dp-to-top-left { 0% { opacity: 1; -moz-transform: translateX(0) translateY(0); } 100% { opacity: 0; -moz-transform: translateX(-101%) translateY(-101%); } } @keyframes dp-to-top-left { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%) translateY(-101%); -moz-transform: translateX(-101%) translateY(-101%); -ms-transform: translateX(-101%) translateY(-101%); -o-transform: translateX(-101%) translateY(-101%); transform: translateX(-101%) translateY(-101%); } } @-webkit-keyframes dp-to-top-right { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(101%) translateY(-101%); } } @-moz-keyframes dp-to-top-right { 0% { opacity: 1; -moz-transform: translateX(0) translateY(0); } 100% { opacity: 0; -moz-transform: translateX(101%) translateY(-101%); } } @keyframes dp-to-top-right { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(101%) translateY(-101%); -moz-transform: translateX(101%) translateY(-101%); -ms-transform: translateX(101%) translateY(-101%); -o-transform: translateX(101%) translateY(-101%); transform: translateX(101%) translateY(-101%); } } @-webkit-keyframes dp-to-bottom-left { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%) translateY(101%); } } @-moz-keyframes dp-to-bottom-left { 0% { opacity: 1; -moz-transform: translateX(0) translateY(0); } 100% { opacity: 0; -moz-transform: translateX(-101%) translateY(101%); } } @keyframes dp-to-bottom-left { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(-101%) translateY(101%); -moz-transform: translateX(-101%) translateY(101%); -ms-transform: translateX(-101%) translateY(101%); -o-transform: translateX(-101%) translateY(101%); transform: translateX(-101%) translateY(101%); } } @-webkit-keyframes dp-to-bottom-right { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(101%) translateY(101%); } } @-moz-keyframes dp-to-bottom-right { 0% { opacity: 1; -moz-transform: translateX(0) translateY(0); } 100% { opacity: 0; -moz-transform: translateX(101%) translateY(101%); } } @keyframes dp-to-bottom-right { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 100% { opacity: 0; -webkit-transform: translateX(101%) translateY(101%); -moz-transform: translateX(101%) translateY(101%); -ms-transform: translateX(101%) translateY(101%); -o-transform: translateX(101%) translateY(101%); transform: translateX(101%) translateY(101%); } } @-webkit-keyframes dp-rotate3d-Y-left { 0% { opacity: 1; -webkit-transform: rotateY(0); } 100% { opacity: 0; -webkit-transform: rotateY(-180deg); } } @-moz-keyframes dp-rotate3d-Y-left { 0% { opacity: 1; -moz-transform: rotateY(0); } 100% { opacity: 0; -moz-transform: rotateY(-180deg); } } @keyframes dp-rotate3d-Y-left { 0% { opacity: 1; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } 100% { opacity: 0; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @-webkit-keyframes dp-rotate3d-X-top { 0% { opacity: 1; -webkit-transform: rotateX(0); } 100% { opacity: 0; -webkit-transform: rotateX(180deg); } } @-moz-keyframes dp-rotate3d-X-top { 0% { opacity: 1; -moz-transform: rotateX(0); } 100% { opacity: 0; -moz-transform: rotateX(180deg); } } @keyframes dp-rotate3d-X-top { 0% { opacity: 1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } 100% { opacity: 0; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } } @-webkit-keyframes dp-rotate3d-X-bottom { 0% { opacity: 1; -webkit-transform: rotateX(0); } 100% { opacity: 0; -webkit-transform: rotateX(-180deg); } } @-moz-keyframes dp-rotate3d-X-bottom { 0% { opacity: 1; -moz-transform: rotateX(0); } 100% { opacity: 0; -moz-transform: rotateX(-180deg); } } @keyframes dp-rotate3d-X-bottom { 0% { opacity: 1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } 100% { opacity: 0; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-webkit-keyframes dp-rotate3d-Y-right { 0% { opacity: 1; -webkit-transform: rotateY(0); } 100% { opacity: 0; -webkit-transform: rotateY(180deg); } } @-moz-keyframes dp-rotate3d-Y-right { 0% { opacity: 1; -moz-transform: rotateY(0); } 100% { opacity: 0; -moz-transform: rotateY(180deg); } } @keyframes dp-rotate3d-Y-right { 0% { opacity: 1; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } 100% { opacity: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes dp-fall { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes dp-fall { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes dp-fall { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } }
4. Load jQuery library together with jQuery DP Tile Slider plugin and modernizr.min.js in your web page.
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/dpTileSlider.js"></script>
5. Initialize the image slider with default options.
$( '#dp-slider' ).dpTileSlider();
6. Default options and callback functions.
$( '#dp-slider' ).dpTileSlider({ /** * Time delay before start animation on each slide. * This support you to setup your additional content before animation started */ timeout: 50, // If set to true the slider will auto play auto: 'false', // Toggle on/off the slider navigation and/or pager nav: 'true', pager: 'true', // Callback function fire when slider first start start: function () {}, // Callback function fire before/after each slide start to animate animBefore: function () {}, animAfter: function () {} });
Change log:
2015-01-20
- hide controls when there is only one slide
- Active controls when slider are loaded
This awesome jQuery plugin is developed by ddanh85. For more Advanced Usages, please check the demo page or visit the official website.