Image Carousel (Slider) with jCarouselLite Plugin using jQuery AJAX and WebMethod

Hi jovceka,

Check this example. Now please take its reference and correct your code.

Database

I have made use of a table named tblFiles whose schema is defined as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

For slider i have used jQuery jCarousel Lite. You can get the required js and css files and details from the below link.

https://onextrapixel.com/jquery-jcarousel-lite-with-pretty-image-captions-that-appear-on-rollover/

http://www.gmarwaha.com/jquery/jcarousellite/demo.php

HTML

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>
<script type="text/javascript">
    $(function () {
        BindSliderImages();
    });
    function ApplyjCarouselPlugin(ele, previousButtonEle, nextButtonEle) {
        $(ele).jCarouselLite({
            btnNext: nextButtonEle, // Next button.
            btnPrev: previousButtonEle, // Previous button.
            visible: 2, // No of image to display in slider.
            auto: 500,
            speed: 1000
        });
        $('img.captify').captify({
            speedOver: 'fast', // speed of the mouseover effect
            speedOut: 'normal', // speed of the mouseout effect
            hideDelay: 500, // how long to delay the hiding of the caption after mouseout (ms)
            animation: 'always-on', // 'fade', 'slide', 'always-on'
            prefix: '', // text/html to be placed at the beginning of every caption
            opacity: '0.7', // opacity of the caption on mouse over
            className: 'caption-bottom', // the name of the CSS class to apply to the caption box
            position: 'bottom', // position of the caption (top or bottom)
            spanWidth: '100%' // caption span % of the image
        });
    }
    function BindSliderImages() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/GetImages",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    var id = data.d[i].Id;
                    var name = data.d[i].Name;
                    var image = "data:image/jpg;base64," + data.d[i].Image;
                    $(".images").append(
                    "<li>" +
                    "   <div align='center'>" +
                    "       <b>" + id + "</b><br />" +
                    "       <img src='" + image + "' class='captify' alt='" + name + "' />" +
                    "   </div>" +
                    "</li>");
                }
                ApplyjCarouselPlugin($('.slider'), $(".prev"), $(".next"));
            },
            error: function (response) {
                alert("Error while Showing update data");
            }
        });
    }
</script>
<div class="wrap">
    <div id="list">
        <div class="prev">
            <img src="images/prev.jpg" alt="prev" />
        </div>
        <div class="slider">
            <ul class="images">
            </ul>
        </div>
        <div class="next">
            <img src="images/next.jpg" alt="next" />
        </div>
    </div>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<ImageSlider> GetImages()
{
    List<ImageSlider> products = new List<ImageSlider>();
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM tblFiles";
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query, con);
        con.Open();
        SqlDataReader sdr = cmd.ExecuteReader();
        while (sdr.Read())
        {
            products.Add(new ImageSlider
            {
                Id = Convert.ToInt32(sdr["Id"]),
                Name = sdr["Name"].ToString(),
                Image = Convert.ToBase64String((byte[])sdr["Data"], 0, ((byte[])sdr["Data"]).Length)
            });
        }
        con.Close();
    }

    return products;
}

public class ImageSlider
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Image { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetImages() As List(Of ImageSlider)
    Dim products As List(Of ImageSlider) = New List(Of ImageSlider)()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM tblFiles"
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand(query, con)
        con.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader()
        While sdr.Read()
            products.Add(New ImageSlider With {
                .Id = Convert.ToInt32(sdr("Id")),
                .Name = sdr("Name").ToString(),
                .Image = Convert.ToBase64String(CType(sdr("Data"), Byte()), 0, (CType(sdr("Data"), Byte())).Length)
            })
        End While
        con.Close()
    End Using

    Return products
End Function

Public Class ImageSlider
    Public Property Id As Integer
    Public Property Name As String
    Public Property Image As String
End Class

Screenshot