Why jQuery cycle plugin doesn't work?

Question

I write a function to append some HTML code to page like below:

function addGiftList(className, imgURL, Kind) {
    var $li = $('<li class="' + className + '">');
    var $img = $("<img>", { src: imgURL })
    var $br = $("<br/>");
    var $input = $('<input >', { type: 'radio', name: 'gift', kind: Kind });
    var $label = $("<label>").text("Test");

    $li.append($img);
    $li.append($br);
    $li.append($input);         
    $li.append($label);
    return $li;         
}

All this will append to a div with className cycle-slideshow then I call $('.cycle-slideshow').cycle(); , but nothing happens. Does anyone know why? Can I create HTML elements with javascript then call jQuery cycle plugin?

Answer 1

HTML

<button>append</button>
<div class="myslider composite-example" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-timeout="2000">
  <div>
    <img src="http://malsup.github.io/images/p1.jpg" width=100%>
    <div class="cycle-overlay">first image</div>
  </div>
  <div>
    <img src="http://malsup.github.io/images/p2.jpg" width=100%>
    <div class="cycle-overlay">second image</div>
  </div>
</div>

CSS

 body {
  width: 200px;
  margin: auto;
}

img {
  width: 200px;
}

JS

 // first call cycle
    $('.myslider').length > 0 && $('.myslider').cycle();

    function addGiftList(className, imgURL, Kind) {
        var $div = $('<div class="' + className + '">');
        var $img = $("<img>", {
                src: imgURL
            })
        var $input = $('<input >', {
            type: 'radio',
            name: 'gift',
            kind: Kind
        });
        var $label = $("<label>").text("Test");
        $div.append($img);
        $div.append($input);
        $div.append($label);

        // dynamically adding slider: this is a plugin method see documentation
        $('.myslider').cycle('add', $div);

        return;
    }

    // dynamic add button for example
    $('button').on('click', function() {
        // add function for example
        addGiftList('myclass cycle-slide', 'https://placeholdit.imgix.net/~text?txtsize=15&txt=image%20added&w=200&h=150&txttrack=0');
    })

Please see this link of my codepen. I have solved your problem. http://codepen.io/prashen/pen/PNPbRR