CODYSHOP
темы и плагины для WordpressСегодня хотел бы поделиться простенькой галереей изображений. Немного поработав с кодом, можно приспособить и как слайдер. Несмотря на свою лаконичность и простоту, галерея понравилась необычной анимированной навигацией. Как всегда, установка на свой сайт займет всего лишь пару минут.
Демо
Скачать
HTML разметка
У нас будет 5 слайдов. При желании, вы можете увеличить их число. Количество пунктов навигации должно совпадать с количеством слайдов.
<div class="slides">
<div class="slide 1th"></div>
<div class="slide 2th"></div>
<div class="slide 3th"></div>
<div class="slide 4th"></div>
<div class="slide 5th"></div>
</div>
<div class="nav">
<div class="btn-group">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>Оформляем CSS стилями
/* Для для галереи */
.btn-group { position: relative; display: inline-block;}
.btn-group .btn { cursor: pointer; float: left; height: 10px; width: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); margin-left: 6px; margin-top: 1px;}
.btn-group .btn:first-child { margin-left: 3px;}
.btn-group svg { z-index: -1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; overflow: visible;}
.btn-group path { fill: none; stroke: #eee; stroke-dasharray: 39, 99999; transition: all 1s ease-in-out; stroke-width: 2;}
.slides { transition: left 1s ease-in-out; height: 100vh; position: absolute;}
.slides .slide { height: 100vh; width: 100vw; float: left;}
.slides .slide:nth-child(1) { background: #c66;}
.slides .slide:nth-child(2) { background: #acac39;}
.slides .slide:nth-child(3) { background: #39ac39;}
.slides .slide:nth-child(4) { background: #40bfbf;}
.slides .slide:nth-child(5) { background: #8c8cd9;}
.site-slider { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 300px; position: relative;}
.nav {text-align: center; position: absolute; width: 100%;bottom: 5%; transform: translateY(-50%);}В оформлении нет ничего сложного. Галерея адаптивна, и вы можете разместить разметку слайдера в любое место своего сайта.
Запускаем анимацию
Теперь осталось подключить javascript со следующим содержимым:
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// https://dribbble.com/shots/2658222
var pathLength = 39;
var BtnGroup = function () {
function BtnGroup(group) {
var _this = this;
_classCallCheck(this, BtnGroup);
this.buttonSpacing = 20;
this.group = group;
this.buttons = Array.prototype.slice.call(this.group.querySelectorAll('.btn'));
this.slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
this.slideContainer = document.querySelector('.slides');
this.slideContainer.style.width = this.slides.length + '00vw';
this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.svg.setAttribute('viewbox', '0 0 ' + this.buttonSpacing * this.buttons.length + ' 16');
this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
this.path.classList.add('line');
this.currentPath = 'M ' + -this.buttonSpacing / 2 + ', 14';
this.currentIndex = -1;
this.activateIndex(this.buttons.indexOf(this.group.querySelector('.active')));
this.group.appendChild(this.svg);
this.svg.appendChild(this.path);
this.refreshPath();
this.initButtons();
for (var _iterator = this.buttons, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var button = _ref;
button.addEventListener('click', function (e) {
return _this.onClick(e);
});
}
}
BtnGroup.prototype.initButtons = function initButtons() {
for (var i = 0; i < this.buttons.length; i++) {
var center = this.center(i);
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var pathStr = '';
pathStr += 'M' + center + ', 14 ';
pathStr += 'C' + (center + 3) + ', 14 ';
pathStr += center + 6 + ', 11 ';
pathStr += center + 6 + ', 8 ';
pathStr += 'C' + (center + 6) + ', 5 ';
pathStr += center + 3 + ', 2 ';
pathStr += center + ', 2 ';
pathStr += 'C' + (center - 3) + ', 2 ';
pathStr += center - 6 + ', 5 ';
pathStr += center - 6 + ', 8 ';
pathStr += 'C' + (center - 6) + ', 11 ';
pathStr += center - 3 + ', 14 ';
pathStr += center + ', 14 ';
path.setAttributeNS(null, 'd', pathStr);
path.classList.add('circle');
}
};
BtnGroup.prototype.onClick = function onClick(e) {
var index = this.buttons.indexOf(e.srcElement || e.target);
this.activateIndex(index);
};
BtnGroup.prototype.refreshPath = function refreshPath() {
this.path.setAttributeNS(null, 'd', this.currentPath);
this.path.style.strokeDashoffset = (-this.path.getTotalLength() + pathLength) * 0.9965;
};
BtnGroup.prototype.center = function center(index) {
return index * this.buttonSpacing + this.buttonSpacing / 2;
};
BtnGroup.prototype.removeClass = function removeClass(str) {
if (this.buttons[this.currentIndex]) {
this.buttons[this.currentIndex].classList.remove(str);
}
};
BtnGroup.prototype.addClass = function addClass(str) {
if (this.buttons[this.currentIndex]) {
this.buttons[this.currentIndex].classList.add(str);
}
};
BtnGroup.prototype.activateIndex = function activateIndex(index) {
this.slideContainer.style.left = -index + '00vw';
var lastCenter = this.center(this.currentIndex);
var nextCenter = this.center(index);
var offset = 0;
var sign = index < this.currentIndex ? -1 : 1;
this.currentPath += 'C' + (lastCenter + sign * 3) + ', 14 ';
this.currentPath += lastCenter + sign * 6 + ', 11 ';
this.currentPath += lastCenter + sign * 6 + ', 8 ';
this.currentPath += 'C' + (lastCenter + sign * 6) + ', 5 ';
this.currentPath += lastCenter + sign * 3 + ', 2 ';
this.currentPath += lastCenter + ', 2 ';
this.currentPath += 'C' + (lastCenter - sign * 3) + ', 2 ';
this.currentPath += lastCenter - sign * 6 + ', 5 ';
this.currentPath += lastCenter - sign * 6 + ', 8 ';
this.currentPath += 'C' + (lastCenter - sign * 6) + ', 11 ';
this.currentPath += lastCenter - sign * 3 + ', 14 ';
this.currentPath += lastCenter + ', 14 ';
this.currentPath += 'L' + nextCenter + ', 14 ';
this.currentPath += 'C' + (nextCenter + sign * 3) + ', 14 ';
this.currentPath += nextCenter + sign * 6 + ', 11 ';
this.currentPath += nextCenter + sign * 6 + ', 8 ';
this.currentPath += 'C' + (nextCenter + sign * 6) + ', 5 ';
this.currentPath += nextCenter + sign * 3 + ', 2 ';
this.currentPath += nextCenter + ', 2 ';
this.currentPath += 'C' + (nextCenter - sign * 3) + ', 2 ';
this.currentPath += nextCenter - sign * 6 + ', 5 ';
this.currentPath += nextCenter - sign * 6 + ', 8 ';
this.currentPath += 'C' + (nextCenter - sign * 6) + ', 11 ';
this.currentPath += nextCenter - sign * 3 + ', 14 ';
this.currentPath += nextCenter + ', 14 ';
this.removeClass('active');
this.currentIndex = index;
this.addClass('active');
this.refreshPath();
};
return BtnGroup;
}();
var groups = Array.prototype.slice.call(document.querySelectorAll('.btn-group'));
for (var _iterator2 = groups, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref2;
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref2 = _iterator2[_i2++];
} else {
_i2 = _iterator2.next();
if (_i2.done) break;
_ref2 = _i2.value;
}
var group = _ref2;
console.log(new BtnGroup(group));
}Важно! Наш скрипт должен размещаться после слайда, перед закрывающим тегом body. Переход от слайда к слайду осуществляется вручную. Если вы хотите запускать его автоматически, добавьте в конец следующий код:
setInterval(function(){
var elem = jQuery('.btn-group .active').next();
if ( jQuery(elem).is(':last-child') ) {
jQuery('.btn-group .btn:first-child').trigger('click');
} else {
jQuery(elem).trigger('click');
}
}, 8000); // 8 секунд между переходамиTags: галерея, слайдер