jQuery Cycle - Responsive

by blowsie

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.min.js"></script>
<div class="wrap">
    <div class="cycle">
        <img src="http://placehold.it/350x150" alt="Image A" title="This is Image A" />
        <img src="http://placehold.it/350x150" alt="Image B" title="This is Image B" />
        <img src="http://placehold.it/350x150" alt="Image C" title="This is Image C" />
        <img src="http://placehold.it/350x150" alt="Image D" title="This is Image D" />
        <img src="http://placehold.it/350x150" alt="Image E" title="This is Image E" />
    </div>


    <p> Why isnt the cycle clered, and how can i clear it without fixing the height?</p>
</div>
<div class="wrap">
    <div class="cycle2">
        <img src="http://placehold.it/350x150" alt="Image A" title="This is Image A" />
        <img src="http://placehold.it/350x150" alt="Image B" title="This is Image B" />
        <img src="http://placehold.it/350x150" alt="Image C" title="This is Image C" />
        <img src="http://placehold.it/350x150" alt="Image D" title="This is Image D" />
        <img src="http://placehold.it/350x150" alt="Image E" title="This is Image E" />
    </div>


    <p> The cycle is cleared in this example, but its not responsive</p>
</div>

CSS

.cycle, .cycle2 {
    margin:20px;
    background:#fff
}
img {width:100%;}
.wrap {height:300px; margin:5px; padding: 5pc; background:#eee}

JavaScript

$(document).ready(function() {
    
     $('.cycle').cycle({
            slideResize: true,
            containerResize: false,
            fit: 1,
            width: "fit"
    });


    $('.cycle2').cycle({
    });
    
    $('.cycle').resize(function(){     $(this).height($(this).find('img:first').height())    
    });
 $('.cycle').trigger('resize')
});