javascript JS：自定义幻灯片与分页

Posted 2021-05-03

// Used on Half-Earth Single Story Page

function storySlides() {
	var storyContentCol = $( '.single-story__content-col' );
	var btnNext = $('.single-story__slide-navigation .btn-next');
	var btnPrev = $('.single-story__slide-navigation .btn-prev');
	var totalSlides = storyContentCol.find( '.slide' ).length; // get the total slides
	storyContentCol.find( '.total-slides' ).text( totalSlides ); // set the total slides count
	var currentSlide = storyContentCol.find('.slide.js-active');
	var currentSlideID = 1;

	function changeSlides( btnClick ) {
		currentSlide = $('.slide.js-active');
		currentSlideID = parseInt( currentSlide.data('id') ); // get the ID
		storyContentCol.find( '.current-slide' ).text( currentSlideID ); // set the current slide number
		if ( currentSlideID == totalSlides ) {
			console.log('equal');
			btnNext.addClass('js-disabled').attr('disabled', true);
		} else {
			console.log('else equal');
			btnNext.removeClass('js-disabled').attr('disabled', false);
		}
		if ( currentSlideID == 1 ) {
			btnPrev.addClass('js-disabled').attr('disabled', true);
		} else {
			btnPrev.removeClass('js-disabled').attr('disabled', false);
		}
		if ( btnClick == 'next' ) {

		}
		if ( btnClick == 'prev' ) {

		}
	}

	// Btn Next
	btnNext.on('click', function(e) {
		currentSlide.removeClass('js-active').next('.slide').addClass('js-active');
		changeSlides( 'next' );
	});

	// Btn Prev
	btnPrev.on('click', function(e) {
		currentSlide.removeClass('js-active').prev('.slide').addClass('js-active');
		changeSlides( 'prev' );
	});
}
storySlides();