jQuery Cycle goto option

Question

My Js:

   $("#front_events").cycle({
       fx:      'scrollHorz',
       next:   '.next',
       prev: '.prev',
       speed:500,
       timeout: 0,
       before:function(isNext, zeroBasedSlideIndex, slideElement){
           var c_list = '';
           for(i=1;i<=$("#front_events li").length;i++){
               c_list += '<li><a href="#" rel="'+ i +'">'+ i +'</a></li>';
           }
           $("#event_numbers").html(c_list);
           if(slideElement.currSlide == 0){
            $("div.day_calendar div.day_select_wrapper ul li a:eq(0)").addClass('active');
           }
       },
       after:function(isNext, zeroBasedSlideIndex, slideElement){
           var index = slideElement.currSlide + 1;
           var tarih = $(this).find('a.day_location').attr('rel');

           $("div.day_calendar div.day_select_wrapper ul li a").each(function(){
              if($(this).attr('rel') == index){
                  $(this).addClass('active');
              }else{
                  $(this).removeClass('active');
              }
           });
           tarih = tarih.split("|");
           var t_html = '<div class="day">' + tarih[0] + '</div><div class="month">'+ tarih[1] +'</div><div class="dayname">'+ tarih[2] +'</div>';
           $("#calendar_date").html(t_html);
       }

   });

It works wonderful.But I want, when I click a tag, go to that image. I found this page:

JQUERY CYCLE GOTO2

And updated my code:

var bc = $('#event_numbers');

And added:

    $container.children().each(function(i) { 
        // create input 
        $('<li><a href="#" rel="'+ i +'">'+ i +'</a></li>') 
            // append it to button container 
            .appendTo(bc) 
            // bind click handler 
            .click(function() { 
                // cycle to the corresponding slide 
                $container.cycle(i); 
                return false; 
            }); 
    }); 

But crashed my navigation buttons. When I checked via DevTools, get this error:

$container is not defined 

I don't find my problem.

How can I add my buttons clickable?

Answer 1

From the link you have specified, I can see the only difference is that you missed to save your cycle object return value in variable, like:

var $container = $('#container').cycle({ 
    fx:     'scrollHorz', 
    speed:   300, 
    timeout: 0 
}); 

Your code should be:

var $container = $("#front_events").cycle({
   fx:      'scrollHorz',
   next:   '.next',
   prev: '.prev',
   speed:500,
   timeout: 0,
   ......