Geek Answers Handbook

Loading data from a repeater in asp.net in a content slider?

I am creating a content slider in which information is retrieved from a table in an asp.net relay. I can load data, but when the page loads, it does not give me a frequent way to load. Later it starts to load smoothly, but at first it shows all the values ​​contained in DataSetand they are displayed one by one.

language: lang-js

$("#slideshowinfo > div:gt(0)").hide();
            setInterval(function () {
                $('#slideshowinfo > div:first')

                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshowinfo');

            }, 10000);

.aspx Page

<div id="templatemo_banner_content">
                            <div id="slideshowinfo">
                                <asp:Repeater ID="rptrNewsUpdates" runat="server">
                                    <ItemTemplate>
                                <div>
                                   <div class="header_01"><asp:Label ID="lblNewsHeading" runat="server" Text='<% #Eval("OrgName") %>' /></div>
                                   <p><asp:Label Id="lblNewsDescription" runat="server" Text='<%# string.Concat("Last Date:  ",Eval("Last Date"),"<br/>","Total Post: ",Eval("TotalPost"),"<br/>","Eligibility: ",Eval("Eligibility"),"<br/>","Description: ",Eval("description")) %>' /></p>
                                    <div class="button_01"><asp:LinkButton ID="linkReadMore" runat="server" PostBackUrl='<%# Eval("url") %>'>Read more</asp:LinkButton></div>
                                </div>
                                        </ItemTemplate>
                                    </asp:Repeater>                             
                            </div>
                        </div>

.cs Code

rptrNewsUpdates.DataSource = ds.Tables[0];
rptrNewsUpdates.DataBind();

Display on user screen enter image description here

+4
source share
1 answer

jQuery Slide Show, , , . - (, ). JavaScript, , , . , CSS, , , . Repeater, , - ( , .

, , ASP.Net, .

:

<html>
<head>
  <!--these style rules should be moved to a separate file -->
  <style type="text/css">
    .slideshow .pane {
      display: none;
    }
    .slideshow .pane.active {
      display: block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  <!--
  This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
  by refining the JS supplied in the question.

  This modified code is not production grade.

  Assumptions:
  -If multiple slide shows on a page, they rotate at the same time
  -No slideshow controls.

  -->
  <script type="text/javascript">

  (function($) {

    setInterval(function () {
        var fadeSpeed = 1000;

        $(".slideshow").each(function(){
          var $this = $(this);
          var $activeSlide = $this.find('div.active');
          var $nextSlide = $activeSlide.next();

          if($nextSlide.length == 0) {
            $nextSlide = $this.find("div.pane:first");
          }

          $activeSlide.fadeOut(fadeSpeed, function() {
            $(this).removeClass("active");
            $nextSlide.fadeIn(fadeSpeed).addClass("active");
          });


        });


    }, 10000);

  })(jQuery);

  </script>
</head>

<body>
<h1>Slide Show Example</h1>

  <div id="templatemo_banner_content">
    <h2>Slide Show 1</h2>
        <div class="slideshow">
          <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
          <div class="pane active">

              <div class="header_01">Org Name 1</div>
               <p>Description 1</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>
          <div class="pane">

              <div class="header_01">Org Name 2</div>
               <p>Description 2</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>

        </div>

      <h2>Slide Show 2</h2>

      <div class="slideshow">
        <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
        <div class="pane active">

            <div class="header_01">Org Name 3</div>
             <p>Description 3</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>
        <div class="pane">

            <div class="header_01">Org Name 4</div>
             <p>Description 4</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>

      </div>

</div>

</body>

</html>
+1

More articles:


All Articles