JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<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...

SCSS

.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;
}



#slide-box {list-style:none}
#slide-box li {margin-bottom:0}
.nopad {
    padding:20px 0 15px 0 !important;
}


.bx-pager {
    text-align:right;
    position:relative;
    z-index:999999;
    margin:0 18px 0 0;
    padding:0;
    margin:0;
    }

.bx-pager a {
    border:1px solid #d26043;
    line-height:15px;
    background:blue;
    color:#fff;
    text-align:center;
    padding:3px; margin-right:5px
}
.bx-pager a:hover, .bx-pager a.pager-active {
    color:#d26043;
    background:#fff;
    text-decoration:none;
}


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

.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;
}

JavaScript

$(function(){
  $('#slide-box').bxSlider({
    mode: 'vertical',
    pager: true,
    controls: false,
      pagerType: 'full'
  });
});