Home/ Questions/Q 8576349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:54:18+00:00

I have a annoying issue involving javascript/jquery and asp:ContentPlaceHolders that I can’t seem to

  • 0

I have a annoying issue involving javascript/jquery and asp:ContentPlaceHolders that I can’t seem to solve and I’ve been trying all day.

I have an ASP.NET website with C#. The front page – Default.aspx, has a master page – MasterPage.master. I also have a control – bslider.ascx

I am trying to implement the image slider shown at http://bxslider.com/

The code in my control looks like this

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

<div id="slider1">
    <div>Slide one content</div>
    <div>Slide two content</div>
    <div>Slide three content</div>
    <div>And so on...</div>
</div>

The relevant code in Default.aspx is as follows:

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="sliderContainer">
        <uc4:BSlider ID="slider1" runat="server" />  
    </div>
</asp:Content>

The relevant code in MasterPage.master is as follows:

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

However this does not work, it displays the content of the inner divs but one after another. I have tested this in a standard .html web page and it worked so it must be to do with the ASP.NET side of things.

Can anyone help with this issue?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have solved the problem! It was a conflict between the JQuery library and the BxSlider library.

    It was fixed with the following code:

    <script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    jQuery.noConflict();
    $('#slider1').bxSlider();
});    
</script>

    Kicking myself for not realising that it was a conflict issue. I hope this helps anyone else stuck in a similar situation to me.

    • 0