asp.net c# slider photo

kadir koçaslan 65 Reputation points
2023-02-15T14:46:21.7033333+00:00

soru2

 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2">
            <ItemTemplate>
                <div class="container">
                    <div class="row row-30">
                        <div class="col-lg-6">
                            <div class="block-decorate-img wow fadeInLeft" data-wow-delay=".2s">
                                <video id="vdtest" class="controlvideo2" src="../video/<%# Eval("Video") %>" autoplay loop muted width="570" height="500"></video>
                            </div>
                        </div>
                        <div class="col-lg-1"></div>
                        <div class="col-lg-5 col-12">
                            <div class="block-sm offset-top-45">
                                <h3 class="" data-wow-delay=".3s"><%# Eval("SirketAdi") %></h3>
                                <p class="offset-xl-40 wow fadeInUp" data-wow-delay=".4s" style="font-size: 15px"><%# Eval("SirketAciklama") %></p>
                                <a class="button-width-190 button-primary button-circle button-lg button offset-top-30" href="<%# Eval("link") %>" target="_blank"><%# Eval("SirketAdi") %></a>
                                <br />
                                <br />
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </ItemTemplate>
        </asp:Repeater>

This code only contains the area marked in red I want to add more than one photo for each company

I want to add multiple photos for each red area added

I am waiting for your support on the subject

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,273 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,279 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Lan Huang-MSFT 25,716 Reputation points Microsoft Vendor
    2023-02-16T09:48:39.97+00:00

    Hi @kadir koçaslan,

    Looking at your blue part, I think you should want a function similar to image slideshow.

    You can try Bootstrap Carousel plugin.

    You can refer to the following example:

    [If you don't want the images to move automatically, just remove: interval: 500]

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                <style type="text/css">
                    .carousel {
                        width: 450px;
                        height: 200px;
                        max-height: 200px !important;
                    }

                    .carousel-content {
                        color: black;
                        display: flex;
                        text-align: center;
                    }
                </style>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('.carousel').carousel({
                            interval: 500
                        });

                        $('.item')[0].className = "item active";
                    });
                </script>
            
</head>
<body>
    <form id="form1" runat="server">
        <div id="myCarousel" align="center" style=" margin:0 auto;" class="carousel slide" data-ride="carousel" data-pause="hover">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <asp:Repeater ID="rptCarousel" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div class="item">
                            <asp:Image ID="Image1" Width="200px" Height="200px" runat="server" ImageUrl='<%# Eval("Image") %>' />
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span> </a>
            </div>
            <div> 
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBCS %>"
    SelectCommand="SELECT* from tbl_Data"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

    Test

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments