jQuery Cycle2 Plugin not working but no errors in console.

jQuery Cycle2 Plugin not working but no errors in console.

I am using a CMS to insert the cycle2 plugin on a site that uses the 1.3.2 jQuery library.  I have used noConflict to avoid problems when calling the later version required to run the plug in, and when I test the slider locally,  it works perfectly even when both libraries are referenced. 

When I plug the content into the site via OpenCMS or our IBM Websphere tool (management center), the slider falls apart.  The images that are supposed to be in the thumbnail carousel are full size, and clicking on them doesn't change the main slider image (you can see a bit of it poking out behind the first carousel). 

I'm new to jQuery so troubleshooting is very challenging. Because there are no errors, I thought maybe the problem was the use of the data attribute on a site that is XHTML 1 and not HTML 5.  But if I change the doctype on my local document to match that of the site, the slider still works.

I added an alert immedately after the document.ready in the plugin's js to see if it fires at all on the site, and it does.

I really am at a loss for what to do. Please, any suggestions would be helpful. My code is below (what I am in putting into OpenCMS).

Thanks in advance for any help. 

I would also be happy to get some recommendations on another slider that is compatible with 1.3.2 & the iPad that has similar functionality. I need something that has thumbnails at the bottom as well as prev/next capability. Doesn't need to autoscroll or be responsive.  I used Flexslider2 successfully on the site and it does not work correctly on the iPad.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="../wcsstore/CVWEB/images/home/js/jquery.cycle2.js"></script>
    <script type="text/javascript" src="../wcsstore/CVWEB/images/home/js/jquery.cycle2.carousel.js"></script>  
    <script type="text/javascript">
    var jQuery_1_9_0= jQuery.noConflict(true);
    jQuery_1_9_0(document).ready(function(){
    var slideshows = jQuery_1_9_0('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
        slideshows.not(this).cycle('goto', opts.currSlide);
    });

    jQuery_1_9_0('#cycle-2 .cycle-slide').click(function(){
        var index = jQuery_1_9_0('#cycle-2').data('cycle.API').getSlideIndex(this);
        slideshows.cycle('goto', index);
    });

    });
    </script>
    <style type="text/css">
    #soleil-intro * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #soleil-intro #cycle-1 div { width:950px; }
    #soleil-intro #cycle-2 .cycle-slide { border:3px solid #fff; }
    #soleil-intro #cycle-2 .cycle-slide-active { border:3px solid #f6d609; }
    #soleil-intro #soleil-slideshow-1 { max-width: 980px; margin: auto; z-index: 1; position: relative; }
    #soleil-intro #soleil-slideshow-2 { max-width: 940px; margin: auto; z-index: 1; position: relative; margin-top: 10px;  }
    #soleil-intro .cycle-slideshow img { width: 100%; height: auto; display: block; }
    #soleil-intro .arrow {float: left; width: 15px; position: relative; top: 200px;}
    </style>
    <div id="soleil-intro">
    <p>#3 Management Center</p><br /><br />
    <div id="soleil-slideshow-1">
        <p class="arrow">
            <a href="#" class="cycle-prev">&laquo;</a>
        </p>
        <div style="float: left;" id="cycle-1" class="cycle-slideshow"
            data-cycle-slides="> div"
            data-cycle-timeout="0"
            data-cycle-prev="#soleil-slideshow-1 .cycle-prev"
            data-cycle-next="#soleil-slideshow-1 .cycle-next"
            data-cycle-fx="scrollHorz"
            >
            <div><img src="../wcsstore/CVWEB/images/home/soleil1.jpg" width="980" height="425"></div>
            <div><a href="test.html"><img src="../wcsstore/CVWEB/images/home/soleil2.jpg" width="980" height="425"></a></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil3.jpg" width="980" height="425"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil4.jpg" width="980" height="425"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil5.jpg" width="980" height="425"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil3.jpg" width="980" height="425"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil4.jpg" width="980" height="425"></div>       
        </div>
            <p class="arrow">
            <a href="#" class="cycle-next"><img src="../wcsstore/CVWEB/images/home/email/email_ruhlman-grilling_arrow.gif" style="display:inline;" alt="arrow" height="12" width="16" border="0" /></a>
        </p>
    </div>
    <div style="clear: both;"></div>
    <div id="soleil-slideshow-2" style="clear: both;">
        <div id="cycle-2" class="cycle-slideshow"
            data-cycle-slides="> div"
            data-cycle-timeout="0"
            data-cycle-prev="#soleil-slideshow-2 .cycle-prev"
            data-cycle-next="#soleil-slideshow-2 .cycle-next"
            data-cycle-fx="carousel"
            data-cycle-carousel-visible="5"
            data-cycle-carousel-fluid="true"
            data-allow-wrap="false"
            >
            <div><img src="../wcsstore/CVWEB/images/home/soleil1.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil2.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil3.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil4.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil5.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil3.jpg" width="100" height="100"></div>
            <div><img src="../wcsstore/CVWEB/images/home/soleil4.jpg" width="100" height="100"></div>
        </div>
    </div>
    </div> <!-- #soleil-intro -->