jcarousel slideshow

Question

i am using jquery jcarousel for my image slider but encountered problem. the problem is whenever i click on the specific image slider image isn't seen. i mean there is no change in main image. any help is welcome. i have included all the jquery and css and script required. code:

<?php
                    if(!empty($detailArr))
                    {
                        foreach($detailArr as $models)
                        {
                        ?>
                        <h1><?php echo $models['model_name'];?></h1>

                       <div class="model_info">
                            <div id="slideshow-main">
                                <ul>
                                    <li class="<?php echo $models['gallery_id'];?> active">
                                        <a href="#">
                                      <img  src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="410" height="290" alt="" />
                                        </a>
                                    </li>
                                </ul>
                            </div>


                          <div id="slideshow-carousel"> 
                                <ul id="carousel" class="jcarousel jcarousel-skin-tango">
                                    <?php
                                       if(!empty($slideshowArr))
                                            {
                                                foreach($slideshowArr as $models)
                                                {
                                     ?>
                                    <li>
                                        <a href="<?php echo base_url().$models['model_url']."/".$models['gallery_id'];?>" rel="<?php echo $models['gallery_id'];?>">
                                            <img src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="129px" height="95px" alt="#"/>
                                        </a>
                                    </li>
                                    <?php
                                               }
                                            }
                                    ?>
                                </ul>
                            </div>

<script type="text/javascript">
$(document).ready(function () {

     //jCarousel Plugin
    $('#carousel').jcarousel({
        vertical: true, //display vertical carousel
        scroll: 1,  //auto scroll
        auto: 2,    //the speed of scrolling
        wrap: 'last',   //go back to top when reach last item
        initCallback: mycarousel_initCallback   //extra called back function
    });

    //Front page Carousel - Initial Setup
    //set all the item to full opacity
    $('div#slideshow-carousel a img').css({'opacity': '0.5'});

    //readjust the first item to 50% opacity
    $('div#slideshow-carousel a img:first').css({'opacity': '1.0'});

    //append the arrow to the first item
    $('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')


    //Add hover and click event to each of the item in the carousel
    $('div#slideshow-carousel li a').hover(
        function () {

            //check to make sure the item is not selected
            if (!$(this).has('span').length) {
                //reset all the item's opacity to 50%
                $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});

                //adust the current selected item to full opacity
                $(this).stop(true, true).children('img').css({'opacity': '1.0'});
            }      
        },
        function () {

            //on mouse out, reset all the item back to 50% opacity
            $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});

            //reactivate the selected item by loop through them and look for the one
            //that has the span arrow
            $('div#slideshow-carousel li a').each(function () {
                //found the span and reset the opacity back to full opacity
                if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});

            });

        }
    ).click(function () {

        //remove the span.arrow
        $('span.arrow').remove();

        //append it to the current item       
        $(this).append('<span class="arrow"></span>');

        //remove the active class from the slideshow main
        $('div#slideshow-main li').removeClass('active');

        //display the main image by appending active class to it.       
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');  

        return false;
    });


});


//Carousel Tweaking
function mycarousel_initCallback(carousel) {

    // Pause autoscrolling if `enter code here`the user moves with the cursor over the clip.
    // resume otherwise
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
}
</script>

Answer 1

At first, are you sure you have imported the jQuery library? you could check it like this: $(document).ready(function () { alert(1); });