<div id="banner">
<div id="right_slide">
            <ul id="photo_slide">
                <li><img src="<?php bloginfo('template_url'); ?>/images/banner_1.jpg" /></li>
                <li><img src="<?php bloginfo('template_url'); ?>/images/banner_2.jpg" /></li>
                <li><img src="<?php bloginfo('template_url'); ?>/images/banner_3.jpg" /></li>
                <li><img src="<?php bloginfo('template_url'); ?>/images/banner_4.jpg" /></li>
                <li><img src="<?php bloginfo('template_url'); ?>/images/banner_5.jpg" /></li>
            </ul>
        </div>


        <div id="left_slide">
            <div id="info_slide">
            <ul class="info">
                <li style="height:200px;">
                    <h2>A Reputation for Success</h2>
                        <br />
                        Something <br />
                        Something else
                    </ul>
                </li>
                <li style="height:200px;">
                    <div class="marquee-container">
                        <p class="marquee">
                            <ul class="info">
                                <li>Representative Verdicts<br /> and Settlements</li>
                                <li>$7,000,000</li>
                                <li>$5,000,000</li>
                                <li>$3,000,000</li>
                                <li>$2,000,000</li>
                                <li>$2,000,000</li>
                                <li>$2,000,000</li>
                                <li>$2,000,000</li>
                                <li>$1,000,000</li>
                                <li>$1,000,000</li>
                                <li>$1,000,000</li>
                                <li>$1,000,000</li>
                                <li>$1,000,000</li>
                            </ul>
                        </p>
                    </div>



                </li>

            </ul>
            </div>
        </div>
           <script>
               call_slider();
            </script>

        </div>

#banner {
        margin: -75px auto 0;
        position: relative;
        width: 1000px;

#right_slide {
            float: right;
            height: 259px;
            right: 10px;
            position: relative;
            top: 9px;
            width: 670px;
            z-index: 1;
        }

#left_slide {
            float: left;
            height: 259px;
            position: relative;
            left: 10px;
            top: 9px;
            width: 299px;
            z-index: 1;
}

.marquee-container {
    width: 18em;
    height: 8em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes info {
    0%   { bottom:   8em }
    100% { bottom: -11em }
}

function call_slider() {

    $('#photo_slide').bxSlider({
        mode: 'fade',
        auto: true,
        controls: false,
        autoControls: false,
        pager: false,
        pause: 2000
    });

    $('#info_slide').bxSlider({
        auto: true,
        controls: false,
        autoControls: false,
        pager: false,
        pause: 12000,
        slideMargin: 20,
        speed: 4000
    });
}