So, I have implemented the swipe feature in my pages. I am using Jquery mobile. Here are my HTML codes below:

HTML

Code:
<!-- Start of first page -->
        <div data-role="page" id="one">

	<div data-role="content">	
            <p>Page 1</p>		
            <p><a href="#two">Go to two</a></p>
	</div>
        </div>

<!-- Start of second page -->
        <div data-role="page" id="two">

	<div data-role="content">	
            <p>Page 2</p>		
            <p><a href="#one">Back to one</a></p>
            <p><a href="#hree">Go to three</a></p>
	</div>
        </div>
        
    <!-- Start of third page -->
        <div data-role="page" id="three">

	<div data-role="content">	
            <p>Page 3</p>		
            <p><a href="#two">Back to two</a></p>
	</div>
        </div>
JQuery

Code:
    
$(document).on('pageinit', function(event){
  $('div.ui-page').on("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
      if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide");
      }
  });

  $('div.ui-page').on("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
      $.mobile.changePage(prevpage, "slide", {reverse: true });
    }
  });
});
The functionality is working perfectly. I mean, the pages are swiping to next and back. However, there is a small issue. When I swipe to next page, for example from Page 2 to Page 3, it shows Page 3, then flashes Page 2 and then shows Page 3 again. It seems I am getting this only when I swipe from Page 2 to Page 3.

Why?