메인에 이미지 여러개가 롤링되게 하고 싶은데

이미지 한개만(이미지파일이름 : main_bn) 파일 하나만 롤링되네요 ㅠ

어떻게 해야할까요?

<!-- 콘텐츠 시작 { -->
<div id="idx_wrapper">
    <!--메인배너-->
    <div id="main_bn">
        <ul class="bn_ul">
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>[제목]<br>[제목]</h2>
                        <p>[소주제]<br>[소주제]</p>
                    </div>
                </div>
            </li>  
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>[제목]<br>[제목]</h2>
                        p>[소주제]<br>[소주제]</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr">,
                    <div class="bn_txt">
                        <<h2>[제목]<br>[제목]</h2>
                        <p>[소주제]<br>[소주제]</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>[제목]<br>[제목]</h2>
                        <p>[소주제]<br>[소주제]</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="bn_btn">
            <a href="#" class="unslider-arrow prev">Previous slide</a>
            <a href="#" class="unslider-arrow next">Next slide</a>
        </div>
    </div>
    <!--메인배너-->
    <script>
    $(function() {
        var unslider = $("#main_bn").unslider({
            speed: 700,               //  The speed to animate each slide (in milliseconds)
            delay: 5000,              //  The delay between slide animations (in milliseconds)
            keys: true,               //  Enable keyboard (left, right) arrow shortcuts
            dots: true,               //  Display dot navigation
            fluid: false              //  Support responsive design. May break non-responsive designs
        });
       
        $('.unslider-arrow').click(function() {
            var fn = this.className.split(' ')[1];

            //  Either do unslider.data('unslider').next() or .prev() depending on the className
            unslider.data('unslider')[fn]();
        });
    });
   </script>

    <div id="idx_container">
        <?php if ((!$bo_table || $w == 's' ) && !defined("_INDEX_")) { ?><div id="container_title"><?php echo $g5['title'] ?></div><?php } ?>