"Combining ASP Repeater with JQuery Carousel for a Seamless User

Incorporating ASP Repeater into a JQuery Carousel, similar to the example provided in this link, has proven challenging. Despite adding all necessary references and links to my .aspx page, the code implementation is not displaying as expected: 

    <

div class="head">
        <h1>Movies</h1> 
       </div>
       <div class="track example-5">
         <div class="inner">
           <h2>Record found: 23</h2>
            <div class="view-port">

            <asp:Repeater ID="Repeater1" runat="server"  >
                        <itemtemplate>                     
            <div id="example-5" class="slider-container">
                                <div class="item">
                                        <%# Eval("Link") %> <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                       </div>                                                                        </div>
  </itemtemplate>  
 </asp:Repeater>    
 </div>
<div class="actions button-group">
 <a href="#" class="button primary icon reload">Restart</a>
           </div>
         </div>
         <div class="pagination">
          <a href="#" class="prev disabled"></a>
          <a href="#" class="next disabled"></a>
         </div>
       </div>

Attempting to utilize the Repeater within the ITEM of the Carousel results in empty displays. When using image links instead, it functions properly: 

 <div class="track example-5">
 <div class="inner">
  <h2>Css3 Animation</h2>
  <div class="view-port">
    <div id="example-5" class="slider-container">
      <div class="item">
        <img src="http://ib1.huluim.com/video/60044632?size=220x124">
        <p>Trailer 1</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60063785?size=220x124">
        <p>Trailer 2</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60062745?size=220x124">
        <p>Trailer 3</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/40050156?size=220x124">
        <p>Trailer 4</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60066740?size=220x124">
        <p>Trailer 5</p>
      </div>
      <div class="item">
        <img src="http://ib4.huluim.com/video/60062747?size=220x124">
        <p>Trailer 6</p>
      </div>
      <div class="item">
        <img src="http://ib3.huluim.com/video/60062746?size=220x124">
        <p>Trailer 7</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60062744?size=220x124">
        <p>Trailer 8</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60060717?size=220x124">
        <p>Trailer 9</p>
      </div>
    </div>
  </div>
  <div class="actions button-group">
    <a href="#" class="button primary icon reload">Restart</a>
  </div>
 </div>
 <div class="pagination">
  <a href="#" class="prev disabled"></a>
  <a href="#" class="next disabled"></a>
    </div>
   </div>
javascriptjqueryhtmlcssasp.net

Answer №1

Here's a suggestion to improve the code structure: move the example-5 div outside of the repeater to avoid having multiple divs with the same id. In the example provided, there is only one instance of that div:

<div class="head">
    <h1>Movies</h1> 
</div>

<div class="track example-5">
    <div class="inner">
        <h2>Record found: 23</h2>
        <div class="view-port">
            <div id="example-5" class="slider-container">
                <asp:Repeater ID="Repeater1" runat="server"  >
                    <itemtemplate>                     
                        <div class="item">
                            <%# Eval("Link") %> 
                            <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                     
                        </div>                                                                        
                    </itemtemplate>  
                </asp:Repeater>  
            </div>  
        </div>
        <div class="actions button-group">
            <a href="#" class="button primary icon reload">Restart</a>
        </div>
    </div>
    <div class="pagination">
        <a href="#" class="prev disabled"></a>
        <a href="#" class="next disabled"></a>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to label system classes or methods as outdated in C#?

Can the Obsolete attribute be applied to system classes or methods? If yes, what is the process? If not, is there a way to configure Visual Studio to flag specific code structures? My goal is to deprecate the use of Session/Session["key"] in favor of a po ...

c#asp.netvisual-studio

What is the best way to display real-time search results from an AJAX call in a format similar

I have a dynamic live search feature using Ajax that successfully fetches the necessary data. However, I'm struggling to display the results in a format similar to Google or YouTube (this is my first attempt at implementing a live search function). I ...

jqueryajax

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

htmlcss

The initial UI did not match the server-rendered content, resulting in a Next.JS Hydration failure

I'm facing an issue with hydration in Next.JS 14, where there is a discrepancy between the server-side rendered UI and the client-side rendering. I have a suspicion that this problem may stem from using new Date(), which could be producing different v ...

