DaMighty Optiq DaMighty Optiq - 14 days ago 5
jQuery Question

How can I make my paginating script work using custom data attributes in JQUERY?

I'm trying to create a paginating/carousel script triggered by custom data attributes. I'm aiming to make it dynamic so extra slides can be added on without modifying the script.

So far nothing happens when I click on the back and next links. Due to the way I'm trying to make everything interact I'm not sure if the logic I'm using makes any sense. I'm also planning to slide them in and out rather than just toggling the display from block to none, just trying to keep it manageable and get it working before focusing on that part.

Here's the way I have the slides set up in the html with the data attributes.

<section class="page" id="page01" data-page="1">
first section
</section>

<section class="page" id="page02" data-page="2">
second section
</section>

<section class="page" id="page03" data-page="3">
third section
</section>

<section class="page" id="page04" data-page="4">
fourth section
</section>


Here's the script

function pSlide(){

/* links to navigate slides */
var back = $("#back-link");
var next = $("#next-link");

/* collects the count of elements with page class */
var pCount = $(".page").length;

/* points to the visible slide and selects id */
var curPage = $('.page[style*="block"]').attr('id');

/* collects value of custom data attribute from visible slide */
var curPageNo = curPage.data('page');

/* adds or subtracts from the value of data attribute to select slides */
var prePage = curPageNo - 1;
var nexPage = curPageNo + 1;



/* back link */
$(back).click(function(){

/* turns off current slide */
$(curPage).css("display", "none");

/* if the first page is visible select last page */
if (curPageNo == 1){

/* selects page with value of total count */
$(".page").data('page' == pCount).css("style", "block");
}

/* if any slice other than the first one is active */
else{

/* calculates value of previous page */
$(".page").data('page' + prePage).css("style", "block");
}

});

/* same as back link but in reverse to move forwards */
$(next).click(function(){
$(curPage).css("display", "none");

if (curPageNo == pCount){
$(".page").data('page' == 1).css("style", "block");
}
else{
$(".page").data('page' + nexPage).css("style", "block");
}

});
}


Going into this I wasn't sure on exactly how I should attempt to do it but did the best I could come up with. How can I make this work?

here's a fiddle of it

https://jsfiddle.net/Optiq/b5u6to0x/3/

Answer

Here is what I came up with from editing your fiddle. It does not update the paging display, but it does do the page swapping.

jQuery(function($){
	var $pages = $('.page');
  
	function adjustPage(adjustment){
  	var currentPageIndex = $pages.index($('.page.active')),
    	nextPage = (currentPageIndex + adjustment) % $pages.length;
    
    if (nextPage < 0) nextPage = $pages.length - 1;
    
    $pages.removeClass('active').eq(nextPage).addClass('active');
  }
  
	$('#back-link').on('click', function(){ adjustPage(-1) });
  $('#next-link').on('click', function(){ adjustPage(1) });
});
*{
				margin: none;
				padding: none;
			}
			
			body{
				background-color: #333;
			}
			
			header{
				width: 100%;
				height: 4em;
				background-color: #414149;
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			footer{
				width: 100%;
				height: 2.9em;
				background-color: #414149;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			
			
			.foot-nav{
				width: 22%;
				height: 66%;
				background-color: aliceblue;
				margin: .22em auto;
				font-size: 2em;
			}
			
			.page{
				height: 83vh;
				background-color: #777;
				margin: auto;
        display: none;
			}
      
      .page.active {
        display: block;
      }
			
			#back-link{
				float: left;
				margin-left: 17%;
			}
			
			#next-link{
				float: right;
				margin-right: 17%;
			}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 3.8em;"></div>
		
		<section class="page active" id="page01" data-page="1">
			first section
		</section>
		
		<section class="page" id="page02" data-page="2">
			second section
		</section>
		
		<section class="page" id="page03" data-page="3">
			third section
		</section>
		
		<section class="page" id="page04" data-page="4">
			fourth section
		</section>
		
		<footer>
			
			<nav class="foot-nav">
				<span id="back-link" class="page_change">
					&#60;
				</span>
				
				<span>1</span>
				<span>/</span>
				<span>4</span>
				
				<span id="next-link" class="page_change">
					&#62;
				</span>
			</nav>
			
		</footer>

Comments