Skip to content

Instantly share code, notes, and snippets.

@0632347878

0632347878/slider-for-box.js

Created August 9, 2018 14:45
Show Gist options
  • Save 0632347878/0380a326ddf4f91dbf6f80743369eafb to your computer and use it in GitHub Desktop.
Save 0632347878/0380a326ddf4f91dbf6f80743369eafb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<div class="swiper-wrapper">
<!-- Slides -->
<div id="bronze" class="pick-tariff-item swiper-slide swiper-slide-active" style="width: 353.333px; margin-right: 25px;">
<h3 class="pick-tariff-item__title">Бронзовые</h3>
<span class="pick-tariff-item__coast">400 грн.</span>
<p class="pick-tariff-item__description">
Номер, в котором повторяются комбинации цифр, или зеркальные цифры
</p>
<ul class="pick-tariff-list" style="display: flex;">
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">b(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<div class="pick-tariff-more">Больше номеров
<span onclick="plusDivs(-1, 'bronze', event)" class="pick-tariff-more__left"></span>
<span onclick="plusDivs(+1, 'bronze', event)" class="pick-tariff-more__right"></span>
</div>
</div>
<div id="silver" class="pick-tariff-item swiper-slide swiper-slide-next" style="width: 353.333px; margin-right: 25px;">
<h3 class="pick-tariff-item__title">Бронзовые</h3>
<span class="pick-tariff-item__coast">400 грн.</span>
<p class="pick-tariff-item__description">
Номер, в котором повторяются комбинации цифр, или зеркальные цифры
</p>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">a(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: flex;">
<li class="pick-tariff-list__item">b(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<div class="pick-tariff-more">Больше номеров
<span onclick="plusDivs(-1, 'silver', event)" class="pick-tariff-more__left"></span>
<span onclick="plusDivs(+1, 'silver', event)" class="pick-tariff-more__right"></span>
</div>
</div>
<div id="gold" class="pick-tariff-item swiper-slide" style="width: 353.333px; margin-right: 25px;">
<h3 class="pick-tariff-item__title">Бронзовые</h3>
<span class="pick-tariff-item__coast">400 грн.</span>
<p class="pick-tariff-item__description">
Номер, в котором повторяются комбинации цифр, или зеркальные цифры
</p>
<ul class="pick-tariff-list" style="display: flex;">
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">b(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<ul class="pick-tariff-list" style="display: none;">
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
<li class="pick-tariff-list__item">(097) 148-2<b>7-7</b>2</li>
</ul>
<div class="pick-tariff-more">Больше номеров
<span onclick="plusDivs(-1, 'gold', event)" class="pick-tariff-more__left"></span>
<span onclick="plusDivs(+1, 'gold', event)" class="pick-tariff-more__right"></span>
</div>
</div>
</div>
Raw
slider-for-box.js
var slideIndex = 1,
sliderWrapper = document.getElementsByClassName("pick-tariff-item"),
arrSliderWrapper = [...sliderWrapper];
document.addEventListener('DOMContentLoaded', function(){
arrSliderWrapper.forEach(function(elem){
elem.querySelector('.pick-tariff-list').style.display = "flex";
elem.querySelectorAll('.pick-tariff-list').length < 2 ? elem.querySelector('.pick-tariff-more').classList.add('pick-tariff-more--disabled') : console.log('more than 1');
console.log(elem.querySelectorAll('.pick-tariff-list').length);
});
});
showDivs(slideIndex);
function plusDivs(n, tariffName, event) {
if( event.target.parentNode.classList.contains('pick-tariff-more--disabled')) {}
else showDivs(slideIndex += n, tariffName );
var arrLists = [].slice.call(event.target.parentNode.parentNode.querySelectorAll('.pick-tariff-list'));
arrLists.forEach(function(elemList) {
elemList.classList.add('pick-tariff-animate');
});
function animateList() {
arrLists.forEach(function(elemList) {
elemList.classList.remove('pick-tariff-animate');
});
}
setTimeout(animateList, 500);
}
function showDivs(n, tariffName) {
var i;
var x= tariffName != null ? document.getElementById(tariffName).getElementsByClassName("pick-tariff-list") : document.getElementsByClassName("pick-tariff-list");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "flex";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment