title: simple jquery pagination (content slider)
body: <p>I want to make content slider where content will change on cliking the pagination at bottom like this <img src="https://i.stack.imgur.com/0dEx4.png" alt="enter image description here"></p>
  
  <p>I have made written HTML/CSS for this</p>
  
  <p><a href="http://jsfiddle.net/jitendravyas/Bbuyu/6/" rel="nofollow noreferrer">http://jsfiddle.net/jitendravyas/Bbuyu/6/</a></p>
  
  <p>Which jquery plugin you would prefer to use with it. I have tried some but they have different type of mark-up and I don't want to change my mark-up</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="season-box"&gt;
            &lt;div class="slide-outer nopad"&gt;
              &lt;ul id="slide-box"&gt;
  
                 &lt;!--  slide 1 --&gt;
                &lt;li&gt; &lt;img src="http://lorempixel.com/264/139" alt="season"&gt;
                  &lt;h5&gt;Lorem Ipsum&lt;/h5&gt;
                  &lt;p&gt;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...&lt;/p&gt;
                  &lt;ul class="list"&gt;
                    &lt;li class="icon1"&gt;&lt;strong&gt;1200&lt;/strong&gt; onwards&amp;gt;&lt;/li&gt;
                    &lt;li class="icon2"&gt;&lt;strong&gt;129&lt;/strong&gt; hotels&lt;/li&gt;
                    &lt;li class="icon3"&gt;&lt;strong&gt;24&lt;/strong&gt;things to do | Most popular: Scuba diving&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
  
                  &lt;!--  slide 2 --&gt;
                &lt;li&gt; &lt;img src="http://lorempixel.com/264/139" alt="season"&gt;
                  &lt;h5Lorem Ipsum Islands&lt;/h5&gt;
                  &lt;p&gt;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...&lt;/p&gt;
                  &lt;ul class="list"&gt;
                    &lt;li class="icon1"&gt;&lt;strong&gt;1200&lt;/strong&gt; onwards&lt;/li&gt;
                    &lt;li class="icon2"&gt;&lt;strong&gt;129&lt;/strong&gt; hotels&lt;/li&gt;
                    &lt;li class="icon3"&gt;&lt;strong&gt;24&lt;/strong&gt; things to do | Most popular: Scuba diving&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
  
                       &lt;!--  slide 3 --&gt;
                &lt;li&gt; &lt;img src="http://lorempixel.com/264/139" alt="season"&gt;
                  &lt;h5&gt;Andaman Nicobar Islands&lt;/h5&gt;
                  &lt;p&gt;Andaman &amp;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...&lt;/p&gt;
                  &lt;ul class="list"&gt;
                    &lt;li class="icon1"&gt;&lt;strong&gt;1200&lt;/strong&gt; onwards&lt;/li&gt;
                    &lt;li class="icon2"&gt;&lt;strong&gt;129&lt;/strong&gt; hotels&lt;/li&gt;
                    &lt;li class="icon3"&gt;&lt;strong&gt;24&lt;/strong&gt; things to do | Most popular: Scuba diving&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
  
  
                &lt;!--  Pagination --&gt;
              &lt;div class="pager"&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" class="active"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }​
  </code></pre>