javascripttypescriptnext.jsserver-side-rendering

Increase the value by one of the number enclosed in the <h3> element

I have a variable number of <h3> tags with the same class .love_nummer <h3 class="love_nummer">1</h3> Each of these tags contains a number, and alongside each .love_nummer tag is another tag with the class .give_love <h3 class="give ...

jqueryhtmlnumbers

Transmit information between controllers during pageload in AngularJS without utilizing $rootscope

I currently have 2 controllers set up as follows: app.controller('ParentMenuController', function ($scope,MenuService) { $scope.contentLoaded = false; $scope.showButton = false; $scope.showButton = MenuService ...

javascriptangularjs

redux reducer failing to update state within store

I am completely new to redux and still have a lot to learn. I am currently working on a project that requires setting up a redux store and using state from that store. However, as I try to update the state through a reducer, the code fails to work properly ...

javascriptreactjsreduxreact-redux

Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this ...

htmlcsstwitter-bootstrap

Place a JavaScript code block within a designated div container

I'm currently working on revamping the appearance of the header area for this website. My goal is to replace the background image with a rectangular JavaScript ad positioned to the right of the logo. However, I've encountered difficulty due to th ...

htmlcsslayout

The value returned by data-id remains consistent

When interacting with an API and using AJAX to retrieve a list of available coaches in a specific area, I encounter an issue. Each coach's details (such as firstname, picture, and email) are displayed in a div element through a foreach loop. However, ...

javascriptphpajax

How to retrieve a hidden input element using the FindControl method

In my endeavor to retrieve the value of a hidden input in the code behind, I encountered an issue while trying to cast it. Can someone offer guidance on how to resolve this? ((HtmlControl)FindControl("contentId")) The declaration in my aspx file looks li ...

c#asp.net

What is the best way to create a linear flow when chaining promises?

I am facing an issue with my flow, where I am utilizing promises to handle the process. Here is the scenario: The User clicks a button to retrieve their current position using Ionic geolocation, which returns the latitude and longitude. Next, I aim to dec ...

javascriptangulartypescriptionic-frameworkpromise

Tips on setting up a dropzone upload feature with a click-trigger option

Is there a way to configure dropzone.js so that the file is uploaded only when a submit button is clicked, rather than automatically? Here's the code snippet I am currently using: $('#myDropzone').dropzone({ url: SITE_URL + 'self_r ...

javascriptphpjquery

Emulating an Ajax request

I am struggling with incorporating a button that has three states - initial, loading, and success/failure - into my code. Specifically, I want the button to display a "tick" symbol and a success message after a timed-out ajax call. The HTML code below sho ...

javascriptajaxbackbone.js

Please view the file by accessing exclusively mydomain_name/filename.html

I am looking for a way to block access to specific URLs on my domain and redirect them to another page. The user should still see the original URL in the address bar, and all styles and scripts need to function properly. Can someone help me achieve this? ...

phphtml.htaccess

Using ASP.NET authentication in a Windows Forms application

After conducting a search on Google for "ASP.NET authentication from a Windows Forms application," I was presented with results for "Windows Authentication using ASP.NET," which does not align with my current needs. Current Situation: I am working with a ...

c#asp.net.netwcfauthentication

Perform actions while HTML5 video is in progress

I've been attempting to trigger a simple function when an HTML5 video hits a specific second mark, but so far I haven't had any success. I'm reaching out for assistance and guidance. Below is the code I have been working with: jQuery(functi ...

javascriptjqueryhtml5-video

Debounce fails to honor the specified timeout period

I'm currently working on implementing a debounce function to handle an HTTP request function. The code is very similar to the example provided below, with only minor changes in function names. To start off, here's the debounce function I am usin ...

javascriptreactjsdebouncing

What could be causing the browser to become unresponsive when making several AJAX requests to the same ASP.NET MVC action at once?

The other day, I posed this query: Why is $.getJSON() causing the browser to block? I initiated six jQuery async ajax requests simultaneously on the same controller action. Each request takes around 10 seconds to complete. Upon tracking and logging re ...

javascriptjqueryasp.net-mvcajaxasp.net-mvc-2