JQuery cycle plugin within ajax content

Question

I am trying to make a slideshow using the jquery cycle plugin (http://jquery.malsup.com/cycle/) on my wordpress site.

The way it works is, when the page loads, I click a button named ".submit" and then ajax content comes up on the screen and a div named '.modal' changes its visibility from hidden (display:none) to visible and inside, it has a container that shows a slideshow from the div #slideshow.

I tried to make it that when the ajax content changes visibility, the cycle plugin will then load.
When I do this I get no error messages but the slideshow doesn't work.

Here is my code:

jQuery(document).ready(function() {
    jQuery('.submit').click(function(e) {
        e.preventDefault();
        var mod_shadow = jQuery('#modal_shadow');
        var container = jQuery('.modal');
        mod_shadow.show();
        container.show();
        var data = {
            'action': 'modal_ajax',
            'nonce': '<?php echo $ajax_nonce; ?>'
        };

        jQuery.post('<?php echo admin_url('admin - ajax.php '); ?>', data, function(response) {
            container.replaceWith(response);
        });
    });
});

jQuery('.modal').on('show', function() {
    jQuery('#slideshow').cycle({
        fx: 'scrollLeft'
    });
});

<?php 
    // ... 

    add_action( 'wp_footer', 'modal_init'); 
    function modal_init() { 
        if (!bp_is_user() || !is_user_logged_in()) { 
            return; 
        } 
        $ajax_nonce=w p_create_nonce( "nonce"); 
    } 
?>

<div id="modal_shadow" style="display: none;"></div>
<div class="modal" style="display: none;">
    <div class="modal-content-wrap">
        <div class="modal-title comp-loading-icon">
            <div class="bp-loading-icon"></div>
        </div>
    </div>
</div>




<div class=".modal-content">
    <div style="width: 250px">
        <div id="slideshow">
            <div style="width:250px; height:150px; background:red;"></div>
            <div style="width:250px; height:150px; background:blue;"></div>
            <div style="width:250px; height:150px; background:green;"></div>
            <div style="width:250px; height:150px; background:yellow;"></div>
        </div>
        <div id="prev" style="float:left;">PREV</div>
        <div id="next" style="float:right;">NEXT</div>
    </div>
</div>