JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel vertical slide">
    <div class="carousel-inner">
        <div class="active item">
            <div class="weather">
                 <h2 class="text-success">
<img src="http://openweathermap.org/img/w/10d.png" alt="" />                         23                    
                         <sup class="muted degree">&#x2103;</sup>

                    </h2>

                <div class="muted"> <small>min: &#x2103;</small>
 <small>max: &#x2103;</small>

                </div>
                <h6 class="city">Birgunj</h6>
            </div>
        </div>
        <div class="item">
            <div class="weather">
                 <h2 class="text-success">
<img src="http://openweathermap.org/img/w/10d.png" alt="" />                         23                    
                         <sup class="muted degree">&#x2103;</sup>

                    </h2>

                <div class="muted"> <small>min: &#x2103;</small>
 <small>max: &#x2103;</small>

                </div>
                <div class="city">Birgunj</div>
            </div>
        </div>
        <div class="item">
            <div class="weather">
                 <h2 class="text-success">
<img src="http://openweathermap.org/img/w/10d.png" alt="" />                         23                    
                         <sup class="muted degree">&#x2103;</sup>

                    </h2>

                <div class="muted"> <small>min: &#x2103;</small>
 <small>max: &#x2103;</small>

                </div>
                <div class="city">Birgunj</div>
           ...

CSS

#myCarousel {
width: 120px;    
}

#myCarousel, .carousel-inner {
}
#myCarousel .item.active {
    /* background: #efefef; */

}
.active .city {
    /* background: #ddd; */
}
.degree {
    font-size: 14px;
    position: relative;
    top: 0px;
    vertical-align: super;
}
.vertical .carousel-inner {
    height: 100%;
}
.carousel.vertical .item {
    -webkit-transition: 0.9s ease-in-out top;
    -moz-transition: 0.9s ease-in-out top;
    -ms-transition: 0.9s ease-in-out top;
    -o-transition: 0.9s ease-in-out top;
    transition: 0.9s ease-in-out top;
}
.carousel.vertical .active {
    top: 0;
}
.carousel.vertical .next {
    top: 100%;
}
.carousel.vertical .prev {
    top: -100%;
}
.carousel.vertical .next.left, .carousel.vertical .prev.right {
    top: 0;
}
.carousel.vertical .active.left {
    top: -100%;
}
.carousel.vertical .active.right {
    top: 100%;
}
.carousel.vertical .item {
    left: 0;
}

JavaScript

$('#myCarousel').carousel({
    interval: 3000
});