SharePoint 2010 : Slider webpart

Question

Hi techies,
I got a requirement to implement slider webpart in SharePoint2010 and i created slider webpart by using BXslider plugin
here is the Screenshot:
<script type="text/javascript" src="/_layouts/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.bxSlider.min.js"></script>
<style type="text/css">
.bx-wrapper
background-color:inherit;
padding:10px 10px 10px 10px;
.vclass
vertical-align:top;
.tdinfo
font-family:Trebuchet MS !important;
font-size:16px !important;
vertical-align:top;
color:#2c3e50;
line-height:normal;
text-align:justify;
.wpheading
font-family:Trebuchet MS !important;
font-size:22px !important;
background-color:#e6e5e5;
padding:10px 10px 10px 10px;
margin-top:3px;
margin-bottom:10px;
color:#2f2f2f;
.tdtitle
font-family:Trebuchet MS !important;
font-size:20px !important;
padding:10px 0px 10px 0px;
color:#2f2f2f;
margin-bottom:5px;
.tdlink
font-family:Trebuchet MS !important;
font-size:14px !important;
width:100px;
color:#2f2f2f !important;
background-color:#fec80d;
padding:5px 5px 5px 5px;
margin-top:3px !important;
.tdlink:hover
background-color:#F2F2F2;
color:#627AAD !important;
.tdlink a
color:#ecf0f1 !important;
text-decoration:none;
.tdlink a:hover
color:#e6e5e5!important;
text-decoration:none;
#sliderImage
vertical-align:top;
.bx-window
/*height:150px;*/
.bx-pager
margin-top:15px;
text-align : center;
.bx-pager a
color: #2f2f2f !important;
font-size: 16px;
padding: 0 10px;
.bx-pager .pager-active, .bx-pager a:hover
background-color:#fec80d;
color: #2f2f2f !important;
text-decoration: none;
a
text-decoration: none;
#centeroverlap {
left: 300px;
top: 36px;
font-family: Verdana;
line-height: 80%;
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#slider1').bxSlider({
auto: true,
pager: true,
controls: false,
pause: 10000
</script>
<div class="wp-Cover">
<div class="wpheading">News</div>
<div id="slider1" >
<asp:Repeater ID="rep1" runat="server">
<ItemTemplate>
<!--<div style='<%# "background: url('" + Eval("Image") + "') no-repeat top center" %>' >-->
<table >
<tr>
<td colspan="2"><div class="tdtitle" >
<%# DataBinder.Eval(Container.DataItem, "Title")%>
</div>
</td>
</tr>
<tr>
<td id="sliderImage">
<img class="img-border" alt="" src="<%# DataBinder.Eval(Container.DataItem, "Image") %>" width="190px" height="150px" />
</td>
<td class="tdinfo">
<%# DataBinder.Eval(Container.DataItem, "Body")%>
<div ><a class="tdlink" href="<%# DataBinder.Eval(Container.DataItem, "ListItemUrl") %>">[Read More..]</a></div>
</td>
</tr>
<tr>
<td></td>
<td>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<script type="text/javascript">
$('img').error(function () { $(this).hide(); });
$('img').each(function () { this.src = this.src; });
</script>
above code is design code of my webpart
which fetched data from a list and binds data to the tags
Now my requirement changed.. they need a slider with background image and contents on the image
[Note: both the images and contents should slider]
For the requirement i tried many approached but i am not able to succeed. 
Please any help will be appreciated.

Answer 1

Try below:
https://www.nothingbutsharepoint.com/sites/eusp/Pages/SharePoint-Integrate-a-Slider-with-the-Content-Query-Web-Part-Part-1-What-does-my-Slider-Need-to-Work.aspx
<div id="slides">
<div class="slides_container">
    <div class="slide">
        <a>link 1</a>
        <div class="caption">
            <p>caption text 1</p>
        </div>
    </div>
    <div class="slide">
        <a>link 2</a>
        <div class="caption">
            <p>caption text 2</p>
        </div>
    </div>
</div>
</div>
http://social.technet.microsoft.com/Forums/sharepoint/en-US/aa37ab24-9fe2-4418-8acc-b6a7e1f15646/sharepoint-slider-webpart?forum=sharepointgeneralprevious