asp.net c# slider photo

Question

asp.net c# slider photo

kadir koçaslan 65

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

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-16T05:23:25.1633333+00:00

Hi @kadir koçaslan,

From your code, you are using <video>, do you want to display multiple images with <video>?

How do you want to display multiple pictures, all on the page?
kadir koçaslan 65 Reputation points

2023-02-16T06:36:52.7233333+00:00

The part marked with red is fixed, but the part marked with blue is the image, so I want to add more than one photo there.
kadir koçaslan 65 Reputation points

2023-02-16T06:39:22.2066667+00:00

Here I am adding the part marked with blue and the part marked with red, so I want to add more than one image for each blue field I add.

1 answer

Your answer

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-16T05:23:25.1633333+00:00

Hi @kadir koçaslan,

From your code, you are using <video>, do you want to display multiple images with <video>?

How do you want to display multiple pictures, all on the page?
kadir koçaslan 65 Reputation points

2023-02-16T06:36:52.7233333+00:00

The part marked with red is fixed, but the part marked with blue is the image, so I want to add more than one photo there.
kadir koçaslan 65 Reputation points

2023-02-16T06:39:22.2066667+00:00

Here I am adding the part marked with blue and the part marked with red, so I want to add more than one image for each blue field I add.

Answer 1

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.

Share via

asp.net c# slider photo

1 answer

Your answer