Есть сайт на адаптиве есть табы сделаные спомощью свайпа
их код идентичен меняется только цифра с 2 на 3 в итоге таб с солнышком работает коректно а таб с луной работает только на половину (не меняеться картинка и не идет анимация)
код таба с луной
$('section[name=sleep]').swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction=='up') scrollto($('body').scrollTop()+distance);
if (direction=='down') scrollto($('body').scrollTop()-distance);
if (direction=='up' || direction=='down') return true;
let cont = $('#p2-phrases');
let cur = cont.find('.phase.active');
let C = $('#p2-circle');
let upImage = $('#p2').prev('.upImage');
console.log(upImage);
if (direction=='right') {
let n = (cur.attr('rel')*1)-1;
let N = cont.find('.phase[rel="'+(n)+'"]');
if (N.exists() && cur.attr('rel')!='1') {
cur.removeClass('active');
N.addClass('active');
C[0].className = 'phase'+n;
upImage.children('.active').removeClass('active');
upImage.children('[rel='+(n)+']').addClass('active');
} else {
// scroll to prev
// C[0].className = '';
}
}
if (direction=='left') {
let n = (cur.attr('rel')*1)+1;
let N = cont.find('.phase[rel="'+(n)+'"]');
if (N.exists() && n<4) {
cur.removeClass('active');
N.addClass('active');
C[0].className = 'phase'+n;
upImage.children('.active').removeClass('active');
upImage.children('[rel='+(n)+']').addClass('active');
} else {
// scroll to next
// C[0].className = '';
}
}
}
});
html таба с луной
<section class="screen bluegrad active" name="sleep">
<div class="upImage">
<div class="upImagePhase active" rel="1" style="background-image:url('/upload/images/ce08a674c0e4489.jpg')"> </div>
<div class="upImagePhase" rel="2" style="background-image:url('/upload/images/c0467769796f28e.jpg')"> </div>
<div class="upImagePhase " rel="3" style="background-image:url('/upload/images/b39c5778b6f45fa.jpg')"> </div>
</div>
<div id="p2" class="container">
<div id="p2-phrases">
<div class="phase active" rel="1">
<div>Я хочу закрыть глаза</div>
<div>и раствориться во сне</div>
<span>Гонка мыслей в голове не прекращается <br>с окончанием дня. Нервы напряжены, <br>эмоции на пределе, каждый шорох <br>мешает расслабиться и заснуть</span> </div>
<div class="phase" rel="2">
<div>Я хочу спокойного</div>
<div>сна без тревоги</div><span>Эмоциональное перенапряжение <br>не дает расслабиться и насладиться <br>сном. Список задач на сегодня, завтра, <br>всю неделю тревожит и вырывает <br>из сна</span> </div>
<div class="phase " rel="3">
<div>Я хочу спать сегодня</div>
<div>и быть бодрым завтра</div>
<span>Хочу чтобы каждая минута сна <br>восстанавливала мой организм <br>и приносила максимум пользы, <br>для того чтобы в каждом мгновении <br>жизни быть бодрым и собранным</span> </div>
</div>
<div id="p2-circle" class="phase1">
<div>
<svg id="p2-circle-dots">
<circle cx="50%" cy="50%" r="50%"></circle>
</svg>
<div id="p2-circle-progress"> </div>
<div class="p2-circle-bulls pos1"><div> </div></div>
<div class="p2-circle-bulls pos2"><div> </div></div>
<div class="p2-circle-bulls pos3"><div> </div></div>
<div id="p2-circle-swipe"><div></div></div>
<div id="p2-circle-marker">
<div>
<div>
<div class="p2-circle-marker-star"></div>
<div class="p2-circle-marker-star"></div>
<div class="p2-circle-marker-star"></div>
<div id="p2-circle-marker-moon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
код таба с солнцем
$('section[name=standup]').swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
// console.log(direction);
if (direction=='up') scrollto($('body').scrollTop()+distance);
if (direction=='down') scrollto($('body').scrollTop()-distance);
if (direction=='up' || direction=='down') return true;
let cont = $('#p3-phrases');
let cur = cont.find('.phase.active');
let C = $('#p3-circle');
let upImage = $('#p3').prev('.upImage')
console.log(upImage);
if (direction=='left') {
let n = (cur.attr('rel')*1)-1;
let N = cont.find('.phase[rel="'+(n)+'"]');
if (N.exists() && cur.attr('rel')!='1') {
cur.removeClass('active');
N.addClass('active');
C[0].className = 'phase'+n;
upImage.children('.active').removeClass('active');
upImage.children('[rel='+(n)+']').addClass('active');
} else {
// scroll to prev
// C[0].className = '';
}
}
if (direction=='right') {
let n = (cur.attr('rel')*1)+1;
let N = cont.find('.phase[rel="'+(n)+'"]');
if (N.exists() && n<4) {
cur.removeClass('active');
N.addClass('active');
C[0].className = 'phase'+n;
upImage.children('.active').removeClass('active');
upImage.children('[rel='+(n)+']').addClass('active');
} else {
// scroll to next
// C[0].className = '';
}
}
}
});
html код таба с солнцем
<section class="screen silvergrad active" name="standup">
<div class="upImage">
<div class="upImagePhase active" rel="1" style="background-image:url('/upload/images/82ac38f8f828849.jpg')"> </div>
<div class="upImagePhase " rel="2" style="background-image:url('/upload/images/1905bad22f9aa1f.jpg')"> </div>
<div class="upImagePhase " rel="3" style="background-image:url('/upload/images/efc2238c229d58e.jpg')"> </div>
</div>
<div id="p3" class="container">
<div id="p3-phrases">
<div class="phase active" rel="1">
<div>Я хочу радоваться</div>
<div>утру</div><span>Просыпаться без раздражения и чувства <br>подавленности, отдохнувшим и готовым <br>к новому дню</span> </div>
<div class="phase " rel="2">
<div>Я не хочу переводить</div>
<div>будильник</div>
<span>Просыпаться без раздражения <br>и бесконечного перевода будильника, <br>собранным и отдохнувшим</span> </div>
<div class="phase " rel="3">
<div>Я хочу быть</div><div>бодрым с утра</div><span>Проснуться в гармонии с собой, <br>отдохнувшим, без раздражения <br>и потери времени приступить <br>к задачам нового дня.</span> </div>
</div>
<div id="p3-circle" class="phase1">
<div>
<svg id="p3-circle-dots">
<circle cx="50%" cy="50%" r="50%"></circle>
</svg>
<div id="p3-circle-progress"> </div>
<div class="p3-circle-bulls pos1"><div> </div></div>
<div class="p3-circle-bulls pos2"><div> </div></div>
<div class="p3-circle-bulls pos3"><div> </div></div>
<div id="p3-circle-swipe"><div></div></div>
<div id="p3-circle-marker">
<div>
<div>
<div id="p3-circle-marker-sun"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
