<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-if u add jquery.min.js in ur js folder it well work like a 3d carousel slider, if u don't have dat file downlode from google ---->
<script src="js/jquery.min.js"></script>
<div class="banner">
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#">
<img src="http://www.goodlightscraps.com/content/good-day/good-day-7.jpg">
</a>
<a href="#">
<img src="http://aurora.edu.au/wp-content/uploads/2015/05/good-news.jpg">
</a>
<a href="#">
<img src="http://www.wisetiger.co.uk/blog/wp-content/uploads/2012/08/Good-Web-Design1.jpg">
</a>
<a href="#">
<img src="http://blog.askiitians.com/wp-content/uploads/2014/05/ww.gif">
</a>
<a href="#" >
<img src="http://www.powerformula.net/wp-content/uploads/2014/09/iStock_000047145422Small.jpg">
</a>
</div>
<ol class="button" id="lightButton">
<li index="0">
<li index="1">
<li index="2">
<li index="3">
<li index="4">
</ol>
<nav>
<span class="dg-prev"></span>
<span class="dg-next"></span>
</nav>
</section>
</div>
.banner {
position: relative;
height: 180px;
padding: 11px 0 16px;
margin: 0 auto;
text-align: center;
}
.dg-container {
position: relative;
width: 100%;
height: 350px;
}
.dg-wrapper {
width: 320px;
height: 250px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.dg-wrapper a {
width: 100%;
height: 250px;
display: block;
position: absolute;
left: 0;
top: 0;
}
.dg-wrapper a:first-child {
z-index: 2;
}
.dg-wrapper a img {
display: block;
box-shadow: 0px 25px 55px 10px rgba(0, 0, 0, 0.5);
border-radius: 4px;
width: 100%;
height:350px;
background: #fff;
}
.dg-wrapper a.dg-transition {
transition: all 0.5s ease-in-out;
}
.dg-wrapper a.dg-transition-fast {
transition: all 0.2s ease-in-out;
}
.dg-container nav {
display: none;
}
.dg-container nav span:hover {
opacity: 1;
}
.dg-container nav span.dg-next {
background-position: top right;
margin-left: 10px;
}
.dg-container #lightButton2 {
bottom: 20px;
}
.dg-container .button {
position: relative;
z-index: 5;
}
.dg-container .button li {
cursor: pointer;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 5px;
background: rgba(255, 255, 255, 0.30);
border: 1px solid rgba(0, 0, 0, 0.20);
}
.dg-container .button .light {
background: #01BDFF;
}
$(function () {
$('#dg-container').carrousel({
current: 0,
autoplay: true,
interval: 3000
});
});
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,f;for(var a in y){if(e=[],n=y[a],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],f=i.split("."),1===f.length?Modernizr[f[0]]=o:(!Modernizr[f[0]]||Modernizr[f[0]]instanceof Boolean||(Modernizr[f[0]]=new Boolean(Modernizr[f[0]])),Modernizr[f[0]][f[1]]=o),C.push((o?"":"no-")+f.join("-"))}}function s(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):_?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function i(){var e=n.body;return e||(e=s(_?"svg":"body"),e.fake=!0),e}function f(e,t,r,o){var f,a,u,l,p="modernizr",d=s("div"),c=i();if(parseInt(r,10))for(;r--;)u=s("div"),u.id=o?o[r]:p+(r+1),d.appendChild(u);return f=s("style"),f.type="text/css",f.id="s"+p,(c.fake?c:d).appendChild(f),c.appendChild(d),f.styleSheet?f.styleSheet.cssText=e:f.appendChild(n.createTextNode(e)),d.id=p,c.fake&&(c.style.background="",c.style.overflow="hidden",l=S.style.overflow,S.style.overflow="hidden",S.appendChild(c)),a=t(d,e),c.fake?(c.parentNode.removeChild(c),S.style.overflow=l,S.offsetHeight):d.parentNode.removeChild(d),!!a}function a(e,n){return!!~(""+e).indexOf(n)}function u(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function l(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function p(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(l(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];o--;)s.push("("+l(n[o])+":"+r+")");return s=s.join(" or "),f("@supports ("+s+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function d(e,n,o,i){function f(){d&&(delete k.style,delete k.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var l=p(e,o);if(!r(l,"undefined"))return l}for(var d,c,m,v,h,y=["modernizr","tspan"];!k.style;)d=!0,k.modElem=s(y.shift()),k.style=k.modElem.style;for(m=e.length,c=0;m>c;c++)if(v=e[c],h=k.style[v],a(v,"-")&&(v=u(v)),k.style[v]!==t){if(i||r(o,"undefined"))return f(),"pfx"==n?v:!0;try{k.style[v]=o}catch(g){}if(k.style[v]!=h)return f(),"pfx"==n?v:!0}return f(),!1}function c(e,n){return function(){return e.apply(n,arguments)}}function m(e,n,t){var o;for(var s in e)if(e[s]in n)return t===!1?e[s]:(o=n[e[s]],r(o,"function")?c(o,t||n):o);return!1}function v(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),f=(e+" "+P.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?d(f,n,o,s):(f=(e+" "+T.join(i+" ")+i).split(" "),m(f,n,t))}function h(e,n,r){return v(e,t,t,n,r)}var y=[],g={_version:"3.0.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){y.push({name:e,fn:n,options:t})},addAsyncTest:function(e){y.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=g,Modernizr=new Modernizr;var C=[],S=n.documentElement,w="CSS"in e&&"supports"in e.CSS,x="supportsCSS"in e;Modernizr.addTest("supports",w||x);var _="svg"===S.nodeName.toLowerCase(),b=g.testStyles=f,z="Moz O ms Webkit",P=g._config.usePrefixes?z.split(" "):[];g._cssomPrefixes=P;var T=g._config.usePrefixes?z.toLowerCase().split(" "):[];g._domPrefixes=T;var E={elem:s("modernizr")};Modernizr._q.push(function(){delete E.elem});var k={style:E.elem.style};Modernizr._q.unshift(function(){delete k.style}),g.testAllProps=v,g.testAllProps=h,Modernizr.addTest("csstransforms3d",function(){var e=!!h("perspective","1px",!0),n=Modernizr._config.usePrefixes;if(e&&(!n||"webkitPerspective"in S.style)){var t;Modernizr.supports?t="@supports (perspective: 1px)":(t="@media (transform-3d)",n&&(t+=",(-webkit-transform-3d)")),t+="{#modernizr{left:9px;position:absolute;height:5px;margin:0;padding:0;border:0}}",b(t,function(n){e=9===n.offsetLeft&&5===n.offsetHeight})}return e}),Modernizr.addTest("csstransforms",function(){return-1===navigator.userAgent.indexOf("Android 2.")&&h("transform","scale(1)",!0)}),o(),delete g.addTest,delete g.addAsyncTest;for(var A=0;A<Modernizr._q.length;A++)Modernizr._q[A]();e.Modernizr=Modernizr}(window,document);
(function ($) {
$.carrousel = function (options, element) {
this.$el = $(element);
this._init(options);
};
$.carrousel.defaults = {
current: 0, // index of current item
autoplay: true,// slideshow on / off
interval: 3000 // time between transitions
};
$.carrousel.prototype = {
// 初始化
_init: function (options) {
this.options = $.extend(true, {}, $.carrousel.defaults, options);
this.support3d = Modernizr.csstransforms3d;
this.support2d = Modernizr.csstransforms;
this.$wrapper = this.$el.find('.dg-wrapper');
this.$items = this.$wrapper.children();
this.itemsCount = this.$items.length;
this.$nav = this.$el.find('nav');
this.$navPrev = this.$nav.find('.dg-prev');
this.$navNext = this.$nav.find('.dg-next');
this.button = $('#lightButton li');
this.box = $('.banner');
this.imgWidth = $('.banner .dg-wrapper img').width();
this.indexB = 0;
this.CSSX = 0;
this.CSSXout = 0;
this.button[0].classList.add('light');
this.current = this.options.current;
this.isAnim = false;
this.$items.css({
'opacity': 1
});
this._updateWidth();
this._layout();
// load the events
this._loadEvents();
// slideshow
if (this.options.autoplay) {
this._startSlideshow();
}
var _self = this;
for (var i = 0, len = this.button.length; i < len; i++) { // 点击小圆点
this.button[i].addEventListener('click', function() {
var toIndex = parseInt(this.getAttribute('index'));
var toMove = toIndex - _self.indexB;
switch (toMove) {
case 0:
break;
case 1:
_self._navigate('next', 'dg-transition');
break;
case -1:
_self._navigate('prev', 'dg-transition');
break;
default:
_self._stopSlideshow();
var bTime = setInterval(function () {
if (!_self.isAnim) {
if (!toMove) {
clearInterval(bTime);
if (_self.options.autoplay) {
_self._startSlideshow();
}
}
else if (toMove > 0) {
_self._navigate('next', 'dg-transition-fast');
toMove--;
}
else if (toMove < 0) {
_self._navigate('prev', 'dg-transition-fast');
toMove++;
}
}
}, 0);
break;
}
});
}
},
// 自适应宽度
_updateWidth: function () {
if (this.support3d) {
if (document.body.clientWidth < 1000) {
this.CSSX = ($(this.box).width() - 10 - this.imgWidth * 0.7) / 2;
this.CSSXout = 0;
}
else if (document.body.clientWidth >= 1000) {
this.CSSX = ($(this.box).width() * 1.2 + 480 - 10 - this.imgWidth * 0.5) / 2 * 0.5;
this.CSSXout = ($(this.box).width() * 1.2 + 480 - 10 - this.imgWidth * 0.5) / 2;
}
}
else if (this.support2d) {
if (document.body.clientWidth < 1464) {
this.CSSX = ($(this.box).width() - 10 - this.imgWidth * 0.9) / 2;
this.CSSXout = 0;
}
else if (document.body.clientWidth >= 1464) {
this.CSSX = (($(this.box).width() - 10 - this.imgWidth * 0.8) / 2) * 0.7;
this.CSSXout = ($(this.box).width() - 10 - this.imgWidth * 0.8) / 2;
}
}
},
// 显示小圆点
_showButton: function () {
var _self = this;
for (var i = 0, len = _self.button.length; i < len; i++) {
if (_self.button[i].classList.contains('light')) {
_self.button[i].classList.remove('light');
break;
}
}
_self.button[_self.indexB].classList.add('light');
},
// 用来绑定点击事件
_click: function (element, move) {
var _self = this;
element.off('click.gallery');
element.on('click.gallery', function () {
if (!this.isAnim) {
_self._navigate(move);
if (_self.options.autoplay) {
_self._startSlideshow();
}
}
});
},
// 初始样式
_layout: function () {
this._setItems();
this.$leftItm.css(this._getCoordinates('left'));
this.$rightItm.css(this._getCoordinates('right'));
this.$currentItm.css(this._getCoordinates('center')).addClass('dg-center');
this._click(this.$leftItm, 'prev');
this._click(this.$prevItm, 'prev');
this.$currentItm.off('click.carrousel');
this._click(this.$rightItm, 'next');
this._click(this.$nextItm, 'next');
this.$nextItm.css(this._getCoordinates('outright'));
this.$prevItm.css(this._getCoordinates('outleft'));
this.$currentItm[0].href = this.$currentItm[0].getAttribute('link');
},
// 更新图片位置
_setItems: function () {
this.$items.removeClass('dg-center');
this.$currentItm = this.$items.eq(this.current);
this.$leftItm = ( this.current === 0 ) ? this.$items.eq(this.itemsCount - 1) : this.$items.eq(this.current - 1);
this.$rightItm = ( this.current === this.itemsCount - 1 ) ? this.$items.eq(0) : this.$items.eq(this.current + 1);
this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq(0) : this.$rightItm.next();
this.$prevItm = ( this.$leftItm.index() === 0 ) ? this.$items.eq(this.itemsCount - 1) : this.$leftItm.prev();
},
_loadEvents: function () {
var _self = this;
this.$navPrev.on('click.carrousel', function () {
_self._navigate('prev');
return false;
});
this.$navNext.on('click.carrousel', function () {
_self._navigate('next');
return false;
});
this.$wrapper.on('webkitTransitionEnd.carrousel transitionend.carrousel OTransitionEnd.carrousel', function () {
_self.$currentItm.addClass('dg-center');
_self.$items.removeClass('dg-transition');
_self.$items.removeClass('dg-transition-fast');
_self.isAnim = false;
// 处理中间元素的href
_self.$currentItm[0].href = _self.$currentItm[0].getAttribute('link');
_self.$leftItm[0].href = '#';
_self.$rightItm[0].href = '#';
// 处理左右元素的点击事件
_self._click(_self.$leftItm, 'prev');
_self._click(_self.$prevItm, 'prev');
_self.$currentItm.off('click.gallery');
_self._click(_self.$rightItm, 'next');
_self._click(_self.$nextItm, 'next');
});
},
// 定义样式
_getCoordinates: function (position) {
if (this.support3d) {
switch (position) {
case 'outleft':
return {
'opacity': 0,
'visibility': 'hidden'
};
break;
case 'outright':
return {
'opacity': 0,
'visibility': 'hidden'
};
break;
case 'left':
return {
'-webkit-transform': 'translateX(-' + this.CSSX + 'px) translateZ(-300px) rotateY(25deg)',
'-moz-transform': 'translateX(-' + this.CSSX + 'px) translateZ(-300px) rotateY(25deg)',
'-o-transform': 'translateX(-' + this.CSSX + 'px) translateZ(-300px) rotateY(25deg)',
'-ms-transform': 'translateX(-' + this.CSSX + 'px) translateZ(-300px) rotateY(25deg)',
'transform': 'translateX(-' + this.CSSX + 'px) translateZ(-300px) rotateY(25deg)',
'opacity': 1,
'visibility': 'visible'
};
break;
case 'right':
return {
'-webkit-transform': 'translateX(' + this.CSSX + 'px) translateZ(-300px) rotateY(-25deg)',
'-moz-transform': 'translateX(' + this.CSSX + 'px) translateZ(-300px) rotateY(-25deg)',
'-o-transform': 'translateX(' + this.CSSX + 'px) translateZ(-300px) rotateY(-25deg)',
'-ms-transform': 'translateX(' + this.CSSX + 'px) translateZ(-300px) rotateY(-25deg)',
'transform': 'translateX(' + this.CSSX + 'px) translateZ(-300px) rotateY(-25deg)',
'opacity': 1,
'visibility': 'visible'
};
break;
case 'center':
return {
'-webkit-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-moz-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-o-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-ms-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',
'transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',
'opacity': 1,
'visibility': 'visible'
};
break;
case 'hide':
return {
'-webkit-transform': 'translate(0px) scale(0.7)',
'opacity': 1,
'visibility': 'visible',
'z-index': 1
};
break;
}
}
else if (this.support2d) {
switch (position) {
case 'outleft':
return {
'-webkit-transform': 'translate(-' + this.CSSXout + 'px) scale(0.8)',
'-moz-transform': 'translate(-' + this.CSSXout + 'px) scale(0.8)',
'-o-transform': 'translate(-' + this.CSSXout + 'px) scale(0.8)',
'-ms-transform': 'translate(-' + this.CSSXout + 'px) scale(0.8)',
'transform': 'translate(-' + this.CSSXout + 'px) scale(0.8)',
'opacity': 1,
'z-index': 2
};
break;
case 'outright':
return {
'-webkit-transform': 'translate(' + this.CSSXout + 'px) scale(0.8)',
'-moz-transform': 'translate(' + this.CSSXout + 'px) scale(0.8)',
'-o-transform': 'translate(' + this.CSSXout + 'px) scale(0.8)',
'-ms-transform': 'translate(' + this.CSSXout + 'px) scale(0.8)',
'transform': 'translate(' + this.CSSXout + 'px) scale(0.8)',
'opacity': 1,
'z-index': 2
};
break;
case 'left':
return {
'-webkit-transform': 'translate(-' + this.CSSX + 'px) scale(0.9)',
'-moz-transform': 'translate(-' + this.CSSX + 'px) scale(0.9)',
'-o-transform': 'translate(-' + this.CSSX + 'px) scale(0.9)',
'-ms-transform': 'translate(-' + this.CSSX + 'px) scale(0.9)',
'transform': 'translate(-' + this.CSSX + 'px) scale(0.9)',
'opacity': 1,
'visibility': 'visible',
'z-index': 3
};
break;
case 'right':
return {
'-webkit-transform': 'translate(' + this.CSSX + 'px) scale(0.9)',
'-moz-transform': 'translate(' + this.CSSX + 'px) scale(0.9)',
'-o-transform': 'translate(' + this.CSSX + 'px) scale(0.9)',
'-ms-transform': 'translate(' + this.CSSX + 'px) scale(0.9)',
'transform': 'translate(' + this.CSSX + 'px) scale(0.9)',
'opacity': 1,
'visibility': 'visible',
'z-index': 3
};
break;
case 'center':
return {
'-webkit-transform': 'translate(0px) scale(1)',
'-moz-transform': 'translate(0px) scale(1)',
'-o-transform': 'translate(0px) scale(1)',
'-ms-transform': 'translate(0px) scale(1)',
'transform': 'translate(0px) scale(1)',
'opacity': 1,
'visibility': 'visible',
'z-index': 4
};
case 'hide':
return {
'-webkit-transform': 'translate(0px) scale(0.7)',
'-moz-transform': 'translate(0px) scale(0.7)',
'-o-transform': 'translate(0px) scale(0.7)',
'-ms-transform': 'translate(0px) scale(0.7)',
'transform': 'translate(0px) scale(0.7)',
'opacity': 1,
'visibility': 'visible',
'z-index': 1
}
break;
}
}
},
// 切换
_navigate: function (dir, speedClass) {
speedClass = speedClass || 'dg-transition';
if (!this.isAnim) {
this._updateWidth();
this.isAnim = true;
var _self = this;
switch (dir) {
case 'next' :
this.indexB++;
if (this.indexB === this.itemsCount) {
this.indexB = 0;
}
this._showButton();
this.current = this.$rightItm.index();
// current item moves left
this.$currentItm.addClass(speedClass).css(this._getCoordinates('left'));
// right item moves to the center
this.$rightItm.addClass(speedClass).css(this._getCoordinates('center'));
// left item moves out
this.$leftItm.addClass(speedClass).css(this._getCoordinates('outleft'));
this.$nextItm.addClass(speedClass).css(this._getCoordinates('right'));
if (this.itemsCount > 5) {
this.$prevItm.addClass(speedClass).css(this._getCoordinates('hide'));
this.$prevItm.off('click.carrousel');
}
var nextEle = ( this.$nextItm.index() === this.itemsCount - 1 ) ? this.$items.eq(0) : this.$nextItm.next();
$(nextEle).addClass(speedClass).css(this._getCoordinates('outright'));
$(nextEle).off('click.carrousel');
break;
case 'prev' :
this.indexB--;
if (this.indexB === -1) {
this.indexB = this.itemsCount - 1;
}
this._showButton();
this.current = this.$leftItm.index();
// current item moves right
this.$currentItm.addClass(speedClass).css(this._getCoordinates('right'));
// left item moves to the center
this.$leftItm.addClass(speedClass).css(this._getCoordinates('center'));
// right item moves out
this.$rightItm.addClass(speedClass).css(this._getCoordinates('outright'));
this.$prevItm.addClass(speedClass).css(this._getCoordinates('left'));
if (this.itemsCount > 5) {
this.$nextItm.addClass(speedClass).css(this._getCoordinates('hide'));
this.$nextItm.off('click.carrousel');
}
var prevEle = ( this.$prevItm.index() === 0 ) ? this.$items.eq(this.itemsCount - 1) : this.$prevItm.prev();
$(prevEle).addClass(speedClass).css(this._getCoordinates('outleft'));
$(prevEle).off('click.carrousel');
break;
}
;
this._setItems();
}
},
// 自动切换
_startSlideshow: function () {
if (this.slideshow) {
clearInterval(this.slideshow);
}
var _self = this;
this.slideshow = setInterval(function () {
if ($('.dg-center')[0] && !_self.isAnim) {
_self._navigate('next');
}
}, this.options.interval);
},
_stopSlideshow: function () {
clearTimeout(this.slideshow);
}
};
$.fn.carrousel = function (options) {
if (typeof options === 'object') {
this.each(function () {
var instance = $.data(this, 'carrousel');
if (!instance) {
$.data(this, 'carrousel', new $.carrousel(options, this));
}
});
}
else if (typeof options === 'string') {
this.each(function () {
var instance = $.data(this, 'carrousel');
if (instance) {
switch (options) {
case 'play':
instance._startSlideshow();
instance.options.autoplay = true;
break;
case 'stop':
instance._stopSlideshow();
instance.options.autoplay = false;
break;
case 'next':
instance._navigate('next');
break;
case 'prev':
instance._navigate('prev');
break;
}
}
});
}
else if (typeof options === 'number') {
this.each(function () {
var instance = $.data(this, 'carrousel');
instance.button[options].click();
});
}
return this;
};
})(jQuery);
