locked
After using jcarousel with repeater ,then width of repeater is not getting large RRS feed

  • Question

  • User-367318540 posted

    i used jcarousel with repeater in asp.net html,due to jcarousel repeater size got small https://ibb.co/mtHjfxq  ,highlighted with red line,below is html of that page

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="WebApplication21.home" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
        <link rel="Stylesheet" href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" />
             <link href="css/carsosel.css" rel="stylesheet" />
        <script type="text/javascript">
    
            $(function () {
                $('[id*=mycarousel]').jcarousel({
                    auto: true,
                    animation: 'slow',
                    wrap: 'circular',
                    width: 'auto',
                    scroll: 1 // No of Image To Slide on click of next and previous button.
    
                });
    
            });
    
        </script>
     
    
        <div class="header_slide">
    			<div class="header_bottom_left">				
    				<div class="categories">
    				  <ul>
    				  	<h3>Categories</h3>
    				      <asp:Repeater ID="Repeater1" runat="server">
                              <ItemTemplate>
                                  <li>
                                                 <asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("cat_name")%>' NavigateUrl='<%# Eval("cat_id","~/View/User/product.aspx?view={0}") %>' ></asp:HyperLink>
                                      </li>
                              </ItemTemplate>
    				      </asp:Repeater>
                          <li>
                              <h3>
                                  <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" Text="LogOut" Style="background-color:aliceblue"></asp:LinkButton>
                              </h3>
                          </li>
    				  </ul>
    				</div>					
    	  	     </div>
    					 <div class="header_bottom_right">					 
    					 	 <div class="slider">					     
    							 <div id="slider">
    			                    <div id="mover">
    			                    	<div id="slide-1" class="slide">			                    
    									 <div class="slider-img">
    									     <a href="preview.html"><img src="images/slide-1-image.png" alt="learn more" /></a>									    
    									  </div>
    						             	<div class="slider-text">
    		                                 <h1>Clearance<br><span>SALE</span></h1>
    		                                 <h2>UPTo 20% OFF</h2>
    									   <div class="features_list">
    									   	<h4>Get to Know More About Our Memorable Services Lorem Ipsum is simply dummy text</h4>							               
    							            </div>
    							             <a href="preview.html" class="button">Shop Now</a>
    					                   </div>			               
    									  <div class="clear"></div>				
    				                  </div>	
    						             	<div class="slide">
    						             		<div class="slider-text">
    		                                 <h1>Clearance<br><span>SALE</span></h1>
    		                                 <h2>UPTo 40% OFF</h2>
    									   <div class="features_list">
    									   	<h4>Get to Know More About Our Memorable Services</h4>							               
    							            </div>
    							             <a href="preview.html" class="button">Shop Now</a>
    					                   </div>		
    						             	 <div class="slider-img">
    									     <a href="preview.html"><img src="images/slide-3-image.jpg" alt="learn more" /></a>
    									  </div>						             					                 
    									  <div class="clear"></div>				
    				                  </div>
    				                  <div class="slide">						             	
    					                  <div class="slider-img">
    									     <a href="preview.html"><img src="images/slide-2-image.jpg" alt="learn more" /></a>
    									  </div>
    									  <div class="slider-text">
    		                                 <h1>Clearance<br><span>SALE</span></h1>
    		                                 <h2>UPTo 10% OFF</h2>
    									   <div class="features_list">
    									   	<h4>Get to Know More About Our Memorable Services Lorem Ipsum is simply dummy text</h4>							               
    							            </div>
    							             <a href="preview.html" class="button">Shop Now</a>
    					                   </div>	
    									  <div class="clear"></div>				
    				                  </div>												
    			                 </div>		
    		                </div>
    					 <div class="clear"></div>					       
    		         </div>
    		      </div>
    		   <div class="clear"></div>
    		</div>
       
     <div class="main">
        <div class="content">
        	<div class="content_top">
        		<div class="heading">
        		<h3>New Products</h3>
        		</div>
        		<div class="see">
        			<p><a href="">See all Products</a></p>
        		</div>
        		<div  class="clear"></div>
        	</div>
    	      <div  class="section group" >
                  <ul id="mycarousel" style="width:300px"  class="jcarousel-skin-tango" }    >
    
    				<asp:Repeater ID="Repeater2"  runat="server" >
                
                <ItemTemplate>
                     <li >
                       <div  style="float:left;width:100%">
    					 <%--<a href=""><img src="../../images/slide-3-image.jpg" alt="" style="width:250px;height:250px" /></a>--%>
                           <asp:Image ID="Image1" runat="server"  style="width:220px;height:250px"   ImageUrl='<%# Eval("pro_image")%>'  />
    
    					 <h2> <p><span class="rupees"><asp:Label ID="Label2" runat="server"  Text='<%# Eval("pro_name")%>'></asp:Label></span></p></h2>
    					<div class="price-details">
    				       <div class="price-number">
    							<p><span class="rupees">PKR<asp:Label ID="Label1" runat="server"  Text='<%# Eval("pro_price")%>'></asp:Label></span></p>
    					    </div>
    					       		<div class="add-cart">								
    									<%--<h4><a href="preview.html">Add to Cart</a></h4>--%>
                                          
                                         <h4>  <asp:HyperLink ID="HyperLink1" runat="server"  NavigateUrl='<%# Eval("pro_id","~/View/User/productdetails.aspx?view={0}") %>'>View Details</asp:HyperLink>
    							     </h4>
                                             </div>
    							 <div class="clear"></div>
    					</div>
    					 
    				</div>
                       </li>
                </ItemTemplate>
                
            </asp:Repeater>
                    </ul>
            </div>
    					
    <%--					       		<div class="add-cart">								
    									<h4><a href="preview.html">Add to Cart</a></h4>
    							     </div>--%>
    							 <div class="clear"></div>
    					</div>				     
    			
    			</div>
    			<div class="content_bottom">
        		<div class="heading">
        		<h3>Showcase Products</h3>
        		</div>
        		<div class="see">
        			<p><a href="#">See all Products</a></p>
        		</div>
        		<div class="clear"></div>
        	</div>
    			<div class="section group">
    				<asp:Repeater ID="Repeater3" runat="server">
                
                <ItemTemplate>
                    
                       <div  style="float:left;width:25%">
    					 <%--<a href=""><img src="../../images/slide-3-image.jpg" alt="" style="width:250px;height:250px" /></a>--%>
                           <asp:Image ID="Image1" runat="server"  style="width:220px;height:250px"   ImageUrl='<%# Eval("pro_image")%>'  />
    
    					 <h2> <p><span class="rupees"><asp:Label ID="Label2" runat="server"  Text='<%# Eval("pro_name")%>'></asp:Label></span></p></h2>
    					<div class="price-details">
    				       <div class="price-number">
    							<p><span class="rupees">PKR<asp:Label ID="Label1" runat="server"  Text='<%# Eval("pro_price")%>'></asp:Label></span></p>
    					    </div>
    					       		<div class="add-cart">								
    									<%--<h4><a href="preview.html">Add to Cart</a></h4>--%>
                                          
                                         <h4>  <asp:HyperLink ID="HyperLink1" runat="server"  NavigateUrl='<%# Eval("pro_id","~/View/User/productdetails.aspx?view={0}") %>'>View Details</asp:HyperLink>
    							     </h4>
                                             </div>
    							 <div class="clear"></div>
    					</div>
    					 
    				</div>
                      
                </ItemTemplate>
                
            </asp:Repeater>
    				</div>
    		
    
    </asp:Content>
    

    please guide

    Wednesday, October 9, 2019 8:35 AM

Answers

  • User288213138 posted

    Hi akhterr,

    akhterr

    <ul id="mycarousel" style="width:300px"  class="jcarousel-skin-tango" }    >

    You can use F12 to see which class changed the style of the repeater.

    After my test found that "jcarousel-skin-tango" class limits the size of the repeater.

    You can try set below style:

    <style>
            .jcarousel-skin-tango .jcarousel-container-horizontal {
                width: 100%;
                padding: 20px 40px;      
            }
            .jcarousel-skin-tango .jcarousel-clip-horizontal {
                width: auto;
                height: 100px;
            }
        </style>

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 10, 2019 3:06 AM