jQuery Coverflow widget

In this article, we understand the jquery coverflow widget with the help of numerous examples. Jquery Coverflow uses the concepts of selected the "inner" and "outer" covers. This is exactly one selected cover the one in the middle that is visible as the current cover. The inner cover are the ones closest to the selected cover on either side. Outer covers are the ones at the very edges of the visible field.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Coverflow Widget </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html {
    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;
}
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;
}
h1 {
  color: white;
  font-size: 30px;
}
h2 {
  color: white;
}
#carousel {
  height: 280px;
  width: 960px;
  background-color: #fff;
  position: relative;
  margin-bottom: 0.5em;
}

#carousel .shadow {
  -moz-box-shadow: 0px 16px 26px #888888;
  -webkit-box-shadow: 0px 16px 26px #888888;
  box-shadow: 0px 16px 26px #888888;
}
#carousel .slide {
  position: absolute;
  overflow: hidden;
}
#carousel .slide a:hover img {
  margin-top: 2px;
}
#carousel .slide img {
  width:  100%;
  height: 100%;
}
#carousel .slide p {
  position: relative;
  padding: 0;
  margin:  0;
  height:  100%
}
#carousel .slide span {
  background-color: #000;
  color: #fff;
  font-size: 0.8em;
  font-family: sans-serif;
  position: absolute;
  padding: 5px;
  width: 100%;
  bottom: 0;
  z-index: 99;
}
#carousel .navigate-left {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 220px;
}
#carousel .navigate-right {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 484px;
}
</style>
	</head>
	<body>
<h1> Example </h1>
    <h2> jquery coverflow widget </h2>
<div id = "carousel">
<div class = "slide">
<p> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=432">
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"></a>
<span> Curabitur nec dapibus neque. </span></p>
</div>
<div class = "navigate-left"> <img src = "https://images.vexels.com/media/users/3.png" width = "35px"> </div>
<div class = "navigate-right"> <img src = "https://images.vexels.com/media/users/3.png" width = "35px"> 
</div>
</div>
<script type = "text/javascript">
$(document).ready(function() {
			var carousel = $("#carousel").slidingCarousel({
				squeeze: 100
			});
});
(function($) {
	$.fn.slidingCarousel = function (options) {
		options = $.extend({}, $.fn.slidingCarousel.defaults, options || {});
		var pluginData = {
			container: $(this),
			sinus:   [0],
			images:  null,
			mIndex:  null
		};
		var preload = function(callback) {
			var images = pluginData.container.find('.slide img'),
				total  = images.length,
				shift  = total % 2,
				middle = total < 3 ? total : ~~(total / 2) + shift,
				result = [],
				loaded = 0;
			images.each(function (index, element) {
				var img = new Image();
				$(img).bind('load error', function () {
					loaded++;
					result[(index+middle-shift) % total] = element;
					element.ratio = this.width / this.height;
					element.origH = this.height;
					element.idx   = index;
					if (loaded == total) {
				pluginData.mIndex = middle;
						pluginData.sinsum = 0;
				pluginData.images = result.reverse();
						for (var n=1, freq=0; n<total; n++) {
							pluginData.sinus[n] = (n<=middle) ? Math.sin(freq+=(1.6/middle)) : pluginData.sinus[total-n];
                     if (n < middle) 
pluginData.sinsum += pluginData.sinus[n]*options.squeeze; }						callback(pluginData.images);
					}
				});
				img.src = element.src;
			});
		};
		var setupCarousel = function() {
			preload(doLayout);
			setupEvents();
		};
		var setupEvents = function() {
			pluginData.container
				.find ('.slide p > a').click(function(e) {
					var idx = $(this).find('img')[0].idx,
						arr = pluginData.images;
					while (arr[pluginData.mIndex-1].idx != idx ) {
						arr.push(arr.shift()); }
					doLayout(arr, true);
				})
				.end()
				.find('.navigate-right').click(function() {
					var images = pluginData.images;
					images.splice(0,0,images.pop());
					doLayout(images, true);
				})
				.end()
			.find('.navigate-left').click(function() {
					var images = pluginData.images;
					images.push(images.shift());
					doLayout(images, true);
				});
		};
		var doLayout = function(images, animate) {
			var mid  = pluginData.mIndex,
				sin  = pluginData.sinus,
				posx = 0,
				diff = 0,
				width  = images[mid-1].origH * images[mid-1].ratio,  
				middle = (pluginData.container.width() - width)/2,   
				offset = middle - pluginData.sinsum,                 
				height = images[mid-1].origH, top, left, idx, j=1;
	pluginData.container.find('span').hide().css('opacity', 0);
			$.each(images, function(i, img) {
				idx = Math.abs(i+1-mid);
				top = idx * 15;
				img.cWidth = (height-(top*2)) * img.ratio;
				diff = sin[i] * options.squeeze;
				left = posx += (i < mid) ? diff : images[i-1].cWidth + diff - img.cWidth;
				var el = $(img).closest('.slide'),
					fn = function() {
						if (i === mid-1) {
							el.find('span').show().animate({opacity: 0.7});
						}
					};
				if (animate) {
					el.animate({
						height   : height - (top*2),
						zIndex   : mid-idx,
						top      : top,
						left     : left+offset,
						opacity  : i==mid-1 ? 1 : sin[j++]*0.8
					}, options.animate, fn);
				}
				else
				{
					el.css({
						zIndex   : mid-idx,
						height   : height - (top*2),
						top      : top,
						left     : left+offset,
						opacity  : 0
					}).show().animate({opacity: i==mid-1 ? 1 : sin[j++]*0.8 }, fn);
					if (options.shadow) {
						el.addClass('shadow');						
					}
				}
			});
			if (!animate) {
				pluginData.container
					.find('.navigate-left').css('left', middle+50)
					.end()
					.find('.navigate-right').css('left', middle+width-75);
			}
		};
		this.initialize = function () {
			setupCarousel();
		};
		return this.initialize();
	};
	$.fn.slidingCarousel.defaults = {
		shadow: true,
		squeeze: 124,
		animate: 250
	};
})(jQuery);
</body>
</html>

Explanation:

In the above example, we created a jquery coverflow widget.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Coverflow Widget </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html {
    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;
}
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;
}
h1 {
  color: white;
  font-size: 30px;
}
h2 {
  color: white;
}
#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;
}
</style>
<body>
<h1> Example </h1>
    <h2> jquery coverflow widget </h2>
<div id = "coverflow">
     <section data-cover="http://a2.mzstatic.com/us/r1000/060/Features/1c/df/c3/dj.sahccbiy.170x170-75.jpg" ></section>
      <section data-cover="http://a3.mzstatic.com/us/r1000/102/Music/95/45/3f/mzi.xqnmexwi.170x170-75.jpg" ></section>
      <section data-cover="http://a1.mzstatic.com/us/r1000/024/Music/81/54/3b/mzi.cceuzwlz.170x170-75.jpg" ></section>
      <section data-cover="http://a5.mzstatic.com/us/r1000/103/Music/2f/08/9e/mzi.gxjxokia.170x170-75.jpg" ></section>
  </div>
  <nav id="controls">
      <a id="prev">Left</a> & <a id="next">Right</a>  
  </nav>
<script>
(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();
}());
</script>  
</body>
</html>

Explanation:

In the above example, we created a jquery coverflow widget.

Output:

Following is the output of this example.