Простая нумерация страниц (слайдер контента)

Question

Я хочу сделать слайдер контента, в котором содержимое будет меняться при клике на пагинации внизу, как это

Для этого я написал HTML / CSS

http://jsfiddle.net/jitendravyas/Bbuyu/6/

Какой плагин jquery вы бы предпочли использовать с ним.Я пробовал некоторые, но у них другой тип наценки, и я не хочу менять наценку

HTML

<div class="season-box">
          <div class="slide-outer nopad">
            <ul id="slide-box">

               <!--  slide 1 -->
              <li> <img src="http://lorempixel.com/264/139" alt="season">
                <h5>Lorem Ipsum</h5>
                <p>Lorem Ipsum are group of islands and a Union Territory located in Indian Ocean. The capital of the territory is Port Blair, located in a small island in Andaman...</p>
                <ul class="list">
                  <li class="icon1"><strong>1200</strong> onwards&gt;</li>
                  <li class="icon2"><strong>129</strong> hotels</li>
                  <li class="icon3"><strong>24</strong>things to do | Most popular: Scuba diving</li>
                </ul>
              </li>

                <!--  slide 2 -->
              <li> <img src="http://lorempixel.com/264/139" alt="season">
                <h5Lorem Ipsum Islands</h5>
                <p>Lorem Ipsum are group of islands and a Union Territory located in Indian Ocean. The capital of the territory is Port Blair, located in a small island in Andaman...</p>
                <ul class="list">
                  <li class="icon1"><strong>1200</strong> onwards</li>
                  <li class="icon2"><strong>129</strong> hotels</li>
                  <li class="icon3"><strong>24</strong> things to do | Most popular: Scuba diving</li>
                </ul>
              </li>

                     <!--  slide 3 -->
              <li> <img src="http://lorempixel.com/264/139" alt="season">
                <h5>Andaman Nicobar Islands</h5>
                <p>Andaman &amp; Nicobar Islands are group of islands and a Union Territory located in Indian Ocean. The capital of the territory is Port Blair, located in a small island in Andaman...</p>
                <ul class="list">
                  <li class="icon1"><strong>1200</strong> onwards</li>
                  <li class="icon2"><strong>129</strong> hotels</li>
                  <li class="icon3"><strong>24</strong> things to do | Most popular: Scuba diving</li>
                </ul>
              </li>
            </ul>


              <!--  Pagination -->
            <div class="pager">
              <ul>
                <li><a href="#" class="active">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
              </ul>
          </div>
        </div>​

CSS

.season-box {
    color:#666;
    font-size:14px;
    margin:0 0 40px 0;
    width:300px
}
.slide-outer {
    background:#f8f8f8;
    padding:20px 0 15px 18px;
    overflow:hidden;
    margin:15px 0 20px 0;
}
.nopad {
    padding:20px 0 15px 0 !important;
}
#slide-box {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 18px;
  width: 264px;
  height: 350px;
  position: relative;
  li {
    position: absolute;
    left: 0;
    top: 0;
    background: #F8F8F8;
    p {
      margin: 0 0 14px 0; } }
}

.pager {
    text-align:right;
    position:relative;
    z-index:999999;
    margin:0 18px 0 0;
}
.pager ul {
    list-style:none;
    padding:0;
    margin:0;
    display:inline-block;
}

.pager ul li {
    display:inline-block;
    margin:0 2px 0 0;
}
.pager ul li a {
    border:1px solid #d26043;
    line-height:15px;
    background:blue;
    color:#fff;
    display:block;
    width:15px;
    height:15px;
    text-align:center;
}
.pager ul li a:hover, .pager ul li a.active {
    color:#d26043;
    background:#fff;
    text-decoration:none;
}


*+ html .pager ul {
    display:inline;
}
*+ html .pager ul li {
    display:inline;
    margin:0 6px 0 0;
}

.pager .more {
    display:inline-block;
    color:blue;
    font-size:11px;
}
*+ html .pager .more {
    display:inline;
}
.season-box h5 {
    margin:0 0 12px 0;
    color:#58a86a;
    font-size:14px;
}
.season-box h2 {
    margin:0 0 5px 0!important;
}
.season-box li img, .season-box img {
    margin:0 0 13px 0;
}
.list {
    list-style:none;
    padding:0;
    margin:0;
    width:264px;
}
.list li {
    padding:0 0 0 32px;
    margin:0 0 12px 0;
    position:static !important;
    font-size:14px;
}​

Answer 1

Вы можете сделать слайдер самостоятельно. Попробуйте этот код: http://jsfiddle.net/Bbuyu/16/

Единственные изменения, которые я сделал, - это присвоение идентификатору слайд-бокса идентификатора для вызова их с помощью jquery, а затем добавление события onclick к кнопкам. Также удалили теги "a href", потому что они были бесполезны.

Если вы хотите использовать какую-то анимацию на слайде, вы можете искать анимации в руководстве по jquery, их много, но лично я постараюсь быть с ними очень минималистично.