The way of implementation with Swiper.js
(The following are examples of age)
1 <div class= ' Testtwo ' >2 <p class= ' Agesel ' > Your age is <span class= ' scroage ' > </span > Years </p>3 </div>4 <div class= "Swiper-container" >5 <span Class= "after" ></span>6 <div class= "Swiper-wrapper" >7 </div> 8 </div>
1 varagelen=762 varStrhtml= "
Dynamically generated 0-76 years old3 for(vari=0;i<agelen;i++){4strhtml+= "<div class= ' swiper-slide ' ><span>" +i+ "</span></div>"5 }6$ (". Swiper-wrapper"). Append (strhtml)7 8 varSwiper =NewSwiper ('. Swiper-container '), {9Initialslide:20,//initial age shown at 20 years oldTenPagination: '. Swiper-pagination ', OneSlidesperview:6, ACenteredslides:true, -Paginationclickable:true, -spacebetween:0, theOnInit:function(swiper) { - varlen=$ (". Swiper-slide"). Length - varlenw=$ (". Swiper-slide"). Width () -$ ('. Swiper-wrapper '). Width (len*lenw); + }, -Onslidechangeend:function(swiper) { +$ (". Scroage"). html (' +$ ('. Swiper-slide '). EQ (swiper.activeindex). Find (' span '). HTML () + ") Ascroage=$ ('. Swiper-slide '). EQ (swiper.activeindex). Find (' span '). HTML () at //Console.log ($ ('. Swiper-slide '). EQ (swiper.activeindex). HTML ())//switch at the end, tell me how many slide are now - } -});
Moving end selects age income by scale or scale sliding mode