Show Panoramic Image in ASP.Net Repeater using Pannellum jQuery Plugin

To view panorama images in 360 degree view, I have used - pannellum (JS library)

I have used repeater control to bind image paths which are stored in the database

Frond end code :

<%--pannellum.css reference--%>
<link href="https://cdn.pannellum.org/2.5/pannellum.css" rel="stylesheet">
<section class="section">
    <div class="container">
        <div class="row mb-4 align-items-center">
            <div class="col-md-6" data-aos="fade-up">
                <h2>360 PANEROMA VIEWS</h2>
            </div>
        </div>
    </div>
    <div class="site-section pb-0">
        <div class="container">
            <div class="row align-items-stretch">
                <asp:Repeater runat="server" ID="rpp">
                    <ItemTemplate>
                        <div class="col-md-12 my-4" data-aos="fade-up">
                            <h3 class="h3"><%# Eval("Title") %></h3>
                            <div style="height: 500px;">
                                <div class="panorama" id='<%# "panorama_" + Eval("Srno") %>' style="height: 100%; width: 100%;" 
                                    data-panorama='<%# Eval("OriginalPhoto") %>'></div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <div class="blog-pagination" style="margin-top: 20px">
                <asp:Label ID="lbl1" Style="color: black; margin-bottom: 15px" runat="server"
                    Font-Bold="True" ForeColor="#FF3300"></asp:Label>
                <ul class="pagination_wrap align-center mt-30" style="margin-top: 15px">
                    <asp:Button CssClass="btn btn-warning" Style="background-color: black; border-color: black; color: white; margin-right: 15px" 
                        ID="btnPrevious" runat="server" Text="Previous"
                        OnClick="btnPrevious_Click"></asp:Button>
                    <asp:Button CssClass="btn btn-warning" Style="background-color: black; border-color: black; color: white; margin-right: 15px" 
                        ID="btnNext" runat="server" Text="Next"
                        OnClick="btnNext_Click"></asp:Button>
                </ul>
            </div>
        </div>
    </div>
</section>
<%--js reference--%>
<script src="https://cdn.pannellum.org/2.5/pannellum.js"></script>

<script>
    // Initialize Pannellum viewers
    document.addEventListener("DOMContentLoaded", function () {
        // Get all elements with data-panorama attribute
        var panoramas = document.querySelectorAll("[data-panorama]");
        // Loop through each element and initialize Pannellum viewer
        panoramas.forEach(function (element) {
            pannellum.viewer(element.id, {
                "type": "equirectangular",
                "panorama": element.getAttribute('data-panorama'),
            });
        });
    });
</script>
<script>
    // Initialize Pannellum viewers
    //stimulate button click on load panorama button to improve UI
    document.addEventListener("DOMContentLoaded", function () {
        var loadButtons = document.querySelectorAll(".pnlm-load-button");
        loadButtons.forEach(function (button) {
            // Trigger a click event on each load button
            button.click();
        });
    });
</script>

Back End Code :

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connstr"].ConnectionString);
string strConnString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
string str;
SqlCommand com;
SqlDataAdapter sqlda;
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        bindrepeater();
    }
}


public int CurrentPage
{
    get
    {
        object s1 = this.ViewState["CurrentPage"];
        if (s1 == null)
        {
            return 0;
        }
        else
        {
            return Convert.ToInt32(s1);
        }
    }

    set { this.ViewState["CurrentPage"] = value; }
}

private void bindrepeater()
{
    SqlConnection con = new SqlConnection(strConnString);
    con.Open();
    str = "select * from RSPanaromaPhotos order by Srno DESC";
    com = new SqlCommand(str, con);
    sqlda = new SqlDataAdapter(com);
    ds = new DataSet();
    sqlda.Fill(ds, "Events");
    PagedDataSource Pds1 = new PagedDataSource();
    Pds1.DataSource = ds.Tables[0].DefaultView;
    Pds1.AllowPaging = true;
    Pds1.PageSize = 8;
    Pds1.CurrentPageIndex = CurrentPage;
    lbl1.Text = "Current Page :" + (CurrentPage + 1).ToString() + " of " + Pds1.PageCount.ToString();
    btnPrevious.Enabled = !Pds1.IsFirstPage;
    btnNext.Enabled = !Pds1.IsLastPage;
    rpp.DataSource = Pds1;
    rpp.DataBind();
    con.Close();
}

protected void btnNext_Click(object sender, EventArgs e)
{
    CurrentPage += 1;
    bindrepeater();
}

protected void btnPrevious_Click(object sender, EventArgs e)
{
    CurrentPage -= 1;
    bindrepeater();
}