Боря хочет подергать персонажей

[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

.intro {
position: relative;
width: 100%;
height: 300px;
}
.left {
float: left;
height: 100%;
width: 40%;
padding: 3rem 3rem 3rem 1rem;
display: table;
}
.left > div {
display: table-cell;
vertical-align: middle;
}
span {
color: #44344d;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
display: inline-block;
text-transform: uppercase;
font-family: sans-serif;
margin-bottom: 4rem;
}
h1 {
font-size: 8rem;
margin-bottom: 3rem;
}
h1 + p {
color: #949494;
font-size: 1.6rem;
margin-bottom: 4rem;
}
p + a {
font-size: 1.6rem;
color: #000000;
}
.slider {
float: right;
position: relative;
width: 60%;
height: 100%;
}
.slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transition: clip .7s ease-in-out, z-index 0s .7s;
clip: rect(0, 100vw, 100vh, 100vw);
display: table;
}
.center-y {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #000000;
}
h3 {
font-size: 5rem;
font-style: italic;
}
h3 + a {
font-size: 1.6rem;
display: inline-block;
color: #000000;
margin-top: 2rem;
}
h3, h3 + a {
opacity: 0;
transition: opacity .7s 0s, transform .5s .2s;
transform: translate3d(0, 50%, 0);
}
li.current h3, li.current h3 + a {
opacity: 1;
transition-delay: 1s;
transform: translate3d(0, 0, 0);
}
li.current {
z-index: 1;
clip: rect(0, 100vw, 100vh, 0);
}
li.prev {
clip: rect(0, 0, 100vh, 0);
}
.slider nav {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
nav a {
display: inline-block;
border-radius: 50%;
width: 1.2rem;
height: 1.2rem;
min-width: 12px;
min-height: 12px;
background: #fff;
margin: 0 1rem;
transition: transform .3s;
}
a.current_dot {
transform: scale(1.4);
}
@media screen and (max-width: 700px) {
.left {
width: 100%;
height: 30%;
}
.slider {
width: 100%;
height: 70%;
}
}

</style>

{
class SliderClip {
constructor(el) {
this.el = el;
this.Slides = Array.from(this.el.querySelectorAll('li'));
this.Nav = Array.from(this.el.querySelectorAll('nav a'));
this.totalSlides = this.Slides.length;
this.current = 0;
this.autoPlay = true; //true or false
this.timeTrans = 4000; //transition time in milliseconds
this.IndexElements = [];

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Минако Айно</span>
<h1>Клерк</h1>
<p>Минако Айно все же исполнила свою давнюю мечту стать звездой мирового масштаба. Вот только свалившееся на нее бессмертие сделало невозможным продолжить данную карьеру. Блистая на сценах порядка 20 лет, на данный момент она является лишь мелким клерком, выполняющим не особо сложные задачи. Да и зачем ей это, ведь заработанные ранее деньги она смогла пустить в оборот, так что работа больше для души. И чтобы совсем не скиснуть со скуки.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/a0a2dc4e61f … 6_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Минако Айно</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Venu … 267193.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Венера</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Макото Кино</span>
<h1>Детектив</h1>
<p>Макото Кино давно забросила мечту о том, чтобы стать домохозяйкой. Новые особенности не располагали к заведению долгосрочных отношений, потому она стала расследовать особо опасные дела. Юность не прошла даром, а желание служить добру никуда не делось.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/33c327a7e43 … 5_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Макото Кино</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Jupi … 267236.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Юпитер</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Усаги Тсукино</span>
<h1>Домохозяйка</h1>
<p>Усаги Тсукино, как и ожидалось, давно стала женой Мамору Чиба. Девушка посвятила всю себя быту и своему избраннику, вот только в последнее время их брак трещит по швам. Ее супруг стал меняться и, к сожалению, не в лучшую сторону.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/50dff66e2be … 1_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Усаги Тсукино</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Moon.(Character).full.3267255.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Мун</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Харука Тено</span>
<h1>Тренер</h1>
<p>Харука, Мичиру и Хотару попали в аварию. После аварии девушка восстановилась не полностью: для передвижения ей нужна трость, но даже с тростью она прихрамывает на одну ногу. В форме Сейлор Уран передвигается также, как и до травмы. Из спорта Харука уйти так и не смогла, правда в гонках теперь участвует лишь в роли тренера. Чувствует за собой вину из-за аварии.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/89d909d3c6e … 9_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Харука Тено</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Uran … 224905.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Уран</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Мичиру Кайо</span>
<h1>Преподаватель</h1>
<p>После аварии потеряла кисть, которую восстановили, благодаря современным технологиям, но о карьере скрипачки пришлось забыть. Теперь девушка преподает теорию в консерватории, но с завистью смотрит на своих учеников. В личной жизни тоже разлад из-за внутреннего конфликта Харуки с собой.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/376fd05cab5 … 0_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Мичиру Кайо</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Nept … 224891.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Нептун</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Хотару Томо</span>
<h1>Пациент</h1>
<p>Хотару имела большие планы на жизнь, которые пришлось отложить из-за аварии на длительное время. Девушка впала в кому, в которой находится по сей день, но кто знает, когда вновь пробудится вестник смерти?</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/1b829c19de4 … 8_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Хотару Томо</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Satu … 224908.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Сатурн</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Сецуна Мейо</span>
<h1>Хикка</h1>
<p>Сецуна Мейо давно ушла из прямой видимости подруг. Стала затворницей, не являясь на обязательные встречи. Никто не знает с чем это связано, а Плутон, по своей давней привычке, никому ничего не рассказывает.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/d8ed2da01cc … 7_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Сецуна Мейо</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Plut … 224907.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Плутон</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Ами МИДЗУНО</span>
<h1>Патологоанатом</h1>
<p>После школы умница Ами поступила в Токийский университет, который с успехом закончила по специальности нейрохирургия. Ами Мидзуно пошла лечить людей, но, к сожалению, даже у гениев случаются ошибки. Пациент умер на столе, и девушка решила сменить поле деятельности. Сейчас она косвенно сотрудничает с Макото, являясь патологоанатомом.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/5e28f96a7c9 … 3_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Ами Мидзуно</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Merc … 267250.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Меркурий</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Рей Хино</span>
<h1>Жрица</h1>
<p>Рей Хино, как ни странно, все же осталась руководить храмом, каждые несколько лет являя нового главу, чтобы не вызывать подозрений у людей. Тихий уголок спокойствия, не подверженный влиянию времени. Из-за дара предвидения, который девушка использует в коммерческих целях, имеет хорошие связи во всех сферах. Круг лиц, которому известно о её даре, очень ограничен.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://64.media.tumblr.com/0f0736624ac … 4_1280.jpg)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Рей Хино</a>
</div>
</li>
<li style="background-image:url(https://static.zerochan.net/Sailor.Mars … 267248.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Сейлор Марс</a>
</div>
</li>

[/html]
[hideprofile][html]
<style>
@import url(https://fonts.googleapis.com/css?family … ,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: calc(5px + 0.4vw);
}

</style>

for(let i=0;i<this.totalSlides;i++) {
this.IndexElements.push(i);
}

this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;

this.Nav.forEach((dot) => {
dot.addEventListener('click', (ele) => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
})
})

this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);

setInterval(function() {
if (self.autoPlay) {
self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);

}
changeSlide(index) {

this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

const getAllPrev = value => value < index;

const prevElements = this.IndexElements.filter(getAllPrev);

prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}
}

const slider = new SliderClip(document.querySelector('.slider'));
}

</script>

<section class="intro">
<div class="left">
<div>
<span>Мамору Джиба</span>
<h1>Я БОГАТ</h1>
<p>Усаги никогда не запоминает, кем работает её муж. Ей, впрочем, это и не важно, ведь Мамору излишне обеспечивает семью. Серьезная работа и постоянный стресс меняют людей, поэтому отношения с супругой в последнее время не ладятся. Но у АМС есть пара очень полезных советов, поэтому напишите нам, перед бронированием роли.</p>

</div>
</div>

<div class="slider">
<ul>
<li style="background-image:url(https://sun9-72.userapi.com/impf/c85442 … type=album)">
<div class="center-y">
<h3>Личность</h3>
<a href="#">Мамору Джиба</a>
</div>
</li>
<li style="background-image:url(https://s1.zerochan.net/Tuxedo.Kamen.600.3229132.jpg)">
<div class="center-y">
<h3>Альтерэго</h3>
<a href="#">Такседо Маск</a>
</div>
</li>

[/html]

006699

Меню навигации

Пользовательские ссылки

Информация о пользователе

Боря хочет подергать персонажей

Сообщений 1 страница 2 из 2

Поделиться12021-04-09 14:08:57

Поделиться22021-04-09 14:52:45