The Swiper control cannot accurately locate the specified page under IE9

Application scenario:

Use the carousel control to display the image files in the table. When the image file in the table is clicked, use the carousel control (Swiper) to display the specified image, and at the same time , you can turn pages left and right and browse all pictures forward and backward.

Implementation ideas:

(1) Use JS to create the torso of Swiper (Swiper is equivalent to the soul, and the soul must be attached to the body to function).

    	__createPreviewHtml: function(){
    		if($('#__sc1').length>0) return;
    		var html = 
    		&#39;<p id="__sc1" class="swiper-container" style="z-index:9999;">&#39; 
    		+ &#39;	<a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>&#39;
    		+ &#39;	<p class="swiper-wrapper">   &#39;
    		+ &#39;</p> &#39;
    		+ &#39;<p class="swiper-pagination"></p>&#39;
    		+ &#39;<p class="swiper-button-prev"></p>&#39;
    		+ &#39;<p class="swiper-button-next"></p>&#39;    	    
    		+ &#39;</p>&#39;;
    		$(document.body).append(html);
    		$(&#39;#__sc_closeBtn&#39;).on(&#39;click&#39;,this.__hidePreviewBox);
    	}

(2) Traverse the image files in the table and insert them into Swiper's torso to obtain the index number (index) and URL of the clicked image file (uniquely identified by the file ID).

        		var index = 0;
        		var i = 0;
        		me._grid.findRow(function(row){ 
        			
    	        	var fileId2 = row.fileId;	
    	            var fileName2 = row.fileName.toLowerCase();
    	            
    	            if(fileName2 && imgReg.test(fileName2)==true){    	          	
    	            	if(fileId == fileId2){
    	            		index = i;
    	            	}
    	            	
    	            	var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2);
    	            	var imgHtml = &#39;<img src="&#39; + picParam + &#39;"/>&#39;;
               	 	 	var $slide = $(&#39;<p class="swiper-slide">&#39; + imgHtml + &#39;</p>&#39;);
               	 	 	$(&#39;.swiper-wrapper&#39;).append($slide);
               	 	 	i++;
    	            }
        		}); 
        		
        		if(typeof(mySwiper) != &#39;undefined&#39;){
        			mySwiper.removeAllSlides();
        		}

(3) Create a Swiper control, and use Swiper's slideTo(index) method to locate the specified position and display the picture.

 //$('.swiper-pagination span').eq(index).trigger('click'); });

The above is the detailed content of The Swiper control cannot accurately locate the specified page under IE9. For more information, please follow other related articles on the PHP Chinese website!