locked
Carousel Issue RRS feed

  • Question

  • User-527908287 posted

    Hello,
    I am trying to add static labels and textboxes for username and password on a carousel; I want it to be static while the images in the carousel is switching images. here is the code for the webpage where I want the event to occur. where the image of cars is where i want to put my carousel and make it switch while the labels and textboxes remain static.

    On the same page, I want to add facebook, twitter and LinkedIn icon links on the footer as well

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <a class="navbar-brand" href="#" style="color: white">JOSCHECK</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="#" style="color: #FFFFFF">Services</a></li>
                        <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:130px;">
                    <div class="container">
                   <br /><br /> <h1 style="color: red; margin-top:-2.5%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification</h1>               
                </div>
                    </div>
    
            <!--Carousel Start-->
                   <div id="Carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top:-4%">
                       <ol class="carousel-indicators">
                           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                       </ol>
                       <!--wrapper for slides-->
                       <div class="carousel-inner" role="listbox">
                           <div class="item active">
                               <img src="images/homeimg.jpg" alt="..." />
                               <div class="carousel-caption">
                                   <div class="form-horizontal col-md-6" style="margin-right:0%;">
                    <h1 style="font-size:x-large; margin-top:-3%; color:#200662;">Login</h1><hr style="color:#200662";/><br />
                       <div class="form-group">
                           <div class="col-xs-11">
                               <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                               <div class="col-md-3">
                                   <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox>
                               </div>
                           </div>
                       </div>
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label2" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-6">
                            <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Font-Size="larger" Class="btn btn-success" OnClick="Button1_Click" />
                            <br />
                            <asp:Label ID="Label7" runat="server"></asp:Label>
                        </div>
                    </div>
                </div> 
                            </div>
                           </div>
                       </div>     
                       <!--controls-->
                       <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="prev">
                           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                           <span class="sr-only">previous</span>
                       </a>
                       <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="next">
                           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                           <span class="sr-only">next</span>
                       </a>
                       <!--wrapper ends--> 
                       </div>
            <!--Carousel Ends-->
    
            <div class="container">
                <div class="row">
                    <div class="section">
                        <div class="col-md-4">
                            <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">Inclusive Services...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
          <!-- Example row of columns -->
          <div class="row">
              <div class="section">
                  <div class="col-lg-4">
                      <img class="img-circle" src="images/Toyota-2016-Lineup.png" alt="Toyota-2016-Lineup" width="250" height="150"/>
                     <br /><br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Vehicle(s) Verification</h2>
                      <hr />
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
                  </div>
    
              <div class="col-md-4">
                  <img class="img-circle" src="images/phoneimg.png" alt="phoneimg" width="250" height="150"/><br />
                <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone(s) Verification</h2>
                  <hr />
                  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
    
              <div class="col-md-4">
                  <img class="img-circle" src="images/BarCode img.png" alt="BarCode img" width="250" height="150"/><br />
                <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">(Product) Bar Code & QR Code Verification</h2>
                  <hr />
                  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
          </div>
            </div>
    
            <hr /><footer class="container" style="background-color:black; width:auto; height:100px;">
                    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="About.aspx">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    

    Monday, March 16, 2020 12:12 PM

