加载方法后的页面滑块不起作用

Question

我正在尝试在$ .load（）方法之后创建一个产品滑块，但是它不起作用。

我正在#main div中加载外部页面

$(".product").on("click", function (e){ 
    $("#main").load("products.html"); 
});

/ * products.html * /

<div id="p1" class="page active">
    <a href="#" class="product">
        <div class="slide-continer">
          <a class="prev"><i class="fa fa-chevron-left"></i></a>
          <img class="card-img" src="img1.jpg"></img>
          <a class="next"><i class="fa fa-chevron-right"></i></a>
          <button>P1<i class="fas fa-shopping-cart rodona"></i></button>
        </div>
    </a>    
</div>
<div id="p2" class="page">
    <a href="#" class="product">
        <div class="slide-continer">
          <a class="prev"><i class="fa fa-chevron-left"></i></a>
          <img class="card-img" src="img2.jpg"></img>
          <a class="next"><i class="fa fa-chevron-right"></i></a>
          <button>P2<i class="fas fa-shopping-cart rodona"></i></button>
        </div>

    </a>
</div>

/ *上一个和下一个按钮* /

$(".prev").on("click", function(){
            console.log("going to prev");
            var currentPage = $(".page.active");
            var prevPage = currentPage.prev();
            currentPage.fadeOut(300).removeClass(".active");
            prevPage.fadeIn(300).addClass(".active");

            if(prevPage.lenght ==0){
                $(".page").last().fadeIn(300).addClass(".active");
            }
        });

$(".next").on("click", function(){
            console.log("going to next");
            var currentPage = $(".page.active");
            var nextPage = currentPage.next();
            currentPage.fadeOut(300).removeClass(".active");
            nextPage.fadeIn(300).addClass(".active");

            if(nextPage.lenght ==0){
                $(".page").first().fadeIn(300).addClass(".active");
            }
        });

当我单击下一个或上一个非操作启动时。 你能帮忙吗？