How we can create a Cover Flow items slider using HTML CSS JS? Solution: See this JavaScript CoverFlow Slider Design With CSS, With Navigation Buttons.
Previously I have shared some slider programs, but this is a cover flow type slider with images. Basically, Cover Flow is an animated, three-dimensional graphical user interface element. Its uses for visually flipping through snapshots of documents, website bookmarks, album artwork, etc. It was first introduced by Apple on their MacBook computers. But we can create that kind of design for websites using basic HTML CSS JavaScript.
Today you will learn to create Cover Flow Slide Items with navigation buttons. Basically, there are 7 images, 1 image in middle and front-facing and the other 3 images on the left side and 3 other on the right side. At the bottom of the image box, there is are two texts “Left” and “Right” for navigations. You can change or navigate the images by pressing those buttons.
So, Today I am sharing JavaScript CoverFlow Slider Design With CSS. There I have used CSS for styling and JavaScript for functioning. The program is without jQuery or any other dedicated JS library. This a simple program, which can help beginners to understand JavaScript better. You can use this program to show your portfolio, or also can use any movie of photography sites.
If you are thinking now how this slider actually is, then see the preview given below.
Preview Of Cover Flow Sliding Items with Navigation Buttons
See this video preview to getting an idea of how this unique slider looks like.
Live Demo
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- 3D Perspective Image Slider
- Fancybox Product Slider
- Smart Fixed Navigation
- Expanding Button Hover Effect
JavaScript CoverFlow Slider Design With CSS Source code
Before sharing source code, let’s talk about it. First I have created a div with ID name “coverflow” and placed 7 sections inside it. I have placed the section tag for images, there I have used HTML Data-* attribute to store and call the images. Also, Create a nav and placed two hyperlink tags inside it for creating the left/right navigations.
Now using CSS, I have placed all the elements in the right place as you can see in the preview. With CSS I gave all the basic values to the elements like size, position, margin, padding, etc. To creating the coverflow effect I have used CSS transform-style: preserve-3d; command. And for creating the animation effect used CSS transition: command.
JavaScript handling here the main feature of the program. There I have used JS if{} else{} statements to creating the functions, and pass values data through the data attribute. I have fetched the element using ocument.querySelectorAll command. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>JS CoverFlow Slider | Webdevtrick.com</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div id="coverflow"> <section data-cover="https://webdevtrick.com/wp-content/uploads/gadget.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/hardware.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/design.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/cons.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/auto.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/programming.jpg" ></section> <section data-cover="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg" ></section> </div> <nav id="controls"> <a id="prev">LEFT</a> & <a id="next">RIGHT</a> </nav> <script src="script.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ html, body { position: relative; padding: 0; margin: 0; overflow: hidden; background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black)); background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); height: 100%; width: 100%; text-align: center; font-family: sans-serif; } #coverflow { height: 100%; width: 100%; -webkit-perspective: 600px; } #coverflow section { display: position; position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin-left: -90px; margin-top: -90px; background-color: white; background-size: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 300ms ease-in; -moz-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in; -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(white)); } #controls { position: absolute; width: 100%; bottom: 10%; z-index: 1; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; color: #999; font-size: 18px; } #controls a { color: white; cursor: pointer; } #controls a:hover { color: 66FFFF; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
// Code By Webdevtrick ( https://webdevtrick.com ) (function() { var _index = 0, _coverflow = null, _prevLink = null, _nextLink = null, _albums = [], _transformName = Modernizr.prefixed('transform'), OFFSET = 70; ROTATION = 45; BASE_ZINDEX = 10; MAX_ZINDEX = 42; function get( selector ) { return document.querySelector( selector ); }; function render() { for( var i = 0; i < _albums.length; i++ ) { if( i < _index ) { _albums[i].style[_transformName] = "translateX( -"+ ( OFFSET * ( _index - i ) ) +"% ) rotateY( "+ ROTATION +"deg )"; _albums[i].style.zIndex = BASE_ZINDEX + i; } if( i === _index ) { _albums[i].style[_transformName] = "rotateY( 0deg ) translateZ( 140px )"; _albums[i].style.zIndex = MAX_ZINDEX; } if( i > _index ) { _albums[i].style[_transformName] = "translateX( "+ ( OFFSET * ( i - _index ) ) +"% ) rotateY( -"+ ROTATION +"deg )"; _albums[i].style.zIndex = BASE_ZINDEX + ( _albums.length - i ); } } }; function flowRight() { if( _index ) { _index--; render(); } }; function flowLeft() { if( _albums.length > ( _index + 1) ) { _index++; render(); } }; function keyDown( event ) { switch( event.keyCode ) { case 37: flowRight(); break; case 39: flowLeft(); break; } }; function registerEvents() { _prevLink.addEventListener('click', flowRight, false); _nextLink.addEventListener('click', flowLeft, false); document.addEventListener('keydown', keyDown, false); }; function init() { _albums = Array.prototype.slice.call( document.querySelectorAll( 'section' )); _index = Math.floor( _albums.length / 2 ); _coverflow = get('#coverflow'); _prevLink = get('#prev'); _nextLink = get('#next'); for( var i = 0; i < _albums.length; i++ ) { var url = _albums[i].getAttribute("data-cover"); _albums[i].style.backgroundImage = "url("+ url +")"; } registerEvents(); render(); }; init(); }()); |
That’s It. Now you have successfully created JavaScript CoverFlow Slider Design With CSS, With Navigation Buttons. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
my page is called image.css so even adter i edited the java and css files it still doesnt work. can you assist me please. my all my files are called “image” eg image.html, image.js, image.css