2
\$\begingroup\$

I created slider on JavaScript(ES2015). And I just want to be sure that I did my slider good. With all best practise and rules nowadays! thank you for help Here is my html:

const allSlides = document.querySelectorAll('.slide'),
	arrows = document.querySelector('.arrows');
let currentSlide = 2;

function reset(dots = document.querySelectorAll('.pagination li')) {
	for ( let i = 0; i < allSlides.length; i++ ) {
		allSlides[i].style.display = 'none';
		dots[i].classList.remove('selected');
	}
	return dots;
}

function createSlider($n) {
	let dots = createSliderPagination(allSlides[$n].parentNode);
	reset(dots);
	allSlides[$n].style.display = 'block';
	dots[$n].classList.add('selected');
}

function createSliderPagination(slider) {
	let pagination = document.createElement('ul');
	pagination.className = "pagination";
	slider.appendChild(pagination);
	allSlides.forEach(function (item, index) {
		let dotWrapper = document.createElement('li'),
			dot = document.createElement('a');
		dotWrapper.addEventListener('click', function (event) {
			event.preventDefault();
			changeSlide(index);
		});
		dot.setAttribute('href', index);
		dotWrapper.appendChild(dot);
		pagination.appendChild(dotWrapper);
	});
	return pagination.childNodes
}

function changeSlide($n = currentSlide, changer = 0) {
	let dots = reset();
	if ( $n === 0 && changer === -1 ) {
		$n = allSlides.length;
		currentSlide = allSlides.length;
	}
	if ( $n === allSlides.length - 1 && changer === 1 ) {
		$n = -1;
		currentSlide = -1;
	}
	allSlides[$n + changer].style.display = 'block';
	dots[$n + changer].classList.add('selected');
	currentSlide = $n + changer;
}


arrows.addEventListener('click', function (e) {

	if ( e.target.classList.contains("next") ) changeSlide(undefined, 1);

	if ( e.target.classList.contains("prev") ) changeSlide(undefined, -1);

});

createSlider(currentSlide);
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{background:#f8f8f8}body{font-size:16px;min-width:320px;position:relative;line-height:1.65;font-family:Arial,sans-serif;overflow-x:hidden;opacity:1;background:#f8f8f8}h1{text-align:center}.slider{position:relative;width:640px;height:436px;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;border:10px solid #fff;text-align:center;-webkit-border-radius:5px;border-radius:5px;z-index:10;-webkit-box-shadow:0 10px 15px 3px rgba(0,0,0,.15),0 5px 20px 3px rgba(0,0,0,.1);box-shadow:0 10px 15px 3px rgba(0,0,0,.15),0 5px 20px 3px rgba(0,0,0,.1)}.slider .slide{height:100%;width:auto}.slider .slide img{width:100%;height:100%}.slider .slide figcaption{position:absolute;top:30px;left:30px}.slider .slide figcaption .title{font-size:50px;color:#2ecc71;text-transform:uppercase;letter-spacing:8px}.slider .slide figcaption .author{font-size:18px;font-weight:300;letter-spacing:3px;color:#fff}.arrows{position:absolute;right:30px;bottom:30px;width:100px;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,.15);box-shadow:0 3px 3px 3px rgba(0,0,0,.15);z-index:10}.arrows .next,.arrows .prev{float:left;width:50%;height:40px;background-color:#fff;text-align:center;line-height:40px;cursor:pointer;-webkit-transition:.3s color ease;-o-transition:.3s color ease;transition:.3s color ease}.arrows .next:hover,.arrows .prev:hover{color:#2ecc71}.pagination{position:absolute;bottom:-50px;left:50%;right:auto;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.pagination li{display:inline-block;float:left;margin:0 5px}.pagination li.selected a{background-color:#2ecc71}.pagination li a{display:block;width:12px;height:12px;-webkit-border-radius:50%;border-radius:50%;border:2px solid #2ecc71;background-color:#fff;overflow:hidden;white-space:nowrap}
<h1>Slider</h1>
<div class="slider">
	<figure class="slide">
		<img src="img/slide1.jpg">
		<figcaption>
			<div class="title">Slide 1</div>
			<div class="author">Diana	Bailey</div>
		</figcaption>
	</figure>
	<figure class="slide">
		<img src="img/slide2.jpg">
		<figcaption>
			<div class="title">Slide 2</div>
			<div class="author">Janie	Payne</div>
		</figcaption>
	</figure>
	<figure class="slide">
		<img src="img/slide3.jpg">
		<figcaption>
			<div class="title">Slide 3</div>
			<div class="author">Kristina	Fitzgerald</div>
		</figcaption>
	</figure>
	<figure class="slide">
		<img src="img/slide4.jpg">
		<figcaption>
			<div class="title">Slide 4</div>
			<div class="author">Beth	Garner</div>
		</figcaption>
	</figure>
	<div class="arrows">
		<div class="prev">&#10094;</div>
		<div class="next">&#10095;</div>
	</div>
</div>

\$\endgroup\$
1
\$\begingroup\$

I think % can save you few lien of code:

function changeSlide($n = currentSlide, changer = 0) {
    let dots = reset();
    currentSlide = ($n + changer) % allSlides.length;
    ~currentSlide || (currentSlide = allSlides.length - 1);

    allSlides[currentSlide].style.display = 'block';
    dots[currentSlide].classList.add('selected');
}

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.