All replies

  • User475983607 posted

    Use standard CSS like float left or right, z-index, and HTML.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Homepage.aspx.cs" Inherits="WebFormsDemo.Homepage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
        <link href="Content/Site.css" rel="stylesheet" />
    
    </head>
    <body style="background-color: #DCDCDC; background-image: url('images/Dox.png'); overflow-x: hidden;">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" style="border: 1px solid green; background-color: white;">
                <div class="carousel-item active" style="z-index: 1;">
                    <img class="d-block w-100" src="..." alt="First slide" />
                </div>
                <div class="carousel-item" style="z-index: 1;">
                    <img class="d-block w-100" src="..." alt="Second slide" />
                </div>
                <div class="carousel-item" style="z-index: 1;">
                    <img class="d-block w-100" src="..." alt="Third slide" />
                </div>
                <div style="float: right; border: 1px solid pink; margin: 5px; padding: 5px; z-index: 100; background-color: grey;">
                    <form id="form1" runat="server">
                        <div>
                            <asp:TextBox ID="Username" runat="server"></asp:TextBox>
                        </div>
                        <div>
                            <asp:TextBox ID="Password" runat="server"></asp:TextBox>
                        </div>
                        <div>
                            <asp:Button ID="Login" runat="server" Text="Button" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
    </html>

    Monday, March 16, 2020 1:48 PM
  • User1535942433 posted

    Hi Donald416,

    Accroding to your description,I suggest you could use bootstrap Carousel  to carousel image and show text use carousel-caption.

    Besides, I suggest you could use HyperLink to link to another page.

    More details,you could refer to below codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <a class="navbar-brand" href="#" style="color: white">JOSCHECK</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="#" style="color: #FFFFFF">Services</a></li>
                        <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:130px;">
                    <div class="container">
                   <br /><br /> <h1 style="color: red; margin-top:-2.5%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification</h1>               
                </div>
                    </div>
    
            <!--Carousel Start-->
                   <div id="Carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top:-4%;text-align:center">
                       <ol class="carousel-indicators">
                           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                       </ol>
                       <!--wrapper for slides-->
                       <div class="carousel-inner" style="height:300px; margin-left:12%">
                           <div class="item active">
                               <img src="image/chicago.jpg" alt="..."/>
                               </div>
                           
                               <div class="carousel-caption">
                                   <div class="form-horizontal col-md-6" style="margin-right:0%;">
                    <h1 style="font-size:x-large; margin-top:-3%; color:#DCDCDC;">Login</h1><hr style="color:#200662";/><br />
                       <div class="form-group">
                           <div class="col-xs-11">
                               <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                               <div class="col-md-3">
                                   <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox>
                               </div>
                           </div>
                       </div>
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label2" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-6">
                            <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Font-Size="larger" Class="btn btn-success" />
                            <br />
                            <asp:Label ID="Label7" runat="server"></asp:Label>
                        </div>
                    </div>
                </div> 
                            </div>
                           <div class="item">                       
                               <img src="image/chicago.jpg" alt="Chicago" />
                           </div>
                           <div class="item">
                               <img src="image/chicago.jpg" alt="New York" />
                           </div>
                       </div>     
                       <!--controls-->
                       <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="prev">
                           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                           <span class="sr-only">previous</span>
                       </a>
                       <a class="right carousel-control" href="#Carousel-example-generic" role="button" data-slide="next">
                           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                           <span class="sr-only">next</span>
                       </a>
                       <!--wrapper ends--> 
                       </div>
            <!--Carousel Ends-->
    
            <div class="container">
                <div class="row">
                    <div class="section">
                        <div class="col-md-4">
                            <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">Inclusive Services...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
          <!-- Example row of columns -->
          <div class="row">
              <div class="section">
                  <div class="col-lg-4">
                      <img class="img-circle" src="images/Toyota-2016-Lineup.png" alt="Toyota-2016-Lineup" width="250" height="150"/>
                     <br /><br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Vehicle(s) Verification</h2>
                      <hr />
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
                  </div>
    
              <div class="col-md-4">
                  <img class="img-circle" src="images/phoneimg.png" alt="phoneimg" width="250" height="150"/><br />
                <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone(s) Verification</h2>
                  <hr />
                  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
    
              <div class="col-md-4">
                  <img class="img-circle" src="images/BarCode img.png" alt="BarCode img" width="250" height="150"/><br />
                <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">(Product) Bar Code & QR Code Verification</h2>
                  <hr />
                  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
          </div>
            </div>
    
            <hr /><footer class="container" style="background-color:black; width:auto; height:100px;">
                    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="About.aspx">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
                <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/image/download.jpg" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      
        <!-- Include all compiled plugins (below), or include individual files as needed -->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </body>
    </html>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, March 17, 2020 6:12 AM
  • User2041008840 posted

    Please use Slider.js for carousel its so easy to  use 
    its has so many options and its free too

    Tuesday, March 17, 2020 5:09 PM