EASY SLIDER - ПРОСТОЙ СЛАЙДЕР

EASY SLIDER - ПРОСТОЙ СЛАЙДЕР


Простой слайдер на jQuery - easy slider - с элементами навигации по изображениям. У слайдера около 20 настроек.

Разметка HTML
    <div id="content">
        <div id="slider">
            <ul>                
                <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>            
            </ul>
        </div>
    </div>


CSS
   /* image replacement */
    #prevBtn, #nextBtn, #slider1prev, #slider1next{
        margin:0;
        padding:0;
        display:block;
        overflow:hidden;
        text-indent:-8000px;
        }
    /* // image replacement */
            
    #container{    
        margin:0 auto;
        position:relative;
        text-align:left;
        width:696px;
        margin-bottom:2em;
        }    
                    
    #contents{
        position:relative;
        }            

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width:696px;
        height:241px;
        overflow:hidden;
        }    
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:144px;
        z-index:1000;
        }    
    #nextBtn, #slider1next{ 
        left:696px;
        }                                                        
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{  
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url('../images/btn_prev.png') no-repeat 0 0;    
        }    
    #nextBtn a, #slider1next a{ 
        background:url('../images/btn_next.png') no-repeat 0 0;    
        }    
        
    /* numeric controls */    

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;    
        }
    ol#controls li{
        margin:0 10px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


javascript
Подключаем jQuery и плагин:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/easySlider1.7.js"></script>


Инициализируем слайдер:
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true, 
                continuous: true
            });
        }); 


Опции по умолчанию:
- prevId: 'prevBtn',
- prevText: 'Previous',
- nextId: 'nextBtn',
- nextText: 'Next',
- controlsShow: true,
- controlsBefore: '',
- controlsAfter: '',
- controlsFade: true,
- firstId: 'firstBtn',
- firstText: 'First',
- firstShow: false,
- lastId: 'lastBtn',
- lastText: 'Last',
- lastShow: false,
- vertical: false,
- speed: 800,
- auto: false,
- pause: 2000,
- continuous: false,
- numeric: false,
- numericId: 'controls'

Скачать исходник:
Скачать файл: easy_slider.rar [268,98 Kb] (cкачиваний: 17)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.