Home
css
javascript
HTML
1
2
3
4
5
6
〈
〉
CSS
.slider { position: relative; } .frame { width: 100%; position: relative; background-color: #3399ff; min-height: 100px; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; } .slides .js_slide { width: 100%; position: relative; display: inline-block; color: #fff; font-size: 2rem; line-height: 1; text-align: center } .js_prev, .js_next { color: #fff; position: absolute; top: 50%; font-weight: bold; font-size: 1.5rem; margin-top: -1.25rem; cursor: pointer; padding: .25rem; background: rgba(0,0,0,0.15); } .js_prev { left: 0; } .js_next { right: 0; } /* dots */ .dots { margin: 0; padding: 0; text-align: center; position: absolute; width: 100%; } .dots li { background-color: #f2f2f2; border-radius: 5px; box-shadow: inset 1px 1px 1px #888; display: inline-block; height: 10px; width: 10px; margin: 0 5px; cursor: pointer; } .dots li.active { background-color: #3399ff; } .dots li:hover { background-color: #fff; }
JavaScript
document.addEventListener('DOMContentLoaded', () => { const slider = document.querySelector('.js_slider'); const dots = document.querySelector('.dots'); const dot = document.createElement('li'); let slideCount = document.querySelectorAll('.js_slide').length; function handleEvents(evt) { if (evt.type === 'before.lory.init') { for (var i = 0, len = slideCount; i < len; i++) { var clone = dot.cloneNode(); dots.appendChild(clone); } dots.childNodes[0].classList.add('active'); } if (evt.type === 'after.lory.init') { for (var i = 0, len = slideCount; i < len; i++) { dots.childNodes[i].addEventListener('click', function (evt) { lorySlider.slideTo(Array.prototype.indexOf.call(dots.childNodes, evt.target)); }); } } if (evt.type === 'after.lory.slide') { for (var i = 0, len = dots.childNodes.length; i < len; i++) { dots.childNodes[i].classList.remove('active'); } dots.childNodes[lorySlider.returnIndex()].classList.add('active'); } } slider.addEventListener('before.lory.init', handleEvents); slider.addEventListener('after.lory.init', handleEvents); slider.addEventListener('after.lory.slide', handleEvents); var lorySlider = lory(slider, { // infinite: 1, enableMouseEvents: true }); });