pagination jquery simple (curseur contenu)

Question

Je veux faire curseur contenu où le contenu changera sur cliquant la pagination en bas comme celui-ci

J'ai écrit HTML/CSS pour cette

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

Quel plugin jquery vous préférez utiliser avec. Je l'ai essayé quelques-uns, mais ils ont différents types de majoration et je ne veux pas modifier ma marge

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

Vous peut faire le curseur par vous-même. Essayez ce code: http://jsfiddle.net/Bbuyu/16/

Les seules modifications que j'ai faites sont de donner un ID au li de la boîte de dialogue pour les appeler avec jquery, puis d'ajouter un événement onclick aux boutons. Ont également supprimé les balises "a href" parce qu'ils étaient inutiles.

Si vous souhaitez utiliser une sorte d'animation dans la diapositive, vous pouvez rechercher des animations dans le guide jquery, il y en a beaucoup, mais, personnellement, j'essayerais d'être très minimaliste avec eux.