Slider not working

JavaScript
1

For some reason my slider isn’t working… i am trying to create a slider with navigation dots but it is not loading.

My HTML:

		<section class="section section--slider section--light">
			<div class="wrap section__wrap">

				<div class="slidercontainer">
					<div class="contentslider">

						<div class="slide">
							<div class="row center-lg">
								<div class="col-xs-12 col-sm-12 col-md-4 col-lg-12">
									<img class="slide__image" src="img/BND-collectief-pensioen.png" alt="" />
								</div>
							</div>
						</div>

						<div class="slide">
							<div class="row center-lg">
								<div class="col-xs-12 col-sm-12 col-lg-12">
									<img class="slide__image" src="img/BND-contact.png" alt="" />
								</div>
							</div>
						</div>

						<div class="slide">
							<div class="row center-lg">
								<div class="col-xs-12 col-sm-12 col-lg-12">
									<img class="slide__image" src="img/BND-financieel-adviseur.png" alt="" />
								</div>
							</div>
						</div>

					</div>

					<div class="slidenavigation"></div>
				</div>

			</div>
		</section>

My JS:

(() => {

	let slides = document.querySelectorAll('.slides'),
		sliderContent = document.querySelector('.contentslider'),
		sliderNavigation = document.querySelector('.slidenavigation'),
		sliderContainer = document.querySelector('.slidercontainer'),
		sliderContentWidth = 0,
		sliderContainerWidth = 0;

		// slideToPos = 0,
		// currentSlide = 0,
		// numOfSlides = slides.length-1,
		// slideTimer = 0,
		// timerSeconds = 4;

		// const debounce = (func, wait, immediate) => {
		// 	let timeout;
		// 	return () => {
		// 		const context = this;
		// 		const later = function() {
		// 			timeout = null;
		// 			if (!immediate) {
		// 				func.apply(context);
		// 			}
		// 		};
		// 		const callNow = immediate && !timeout;
		// 		clearTimeout(timeout);
		// 		timeout = setTimeout(later, wait);
		// 		if (callNow) {
		// 			func.apply(context);
		// 		}
		// 	};
		// };

		// function setSlideTimer() {
		// 	// Switch position on interval
		// 	slideTimer = setInterval(function(){
		// 		moveSlide();
		// 	}, timerSeconds*1000);
		// }

		// function moveSlide(whichSlide) {
		// 	if(whichSlide !== undefined) {
		// slideTimer = 0,
		// 		clearInterval(quoteTimer);
		// 		currentSlide = whichSlide;
		// 		slideToPos = "-"+(whichSlide*containerWidth);
		// 	} else if(currentSlide === numOfSlides) {
		// 		currentSlide = 0;
		// 		slideToPos = 0;
		// 	} else {
		// 		currentSlide++;
		// 		slideToPos = "-"+(currentSlide*containerWidth);
		// 	}

		// 	slider.style.left = slideToPos+"px";

		// 	// Set active navigation item
		// 	document.querySelector(".quotenavigation__item--active").classList.remove('quotenavigation__item--active');
		// 	document.getElementById("quote"+currentQuote).classList.add("quotenavigation__item--active");
		// }

		function initContentSlider() {
			console.log('blaat');
			[].forEach.call(slides, (slide, index) => {
				sliderContainerWidth = sliderContainer.offsetWidth;
				slide.className += ' slide' + index;
				slide.style.width = sliderContainerWidth + 'px';
				sliderContentWidth += sliderContainerWidth;

				let newSlideDot = document.createElement('span');
				newSlideDot.id = 'slide' + index;
				newSlideDot.className = 'slidernavigation__item';
				if(index === 0) {
					newSlideDot.className += ' slidernavigation__item--active';
				}
				sliderNavigation.appendChild(newSlideDot);

				document.getElementById('slide'+index).addEventListener('click', function () {
					// moveSlide(index);
				});

				sliderContent.style.width = sliderContentWidth+"px";
				sliderContent.style.left = "0px";

				// setSlideTimer();

			});
		}

		// function reinitSlider() {
		// 	[].forEach.call(quotes, (slides, index) => {
		// 		// Set widths
		// 		sliderContainerWidth = sliderContainer.offsetWidth;
		// 		slide.className += ' slide' + index;
		// 		slide.style.width = sliderContainerWidth + 'px';
		// 		sliderContentWidth = sliderContainerWidth;
		// 	});

		// 	sliderContent.style.width = sliderWidth+"px";
		// 	sliderContent.style.left = "0px";

		// 	slideToPos = 0;
		// 	currentSlide = 0;
		// }


			initContentSlider();

			// window.addEventListener('resize', debounce(() => reinitSlider(), 200, false), false);


})();

can someone please help me?

2

Not really my area but haven’t you added an ‘s’ to .slides in error?

It should be:

let slides = document.querySelectorAll('.slide'),

You don’t have any classes called slides in your html.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.