massPaging / Auto Switching

Auto Switching

Using the methods and events of plugin, you can gather cool ticker for text or image

String Slider

  • Lorem ipsum dolor.
  • Nullam auctor purus.
  • Integer imperdiet tinciduntr.
  • Integer blandit dignissim.
  • Nulla nec tellus risus.
  • Suspendisse cursus sollicitudin.
  • Source

    <link rel="stylesheet" href="css/massPaging.css">
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery.masspaging.js"></script>
    <script>
    $(window).on('load',function(){
    	var wrap = $('#veryLongContent');
    	var autoId = function(){};
    	var opt = {
    		saveState:false,
    		pageHeight:25,
    		navDotWrapper:'.boxNavDot',
    		pageChange:function(oldPage,newPage){
    			clearTimeout(autoId)
    			var total = wrap.massPaging('getPageTotal');
    			autoId = setTimeout(function(){
    				if(newPage < total){
    					wrap.massPaging('next');
    				}else{
    					wrap.massPaging('first');	
    				}
    			},3000);
    		}
    	}
    	wrap.massPaging(opt);
    })
    </script>
    
    <style>
    	.listSlider { line-height:20px; font-size:16px; text-align:center;}
    	.listSlider li { height:20px; list-style:none;}
    </style>
    
    <div class="listSlider" id="veryLongContent">
    	<li>Lorem ipsum dolor.</li> 
    	<li>Nullam auctor purus. </li>
    	<li>Integer imperdiet tinciduntr.</li> 
    	<li>Integer blandit dignissim.</li> 
    	<li>Nulla nec tellus risus. </li>
    	<li>Suspendisse cursus sollicitudin.</li>
    </div>
    						
    <div align="center" class="boxNavDot"></div>