[Помогите] Сдвиг родного слайдера в стиле league_of_legends

Тема в разделе "IP. Board 3.2", создана пользователем byUnit, 13 май 2012.

  1. byUnit

    byUnit

    Регистрация:
    8 май 2012
    Сообщения:
    165
    Симпатии:
    4
    В стиле league_of_legends имееться слайдер

    Посмотреть вложение 284

    Как мне его сдвинуть в право так чтоб нормально отображался в разных браузерах.
    Была жалкая попытка изменить но в Opere одно в Chrome другое а на других компах вообще через ЖЕ!

    Вот код слайдера
    Код:
    <script type='text/javascript' src='{style_images_url}/js/jquery-1.6.2.min.js'></script>
    <script src="{style_images_url}/js/slides.min.jquery.js"></script>
     
                    <script type='text/javascript'>
     
                            jQuery.noConflict();
     
                            jQuery(document).ready(function($){
     
                                    $('#slides').slides({
     
                                            preload: true,
     
                                            preloadImage: '{style_images_url}/images/loading.gif',
     
                                            play: 5000,
     
                                            pause: 2500,
     
                                                                                    pagination: false,
     
                                                                                    generatePagination: false,
     
                                            hoverPause: true,
     
                                            animationStart: function(current){
     
                                                    $('.caption').animate({
     
                                                            bottom:-35
     
                                                    },100);
     
                                                    if (window.console && console.log) {
     
                                                            // example return of current slide number
     
                                                            console.log('animationStart on slide: ', current);
     
                                                    };
     
                                            },
     
                                            animationComplete: function(current){
     
                                                    $('.caption').animate({
     
                                                            bottom:0
     
                                                    },200);
     
                                                    if (window.console && console.log) {
     
                                                            // example return of current slide number
     
                                                            console.log('animationComplete on slide: ', current);
     
                                                    };
     
                                            },
     
                                            slidesLoaded: function() {
     
                                                    $('.caption').animate({
     
                                                            bottom:0
     
                                                    },200);
     
                                            }
     
                                    });
     
                            });
     
                    </script>
     
     
    <style>
    /* Make it work!! */
    a {
        color: #fff;
        text-decoration: none;
    }
     
        a:hover { color: #F8A406;}
     
    #slider{
     
            height: 157px;
     
            width: 380px;
     
            float: right;
     
            position: relative;
     
            background: none;
     
            margin-right: 30px;
     
    }
     
    #example{
     
            height: 157px;
     
            width: 380px;
     
            position: absolute;
     
    right: 0;
     
    }
     
    #frame{
     
            position: absolute;
     
            z-index: 0;
     
            width: 477px;
     
            height: 194px;
     
            top: 6px;
     
            right: 0px;
     
    }
     
    #slides{
     
            position: absolute;
     
            z-index: 100;
     
            width: 370px;
     
            height: 156px;
     
    top: 15px;
     
    right: 53px;
     
    }
     
    /*
     
            Slideshow
     
    */
     
    /*
     
            Slides container
     
            Important:
     
            Set the width of your slides container
     
            Set to display none, prevents content flash
     
    */
     
    .slides_container {
     
            width:370px;
     
            overflow:hidden;
     
            position:relative;
     
            display:none;
     
    }
     
    /*
     
            Each slide
     
            Important:
     
            Set the width of your slides
     
            If height not specified height will be set by the slide content
     
            Set to display block
     
    */
     
    .slides_container div.slide {
     
            width:372px;
     
            height:157px;
     
            display:block;
     
    }
     
    /*
     
            Next/prev buttons
     
    */
     
    #slides .next,#slides .prev {
     
            position:absolute;
     
            top:56px;
     
            left:0px;
     
            width:24px;
     
            height:43px;
     
            display:block;
     
            z-index:101;
     
    }
     
    #slides .next {
     
            left:346px;
     
    }
     
     
    /*
     
            Caption
     
    */
     
    .caption {
     
            z-index:500;
     
            position:absolute;
     
            bottom:-35px;
     
            left:0;
     
            height:20px;
     
            padding:3px 20px 0 20px;
     
     
            background:rgba(0,0,0,.5);
     
            width:370px;
     
            font-size:1.0em;
     
            line-height:1.33;
           
            text-align: left;
     
            color:#fff;
     
            border-top:1px solid #000;
     
            text-shadow:none;
     
    }
     
    #ribbon {   
            position:absolute;
     
            top: 7px;
       
            left: -53px;   
     
            z-index:500;
     
    }
     
    </style>
     
     
     
    <div id='slider'>
     
    <div id="example"><img src="{style_images_url}/images/corner.png" width="112" height="112" alt="" id="ribbon">
     
                            <div id="slides">
     
                                    <div class="slides_container">
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l1.jpg" width="380" height="157" alt="Slide 1"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l2.jpg" width="380" height="157" alt="Slide 2"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                                                              <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l3.jpg" width="380" height="157" alt="Slide 3"></a>
     
                                                    <div class="caption" style="bottom:0">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l4.jpg" width="380" height="157" alt="Slide 4"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l5.jpg" width="380" height="157" alt="Slide 5"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l6.jpg" width="380" height="157" alt="Slide 6"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l7.jpg" width="380" height="157" alt="Slide 7"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l8.jpg" width="380" height="157" alt="Slide 8"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l9.jpg" width="380" height="157" alt="Slide 9"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                            <div class="slide">
     
                                                    <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l10.jpg" width="380" height="157" alt="Slide 10"></a>
     
                                                    <div class="caption">
     
                                                            <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a>
     
                                                    </div>
     
                                            </div>
     
                                    </div>
     
                            </div>
     
                            <img src="{style_images_url}/images/example-frame.png" width="380" height="147" alt="Example Frame" id="frame">
     
                    </div>
     
    </div>
     
    </div>
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    Код:
    #slider{
            height: 157px;
            width: 380px;
            float: right;
            position: relative;
            background: none;
            margin-right: 30px;
    }
    float:left; пробовал ставить?