3 217 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;
}

JS

Подключаем jQuery и плагин:

    <script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/jаvascript" 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'
Скачать 7878Загрузок 262,43 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи