Click here to Skip to main content
15,908,776 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
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 :)
JavaScript
jQuery(document).ready(function () {  // first time register with jcarousel 
                         jQuery('#homebtmCarousel').jcarousel({     // it is a  UL element
                        scroll: 3,
                       easing: 'easeInSine'
          });
      });


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

JavaScript
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; 

( 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.......
JavaScript
jQuery('#homebtmCarousel').jcarousel({ 
                        scroll: 3,
                        easing: 'easeInSine'
                    });
                }
            },
            error: function (request, error) {
            }
        }
        $.ajax(option);
    }

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.
:)
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900