Created
January 5, 2022 10:32
-
-
Save LyudmilaM/42cf615d91160bf20019a61feb8d6c3a to your computer and use it in GitHub Desktop.
Swiper - прогрессбар (свайпера), фракции и буллеты (кастомные), добавление слайдов в слайдер
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"images": [ | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка1" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка2" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка3" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка4" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка5" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка6" | |
}, | |
{ | |
"src": "img/test/image1.jpg", | |
"alt": "Картинка7" | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
// Слайдер с фракциями, буллетами, прогрессбаром. | |
// Прогрессбар - свайпера. | |
// Фракции и буллеты - кастомные. | |
// Настройка слайдера | |
let myImageSlider = new Swiper('.image-slider', { | |
navigation: { | |
nextEl: '.swiper-button-next', | |
prevEl: '.swiper-button-prev' | |
}, | |
pagination: { | |
el: '.swiper-pagination', | |
clickable: true, | |
type: 'progressbar' | |
}, | |
touchRatio: 3, | |
touchAngle: 45, | |
grabCursor: true, | |
spaceBetween: 5, | |
slidesPerView: 1, | |
}); //------- end new Swiper('.image-slider', { --------- | |
// Получаем элементы для фракции | |
let mySliderAllSlides = document.querySelector('.image-slider__total'); | |
let mySliderCurrentSlide = document.querySelector('.image-slider__current'); | |
let imgSliderLength = null; | |
let bullets = []; | |
function getTotalSlidesNumber() { | |
imgSliderLength = document.querySelectorAll('.image-slider__slide').length; | |
mySliderAllSlides.innerHTML = imgSliderLength; | |
} | |
function createBullets() { | |
document.querySelector('.image-slider__bullets').innerHTML = ''; | |
for(let i = 0; i < imgSliderLength; i++){ | |
let bullet = document.createElement('div'); | |
bullet.classList.add('image-slider__bullet'); | |
bullet.textContent = i + 1; | |
document.querySelector('.image-slider__bullets').append(bullet); | |
} | |
} | |
function doActiveBullet() { | |
let allSlides = document.querySelectorAll('.image-slider__slide'); | |
bullets = document.querySelectorAll('.image-slider__bullet'); | |
for(let i = 0; i < bullets.length; i++){ | |
bullets[i].classList.remove('active'); | |
} | |
for(let i = 0; i < allSlides.length; i++){ | |
if(allSlides[i].classList.contains('swiper-slide-active')){ | |
bullets[i].classList.add('active'); | |
} | |
} | |
} | |
function createBulletsAndTotalSlidesNumber() { | |
getTotalSlidesNumber(); | |
createBullets(); | |
doActiveBullet(); | |
} | |
createBulletsAndTotalSlidesNumber(); | |
// Меняем номер текущего слайда во фракции и | |
// активный буллет при листании слайдера. | |
// .realIndex - находит индекс активного слайда | |
// Так как при добавлении новых слайдов в начало слайдера | |
// так же срабатывает событие slideChange, а потом уже | |
// код на создание буллетов, то делаем проверку | |
// на соответствие слайдов и буллетов, чтобы исключить ошибку. | |
myImageSlider.on('slideChange', function () { | |
let currentSlide = ++myImageSlider.realIndex; | |
mySliderCurrentSlide.innerHTML = currentSlide; | |
let slides = document.querySelectorAll('.image-slider__slide'); | |
bullets = document.querySelectorAll('.image-slider__bullet'); | |
if(slides.length === bullets.length){ | |
for(let i = 0; i < bullets.length; i++){ | |
bullets[i].classList.remove('active'); | |
} | |
bullets[currentSlide - 1].classList.add('active'); | |
} | |
}); | |
// Слушатель событий на буллеты вешаем через | |
// слушатель для их родителя, чтобы количество | |
// буллетов было актуальным. | |
// Можно переделать на событие click для родителя, | |
// и если event.target имеет класс .image-slider__bullet, | |
// то находим его индекс и, соответственно, | |
// myImageSlider.slideTo(индекс). | |
let bulletsContainer = document.querySelector('.image-slider__bullets'); | |
bulletsContainer.addEventListener('mouseenter', function(e) { | |
bullets.forEach((bullet, i) => { | |
bullet.addEventListener('click', function(e) { | |
myImageSlider.slideTo(i); | |
}); | |
}); | |
}); | |
// Добавление слайдов с помощью fetch, | |
// данные из .json файла | |
let newSlidesArray = []; | |
let slidesArrayToShow = []; | |
let count = 0; | |
let numberOfSlidesToShow = 3; | |
let flag = false; | |
let addBtn = document.querySelector('.buttonsBlock__button_append-3'); | |
function showSlides(e, arr) { | |
e.preventDefault(); | |
if(arr.length >= count + numberOfSlidesToShow){ | |
slidesArrayToShow = arr.slice(count, count + numberOfSlidesToShow); | |
myImageSlider.appendSlide(slidesArrayToShow); | |
count += numberOfSlidesToShow; | |
flag = true; | |
} else { | |
slidesArrayToShow = arr.slice(count); | |
myImageSlider.appendSlide(slidesArrayToShow); | |
addBtn.disabled = true; | |
addBtn.classList.add('disable'); | |
flag = false; | |
} | |
createBulletsAndTotalSlidesNumber(); | |
} | |
async function getSlides(e) { | |
e.preventDefault(); | |
let response = await fetch('_slides-for-more.json', { | |
method: 'GET' | |
}); | |
if(response.ok){ // Если нет файла на сервере или связи, то alert('Ошибка загрузки'); | |
try { // Если файл json не валиден, то будет alert('Ошибка') | |
let result = await response.json(); | |
for(let i = 0; i < result.images.length; i++){ | |
newSlidesArray.push(`<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='${result.images[i].src}' alt='${result.images[i].alt}'></div></div>`); | |
} | |
showSlides(e, newSlidesArray); | |
} catch (e){ | |
alert('Ошибка'); // Поменять на ошибка загрузки | |
} | |
} else { | |
alert('Ошибка загрузки'); | |
} | |
} //------- end async function getSlides --------- | |
addBtn.addEventListener('click', getSlides, {once: true}); | |
addBtn.addEventListener('click', function (e) { | |
if(flag == true){ | |
showSlides(e, newSlidesArray); | |
} | |
}); | |
// Добавление в начало 2х слайдов | |
document.querySelector('.buttonsBlock__button_prepend-2').addEventListener('click', function (e) { | |
e.preventDefault(); | |
myImageSlider.prependSlide(["<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image2.jpg' alt='Картинка'></div></div>", "<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image2.jpg' alt='Картинка'></div></div>"]); | |
createBulletsAndTotalSlidesNumber(); | |
}); | |
// Добавление в начало 1 слайда | |
document.querySelector('.buttonsBlock__button_prepend-1').addEventListener('click', function (e) { | |
e.preventDefault(); | |
myImageSlider.prependSlide("<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image3.jpg' alt='Картинка'></div></div>"); | |
createBulletsAndTotalSlidesNumber(); | |
}); | |
// Добавление в конец 1 слайда | |
document.querySelector('.buttonsBlock__button_append-1').addEventListener('click', function (e) { | |
e.preventDefault(); | |
myImageSlider.appendSlide("<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image4.jpg' alt='Картинка'></div></div>"); | |
createBulletsAndTotalSlidesNumber(); | |
}); | |
// Добавление в конец 2х слайдов | |
document.querySelector('.buttonsBlock__button_append-2').addEventListener('click', function (e) { | |
e.preventDefault(); | |
myImageSlider.appendSlide(["<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image5.jpg' alt='Картинка'></div></div>", "<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image5.jpg' alt='Картинка'></div></div>"]); | |
createBulletsAndTotalSlidesNumber(); | |
}); | |
})(); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.image-slider.swiper-container | |
.image-slider__wrapper.swiper-wrapper | |
.image-slider__slide.swiper-slide | |
.image-slider__image | |
img(src="img/test/image1.jpg" alt="Картинка") | |
.image-slider__slide.swiper-slide | |
.image-slider__image | |
img(src="img/test/image2.jpg" alt="Картинка") | |
.image-slider__slide.swiper-slide | |
.image-slider__image | |
img(src="img/test/image3.jpg" alt="Картинка") | |
.image-slider__slide.swiper-slide | |
.image-slider__image | |
img(src="img/test/image4.jpg" alt="Картинка") | |
.image-slider__slide.swiper-slide | |
.image-slider__image | |
img(src="img/test/image5.jpg" alt="Картинка") | |
//- Добавляем, если нам нужны, стрелки управления | |
.swiper-button-prev | |
.swiper-button-next | |
//- Добавляем, если нам нужна пагинация (в данном случае будет прогрессбар) | |
.swiper-pagination | |
//- Конструкция для вывода фракций | |
.image-slider__fraction | |
.image-slider__current 1 | |
.image-slider__sepparator / | |
.image-slider__total 1 | |
//- Для вывода буллетов | |
.image-slider__bullets | |
.buttonsBlock | |
button.buttonsBlock__button.buttonsBlock__button_prepend-2 | |
| Добавить в начало 2 слайда | |
button.buttonsBlock__button.buttonsBlock__button_prepend-1 | |
| Добавить в начало слайд | |
button.buttonsBlock__button.buttonsBlock__button_append-1 | |
| Добавить в конец слайда | |
button.buttonsBlock__button.buttonsBlock__button_append-2 | |
| Добавить в конец 2 слайда | |
button.buttonsBlock__button.buttonsBlock__button_append-3 | |
| Добавить еще слайдов | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.image-slider | |
position: relative | |
padding: 30px 0 70px | |
overflow: hidden | |
&__wrapper | |
position: relative | |
&__slide | |
position: relative | |
&__image | |
position: relative | |
width: 100% | |
padding-top: calc(100% / 3 * 2) | |
img | |
position: absolute | |
top: 0 | |
left: 0 | |
display: block | |
width: 100% | |
height: 100% | |
object-fit: cover | |
object-position: center | |
.image-slider .swiper-button-prev::after, | |
.image-slider .swiper-button-next::after | |
font-size: 80px | |
color: #fff | |
.image-slider .swiper-button-prev::after | |
margin-left: 50px | |
.image-slider .swiper-button-next::after | |
margin-right: 50px | |
.image-slider__fraction | |
display: flex | |
flex-flow: row nowrap | |
align-items: center | |
justify-content: center | |
padding-top: 10px | |
color: green | |
.image-slider__sepparator | |
margin: 0 15px | |
.image-slider__bullets | |
display: flex | |
flex-flow: row wrap | |
align-items: center | |
justify-content: center | |
padding-top: 10px | |
.image-slider__bullet | |
width: 40px | |
height: 40px | |
margin: 0 10px 20px | |
font-size: 16px | |
font-weight: bold | |
line-height: 40px | |
color: red | |
text-align: center | |
background-color: grey | |
border-radius: 50% | |
opacity: .3 | |
.image-slider__bullet.active | |
opacity: 1 | |
.buttonsBlock | |
display: flex | |
flex-flow: row nowrap | |
justify-content: center | |
font-size: 0 | |
&__button | |
font-size: 16px | |
color: #fff | |
background-color: green | |
border: 1px solid lightgreen | |
outline: none | |
&:not(:last-child) | |
margin-right: 10px | |
&:focus, | |
&:active | |
outline: none | |
.disable | |
background-color: red | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment