frontblocks-carousel.css
2 years ago
frontblocks-carousel.js
2 years ago
frontblocks-carousel.php
2 years ago
glide.min.js
2 years ago
frontblocks-carousel.js
80 lines
| 1 | window.addEventListener('load', function (event) { |
| 2 | const carouselItem = document.querySelectorAll('.frontblocks-carousel'); |
| 3 | |
| 4 | if (carouselItem.length > 0) { |
| 5 | carouselItem.forEach( (item) => { |
| 6 | // First Parent. |
| 7 | const parent = item.parentNode; |
| 8 | const wrapper = document.createElement('div'); |
| 9 | |
| 10 | parent.replaceChild(wrapper, item); |
| 11 | wrapper.appendChild(item); |
| 12 | |
| 13 | wrapper.classList.add('glide__track'); |
| 14 | wrapper.setAttribute('data-glide-el', 'track'); |
| 15 | |
| 16 | // Second Parent. |
| 17 | const parentwrap = wrapper.parentNode; |
| 18 | const wrapperParent = document.createElement('div'); |
| 19 | |
| 20 | parentwrap.replaceChild(wrapperParent, wrapper); |
| 21 | wrapperParent.appendChild(wrapper); |
| 22 | wrapperParent.classList.add('glide'); |
| 23 | |
| 24 | // Options |
| 25 | carouselType = item.getAttribute('data-type') ? item.getAttribute('data-type') : 'carousel'; |
| 26 | carouselbuttons = item.getAttribute('data-buttons') ? item.getAttribute('data-buttons') : 'bullets'; |
| 27 | carouselView = item.getAttribute('data-view') ? item.getAttribute('data-view') : 4; |
| 28 | carouselAutoplay = item.getAttribute('data-autoplay') ? item.getAttribute('data-autoplay') : 0; |
| 29 | carouselResView = item.getAttribute('data-res-view') ? item.getAttribute('data-res-view') : 1; |
| 30 | |
| 31 | // Add classes |
| 32 | item.classList.add( 'glide__slides', 'glide-' + Math.floor(Math.random() * 1000) ); |
| 33 | for (const child of item.children) { |
| 34 | child.classList.add('glide__slide'); |
| 35 | } |
| 36 | |
| 37 | if ( carouselbuttons == 'bullets' ) { |
| 38 | const bullets = document.createElement('div'); |
| 39 | bullets.classList.add('glide__bullets'); |
| 40 | bullets.setAttribute('data-glide-el', 'controls[nav]'); |
| 41 | |
| 42 | for (let i = 0; i < item.children.length; i++) { |
| 43 | const bullet = document.createElement('button'); |
| 44 | bullet.classList.add('glide__bullet'); |
| 45 | bullet.setAttribute('data-glide-dir', '=' + i); |
| 46 | bullets.appendChild(bullet); |
| 47 | } |
| 48 | |
| 49 | wrapperParent.appendChild(bullets); |
| 50 | } |
| 51 | |
| 52 | if ( carouselbuttons == 'arrows' ) { |
| 53 | const arrows = document.createElement('div'); |
| 54 | arrows.classList.add('glide__arrows'); |
| 55 | arrows.setAttribute('data-glide-el', 'controls'); |
| 56 | arrows.innerHTML = '<button class="glide__arrow glide__arrow--left glide__arrow glide__arrow--left" data-glide-dir="<"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 1L1 6L6 11" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="glide__arrow glide__arrow--right glide__arrow glide__arrow--right" data-glide-dir=">"><svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 11L6 6L1 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>'; |
| 57 | wrapperParent.appendChild(arrows); |
| 58 | } |
| 59 | |
| 60 | new Glide( wrapperParent, { |
| 61 | type: carouselType, |
| 62 | perView: carouselView, |
| 63 | startAt: 0, |
| 64 | autoplay: 2000, |
| 65 | gap: 0, |
| 66 | breakpoints: { |
| 67 | 430: { |
| 68 | perView: carouselResView |
| 69 | }, |
| 70 | 600: { |
| 71 | perView: carouselResView |
| 72 | }, |
| 73 | 768: { |
| 74 | perView: carouselResView |
| 75 | }, |
| 76 | } |
| 77 | }).mount(); |
| 78 | }); |
| 79 | } |
| 80 | }); |