Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel.
- css
- js
Currently, when I manually add text to the list, everything works fine. But when I try to fetch text from a database and insert it into the list, only the first 3 records are displayed. Also, clicking on the next button doesn't show the remaining texts. What I want is similar to example number 4 in this link:
Example4 Here is my code that is currently working:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Carousel - jCarousel Examples</title>;
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<link href="../../jcarousel.responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script src="../../jcarousel.responsive.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<h1>Responsive Carousel</h1>
<p>This example shows how to implement a responsive carousel. Resize the browser window to see the effect.</p>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>Hello</li>
<li>Make it</li>
<li>Quick</li>
<li>or</li>
<li>you are</li>
<li>Fired</li>
<li>Understand</li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p id="images" class="jcarousel-pagination"></p>
</div>
</div>
In case I use the database to populate after every 3rd text, it isn't functioning as expected. Here is the updated code:
<div class="wrapper">
<p>This example shows how to implement a responsive carousel. Resize the browser window to see the effect.</p>
<div id="jc2" class="jcarousel-wrapper">
<div class="jcarousel">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<ul>
<li>
<asp:Label ID="imagename" runat="server" Text='<%# Bind("Image_Name") %>'></asp:Label>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p id="imagename" class="jcarousel-pagination"></p>
</div>
</div>
</body>
</html>
This is the code behind logic:
protected void Page_Load(object sender, EventArgs e)
{
try
{
con.Open();
string query = "select * from Image_Master";
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds);
rptImages.DataSource = ds;
rptImages.DataBind();
}
catch (Exception ex2)
{
Response.Write("<script>alert('An Error occurred. Administrator has been notified..!');</script>");
}
finally
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
}
}
If you need more details or have any questions related to the code, feel free to ask. Your help will be greatly appreciated. Thank you!