<div class="container">
    <div class="sixteen columns">

        <div class="wrapper_block wrapper_brands">
            <div class="box">
                <div class="box-heading"><?php echo $title_brands; ?></div>
            </div>
        </div>

        <div class="brands carouFredSel">
                <div class="carouFredSel-controls">
                    <div class="carouFredSel-buttons">
                        <a id="brands-carousel-prev" class="prev"></a>
                        <a id="brands-carousel-next" class="next"></a>
                    </div>
                </div>
                <div class="brands-carousel">
                    <ul class="slides">
                        <?php foreach ($banners as $banner) { ?>
                        <li><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>


    </div>
</div>



<script type="text/javascript">
jQuery(function() {
    var brandsCarousel = jQuery(".brands .brands-carousel ul");
    var brandsCarouselMax = <?php echo $limit; ?>;

    brandsCarousel.carouFredSel({
        responsive: true,
        width: '100%',
        scroll: <?php echo $scroll; ?>,
        prev: '#brands-carousel-prev',
        next: '#brands-carousel-next',
        items: {
            width: 120,
            height: '30%',	//	optionally resize item-height
            visible: {
                min: 1,
                max: brandsCarouselMax
            }
        }
    });
});
</script>