在asp.net中将新项目动态添加到jcarousel滑块(Jquery滑块)的容器中 [英] Adding new Items dynamically to container for jcarousel slider (Jquery slider) in asp.net

问题描述

当我尝试动态添加元素时，jcarousel出现问题，无法正常工作.
这是场景:在页面加载时，我在ul上附加了10个li项目，并在第一次显示5张图像，当用户单击next按钮时，它同时滑动了下3张图像(即li)，我正在调用ajax功能并从DB检索新图像以在我的UL上附加更多LI元素，并且第一次单击时效果很好，但下次滑动不完美.它以不正确的方式滑动.
这是我使用的脚本.请建议我有需要:)

I have an issue with jcarousel when i''m trying to add elements dynamically it not working well.
Here is the scenario : On page load i append 10 li items to my ul, and show 5 images at first time, when user clicks on next button it slides next 3 images(i.e. li) at that same time i''m calling ajax function and retrieve new images from DB to append more LI elements with my UL on first click it works fine, but next time it not slide perfectly. It slides in a improper manner.
Here is the script i used. Please suggest me needful :)

jQuery(document).ready(function () {  // first time register with jcarousel 
                         jQuery('#homebtmCarousel').jcarousel({     // it is a  UL element
                        scroll: 3,
                       easing: 'easeInSine'
          });
      });

单击下一个按钮时调用此函数，它将成功将新的LI添加到UL，但滚动不流畅.

Calling this function when clicks on next button it appends new LI to UL successfully but not scroll smoothly.

function BindRecentPhotos() {
                var dataToSend = { PageIndex: currentPageIndex, MethodName: 'RecentPhoto' }
                 var option = {
                 url: baseAddr + 'General/FrontEndUser/Home.aspx?x=' + new Date().getTime(),
                  data: dataToSend,
                   success: function (msg) {
                               var s = jQuery.parseJSON(msg);
                                  if (s.PageHtml != '') {
                    $("#homebtmCarousel").append(s.PageHtml);
                    var temp = s.PageHtml;
                    currentPageIndex = currentPageIndex + 1; 

(如果我不使用此代码再次注册Jcarousel，则问题在于LI不能正确地附加到ul，但是如果我使用此代码，则滑块将无法正常工作，并且有时LI的内容会出现(即图像标签)会自动删除几个LI标签.)功能继续....

( here is the problem if i don''t register Jcarousel again with this code then LI''s are not append with ul properly but if i use this code then slider not working properly and some times the content of LI (i.e. image tag ) deleted automatically for few LI tags.) function continue.......

jQuery('#homebtmCarousel').jcarousel({ 
                        scroll: 3,
                        easing: 'easeInSine'
                    });
                }
            },
            error: function (request, error) {
            }
        }
        $.ajax(option);
    }

希望你能理解我的问题. jcarousel是否有可能实现此所需功能..
还有其他方法可以实现具有良好平滑度的图像旋转功能.
:)

Hope you will understand my issue. is it possible with jcarousel to implement this desired functionality..?
Is there any other way to achieve image rotation functionality with good smoothness.
:)

推荐答案

(" ).append(s.PageHtml); var temp = s.PageHtml; currentPageIndex = currentPageIndex + 1 ;

("#homebtmCarousel").append(s.PageHtml); var temp = s.PageHtml; currentPageIndex = currentPageIndex + 1;

(如果我不使用此代码再次注册Jcarousel，则问题在于LI不能正确地附加到ul，但是如果我使用此代码，则滑块将无法正常工作，并且有时LI的内容会出现(即图像标签)会自动删除几个LI标签.)功能继续....

( here is the problem if i don''t register Jcarousel again with this code then LI''s are not append with ul properly but if i use this code then slider not working properly and some times the content of LI (i.e. image tag ) deleted automatically for few LI tags.) function continue.......

jQuery('#homebtmCarousel').jcarousel({ 
                        scroll: 3,
                        easing: 'easeInSine'
                    });
                }
            },
            error: function (request, error) {
            }
        }

.ajax(option); }

.ajax(option); }

希望你能理解我的问题. jcarousel是否有可能实现此所需功能..
还有其他方法可以实现具有良好平滑度的图像旋转功能.
:)

Hope you will understand my issue. is it possible with jcarousel to implement this desired functionality..?
Is there any other way to achieve image rotation functionality with good smoothness.
:)

这篇关于在asp.net中将新项目动态添加到jcarousel滑块(Jquery滑块)的容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！