• 89
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет. Вот для одного из проектов нашел интересный вариант карусели на бутстрапе. Карусель построена на бутстрапе 4.0.0 и использует jquery 3.2.1, так что проверяйте что у вас подключенно.
Итак приступим Первое проверяем наличие скриптов и стилей бутстрап и jquery

Код:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.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);
Все пользуемся, прикрутить на ngcms проблем не должно быть.

Можешь почитать и вот эту статейку "Выводим название категории через TWIG но не через news.table.tpl"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element