SharePoint 2010 : Slider webpart

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.