locked
Carousel Slider could not work with my master page RRS feed

  • Question

  • User-218090889 posted

    Hello friends,

    I am trying to create Carousel Slider ASP.net C# using VS 2012. My project uses a master page. I created the Carousel slider but it would not work.

    So, how do I make it to work with master page?

    Anybody with answer to my issue please help.

    This is my Master page aspx

    <%@ Master Language="C#" AutoEventWireup="true" Inherits="MasterPage" Codebehind="MasterPage.master.cs" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Src="~/Controls/Header.ascx" TagName="Header" TagPrefix="Uc1" %>
    <%@ Register Src="~/Controls/Footer.ascx" TagName="Footer" TagPrefix="Uc2" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head runat="server">
        <title></title>
         
        <link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            
            <div id="header" style="height: 102px">
                <Uc1:Header ID="Header1" runat="server" />
               </div>
                
                <div id="content">
            <table cellpadding="1" cellspacing="1" width="1024px" align="center" class="BlueBorder"
                style="background: White;">
                <tr>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
                       <Uc2:Footer ID="Footer1" runat="server" />
                    </div>
    
           
                     
        </form>
    
        </body>
    </html>
    

    this is the page I want to put Carousel Slider

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Inherits="Login" Codebehind="Login.aspx.cs" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
        <script type="text/javascript" async="async" defer="defer" data-cfasync="false" src="https://mylivechat.com/chatinline.aspx?hccid=59022348"></script>
    
        <table cellpadding="4" cellspacing="4" align="left" style="width: 64%; height: 318px;">
            <tr>
                <td align="center" 
                    style="font-family: 'Courier New', Courier, monospace; font-size: small; color: #2B547E">
                    
    
    <style type="text/css">
    .carousel{
        background: #2f4357;
        margin-top: 20px;
    }
    .carousel .item{
        min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
    }
    .carousel .item img{
        margin: 0 auto; /* Align slide image horizontally center */
    }
    .bs-example{
    	margin: 20px;
    }
    </style>
    
    
    <div class="bs-example">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/examples/images/slide1.png" alt="First Slide">
                </div>
                <div class="item">
                    <img src="/examples/images/slide2.png" alt="Second Slide">
                </div>
                <div class="item">
                    <img src="/examples/images/slide3.png" alt="Third Slide">
                </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
        <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
              <br />
                    <br />
                    </td>
            </tr>
        </table>
    </asp:Content>
    
    Tuesday, November 21, 2017 1:35 PM

Answers

  • User-1838255255 posted

    Hi Enzyme,

    According to your description, I tested your code and modify your code in my side ,I make it works, please check:

    Sample Code:

    Master Page Code:

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="header" style="height: 102px">
                </div>
    
                <div id="content">
                    <table cellpadding="1" cellspacing="1" width="1024px" align="center" class="BlueBorder"
                        style="background: White;">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </body>

    Page Code:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site4.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebSite.WebForm1" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script type="text/javascript" async="async" defer="defer" data-cfasync="false" src="https://mylivechat.com/chatinline.aspx?hccid=59022348"></script>
    
        <table cellpadding="4" cellspacing="4" align="left" style="width: 64%; height: 318px;">
            <tr>
                <td align="center" style="font-family: 'Courier New', Courier, monospace; font-size: small; color: #2B547E">
                    <style type="text/css">
                        .carousel {
                            background: #2f4357;
                            margin-top: 20px;
                        }
    
                            .carousel .item {
                                min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
                            }
    
                                .carousel .item img {
                                    margin: 0 auto; /* Align slide image horizontally center */
                                }
    
                        .bs-example {
                            margin: 20px;
                        }
                    </style>
                    <div class="bs-example">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                            <!-- Carousel indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for carousel items -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="/examples/images/slide1.png" alt="First Slide">
                                </div>
                                <div class="item">
                                    <img src="/examples/images/slide2.png" alt="Second Slide">
                                </div>
                                <div class="item">
                                    <img src="/examples/images/slide3.png" alt="Third Slide">
                                </div>
                            </div>
                            <!-- Carousel controls -->
                            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
                    <br />
                    <br />
                </td>
            </tr>
        </table>
    </asp:Content>

    Result:

    Because I don't have image to test, so it show null in page, but work.

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 22, 2017 6:09 AM