Step:-#1 css you have to put in your page keep it inside style file from where u wanna call it

like that -->><link href="http://www.FrontEndLab.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

<style>
body { counter-reset: item; }

.carousel-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  height: 100%;
  position: relative;
  padding: 0 0 0 50px;
  left: 0;
  margin: 0;
  transition: all 1s;
}

.carousel-inner .item {
  height: 100%;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0 50px 0 0;
}

.carousel-inner .item:before {
  counter-increment: item;
  content: counter(item);
}

.carousel-left,
.carousel-right {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
}

.carousel-left:before,
.carousel-right:before {
  content: "";
  background: #666;
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.5;
}

.carousel-left:hover:before,
.carousel-right:hover:before { opacity: 0.8; }

.carousel-left { left: 0; }

.carousel-right { right: 0; }

/*Demo styles*/

.carousel-wrapper {
  background: #055252;
  padding: 30px 0;
}

.carousel-inner .item {
  background: #eee;
  padding: 1em 2em;
  font-size: 1.2em;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px 0 #333;
}

.carousel-inner .item:hover {
  background: #fff;
  box-shadow: 1px 1px 3px 2px #333;
}

.carousel-left:before,
.carousel-right:before {
  background: url(arrows.png) no-repeat;
  width: 50px;
}

.carousel-left:before {
  left: 0;
  background-position: -20% center;
}

.carousel-right:before {
  right: 0;
  background-position: -40px center;
}
</style>


Step:-#2 Put this in your body tag

<div class="carousel-wrapper" id="products">
  <ul class="carousel-inner clearfix">
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
  </ul>
  <a href="#" class="carousel-left"></a>
 <a href="#" class="carousel-right"></a>
 </div>


Step:-#3 you also need keep jquery .you can include it like that 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Step:-#4 And last you have put a script in body tag enclosed by script tag

<script>
/*****
 * Carousel control
 */
var Carousel = function (elId, mode) {
  var wrapper = document.getElementById(elId);
  var innerEl = wrapper.getElementsByClassName('carousel-inner')[0];
  var leftButton = wrapper.getElementsByClassName('carousel-left')[0];
  var rightButton = wrapper.getElementsByClassName('carousel-right')[0];
  var items = wrapper.getElementsByClassName('item');

  this.carouselSize = items.length;
  this.itemWidth = null;
  this.itemOuterWidth = null;
  this.currentStep = 0;
  this.itemsAtOnce = 3;
  this.minItemWidth = 200;
  this.position = innerEl.style;
  this.mode = mode;

  this.init = function (mode) {
    this.itemsAtOnce = mode;
    this.calcWidth(wrapper, innerEl, items);
    cb_addEventListener(leftButton, 'click', this.goLeft.bind(this));
    cb_addEventListener(rightButton, 'click', this.goRight.bind(this));
    cb_addEventListener(window, 'resize', this.calcWidth.bind(this, wrapper, innerEl, items));
  };
  return this.init(mode);
};

Carousel.prototype = {
  goLeft: function(e) {
    e.preventDefault();
    if (this.currentStep) {
      --this.currentStep;
    } else {
      this.currentStep = this.carouselSize - this.itemsAtOnce;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  goRight: function(e) {
    e.preventDefault();
    if (this.currentStep < (this.carouselSize - this.itemsAtOnce)) {
      ++this.currentStep;
    } else {
      this.currentStep = 0;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  makeStep: function(step) {
    this.position.left = -(this.itemOuterWidth * step) + 'px';
  },
  calcWidth: function(wrapper, innerEl, items) {
    this.beResponsive();

    var itemStyle = window.getComputedStyle(items[0]);
    var innerElStyle = innerEl.style;
    var carouselLength = this.carouselSize;
    var wrapWidth = wrapper.offsetWidth - parseInt(itemStyle.marginRight, 10) * (this.itemsAtOnce + 1);

    innerElStyle.display = 'none';
    this.itemWidth = wrapWidth / this.itemsAtOnce;
    this.itemOuterWidth = this.itemWidth + parseInt(itemStyle.marginRight, 10);
    for (i = 0; i < carouselLength; i++) {
        items[i].style.width = this.itemWidth + 'px';
    }
    innerElStyle.width = this.itemOuterWidth * this.carouselSize + 'px';
    innerElStyle.display = 'block';
  },

  beResponsive: function() {
    var winWidth = window.innerWidth;
    if (winWidth >= 650 && winWidth < 950 && this.itemsAtOnce >= 2) {
      this.itemsAtOnce = 2;
    }
    else if (winWidth < 650) {
      this.itemsAtOnce = 1;
    }
    else {
      this.itemsAtOnce = this.mode;
    }
  }
}
/**
* Cross-browser Event Listener
**/
function cb_addEventListener(obj, evt, fnc) {
  if (obj && obj.addEventListener) {
      obj.addEventListener(evt, fnc, false);
      return true;
  } else if (obj && obj.attachEvent) {
      return obj.attachEvent('on' + evt, fnc);
  }
  return false;
}

//Initializing carousel
if (document.getElementById('products')) {
  var productsCarousel = new Carousel('products', 3);
}
if (document.getElementById('products2')) {
  var productsCarousel = new Carousel('products2', 2);
}
if (document.getElementById('products3')) {
  var productsCarousel = new Carousel('products3', 1);
}
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> 

jQuery Flexible Carousel

on September 25, 2014
Step:-#1 css you have to put in your page keep it inside style file from where u wanna call it

like that -->><link href="http://www.FrontEndLab.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

<style>
body { counter-reset: item; }

.carousel-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  height: 100%;
  position: relative;
  padding: 0 0 0 50px;
  left: 0;
  margin: 0;
  transition: all 1s;
}

.carousel-inner .item {
  height: 100%;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0 50px 0 0;
}

.carousel-inner .item:before {
  counter-increment: item;
  content: counter(item);
}

.carousel-left,
.carousel-right {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
}

.carousel-left:before,
.carousel-right:before {
  content: "";
  background: #666;
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.5;
}

.carousel-left:hover:before,
.carousel-right:hover:before { opacity: 0.8; }

.carousel-left { left: 0; }

.carousel-right { right: 0; }

/*Demo styles*/

.carousel-wrapper {
  background: #055252;
  padding: 30px 0;
}

.carousel-inner .item {
  background: #eee;
  padding: 1em 2em;
  font-size: 1.2em;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px 0 #333;
}

.carousel-inner .item:hover {
  background: #fff;
  box-shadow: 1px 1px 3px 2px #333;
}

.carousel-left:before,
.carousel-right:before {
  background: url(arrows.png) no-repeat;
  width: 50px;
}

.carousel-left:before {
  left: 0;
  background-position: -20% center;
}

.carousel-right:before {
  right: 0;
  background-position: -40px center;
}
</style>


Step:-#2 Put this in your body tag

<div class="carousel-wrapper" id="products">
  <ul class="carousel-inner clearfix">
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
    <li class="item">
      <p class="item-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum nulla vehicula hendrerit eleifend. Proin in metus sed enim sagittis tristique.</p>
    </li>
  </ul>
  <a href="#" class="carousel-left"></a>
 <a href="#" class="carousel-right"></a>
 </div>


Step:-#3 you also need keep jquery .you can include it like that 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Step:-#4 And last you have put a script in body tag enclosed by script tag

<script>
/*****
 * Carousel control
 */
var Carousel = function (elId, mode) {
  var wrapper = document.getElementById(elId);
  var innerEl = wrapper.getElementsByClassName('carousel-inner')[0];
  var leftButton = wrapper.getElementsByClassName('carousel-left')[0];
  var rightButton = wrapper.getElementsByClassName('carousel-right')[0];
  var items = wrapper.getElementsByClassName('item');

  this.carouselSize = items.length;
  this.itemWidth = null;
  this.itemOuterWidth = null;
  this.currentStep = 0;
  this.itemsAtOnce = 3;
  this.minItemWidth = 200;
  this.position = innerEl.style;
  this.mode = mode;

  this.init = function (mode) {
    this.itemsAtOnce = mode;
    this.calcWidth(wrapper, innerEl, items);
    cb_addEventListener(leftButton, 'click', this.goLeft.bind(this));
    cb_addEventListener(rightButton, 'click', this.goRight.bind(this));
    cb_addEventListener(window, 'resize', this.calcWidth.bind(this, wrapper, innerEl, items));
  };
  return this.init(mode);
};

Carousel.prototype = {
  goLeft: function(e) {
    e.preventDefault();
    if (this.currentStep) {
      --this.currentStep;
    } else {
      this.currentStep = this.carouselSize - this.itemsAtOnce;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  goRight: function(e) {
    e.preventDefault();
    if (this.currentStep < (this.carouselSize - this.itemsAtOnce)) {
      ++this.currentStep;
    } else {
      this.currentStep = 0;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  makeStep: function(step) {
    this.position.left = -(this.itemOuterWidth * step) + 'px';
  },
  calcWidth: function(wrapper, innerEl, items) {
    this.beResponsive();

    var itemStyle = window.getComputedStyle(items[0]);
    var innerElStyle = innerEl.style;
    var carouselLength = this.carouselSize;
    var wrapWidth = wrapper.offsetWidth - parseInt(itemStyle.marginRight, 10) * (this.itemsAtOnce + 1);

    innerElStyle.display = 'none';
    this.itemWidth = wrapWidth / this.itemsAtOnce;
    this.itemOuterWidth = this.itemWidth + parseInt(itemStyle.marginRight, 10);
    for (i = 0; i < carouselLength; i++) {
        items[i].style.width = this.itemWidth + 'px';
    }
    innerElStyle.width = this.itemOuterWidth * this.carouselSize + 'px';
    innerElStyle.display = 'block';
  },

  beResponsive: function() {
    var winWidth = window.innerWidth;
    if (winWidth >= 650 && winWidth < 950 && this.itemsAtOnce >= 2) {
      this.itemsAtOnce = 2;
    }
    else if (winWidth < 650) {
      this.itemsAtOnce = 1;
    }
    else {
      this.itemsAtOnce = this.mode;
    }
  }
}
/**
* Cross-browser Event Listener
**/
function cb_addEventListener(obj, evt, fnc) {
  if (obj && obj.addEventListener) {
      obj.addEventListener(evt, fnc, false);
      return true;
  } else if (obj && obj.attachEvent) {
      return obj.attachEvent('on' + evt, fnc);
  }
  return false;
}

//Initializing carousel
if (document.getElementById('products')) {
  var productsCarousel = new Carousel('products', 3);
}
if (document.getElementById('products2')) {
  var productsCarousel = new Carousel('products2', 2);
}
if (document.getElementById('products3')) {
  var productsCarousel = new Carousel('products3', 1);
}
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> 
So Scorpion debuted last night on CBS, bringing us the thrilling tale of "geniuses" who help DHS by setting up wifi access points in restaurants. Yes, that is a true plot point. It all leads to this scene, whose true meaning I will unfold for you so that you can appreciate the full amazing awfulness.
All you need to know about the main character is that he's a genius who is "on software," which means he tells people things like "open your email and click the link." He has trouble communicating his emotions because he's a geek who only understands machines, and he has a dusty warehouse space that's shared by a tough hardware expert, a hat-wearing psychology master, and a nerdy "human calculator."
video

This week, the DHS brings him an emergency! There is a bug in the local airport's software and now 200 planes are going to crash if he doesn't do something! So he decides that the best thing to do is reboot from a backup version (yes that is the ACTUAL SUPER ELITE HIGH TECH THING HE'S DOING). But where is the backup? Ohhhh, it turns out EVERY PLANE has it, and if only they could download it from one of the planes, everybody could land and nobody would crash. The only way to get that backup, though, is USING AN ETHERNET CABLE DANGLED OUT OF THE BOTTOM OF THE PLANE AND PLUGGED INTO HIS LAPTOP.
Oh I know, I know — you think that's ridiculous, right? But it's not! Because they ALREADY TRIED A WIFI CONNECTION and it didn't work. So obviously the next thing is the ethernet cable.
Also, the best way to do all this is to fly the plane low over the car that is racing ON THE LANDING STRIP. No, don't LAND THE DAMN PLANE on said strip and then reboot from the plane's backup (note that I am not even getting into the sheer dumbfoundery of the notion that the planes all have a backup of the software, or that the entire airport is run on "a piece of software," or that you can't land without software EVEN THOUGH WE ACTUALLY INVENTED PLANES BEFORE WE INVENTED COMPUTERS).
Oh and also? At one point, we see that all the computers are running VMware. Which — did VMware pay for product placement? Did Scorpion hire somebody with a job title like "cybersecurity ninja" from VMware to advise them? We may never know.
So anyway the guy gets some random chick from the diner where he installed some wifi to drive with him in his car and hook up the ethernet cable and save the airport. Yay! Airport rebooted! Hacker triumph! Next week, the geniuses will help a guy whose pants keep falling down.
I apologize for all the caps but I had a lot of feels.

Scorpion Brings the Stupidest, Most Batshit Insane Hacker Scene Ever

on September 25, 2014
So Scorpion debuted last night on CBS, bringing us the thrilling tale of "geniuses" who help DHS by setting up wifi access points in restaurants. Yes, that is a true plot point. It all leads to this scene, whose true meaning I will unfold for you so that you can appreciate the full amazing awfulness.
All you need to know about the main character is that he's a genius who is "on software," which means he tells people things like "open your email and click the link." He has trouble communicating his emotions because he's a geek who only understands machines, and he has a dusty warehouse space that's shared by a tough hardware expert, a hat-wearing psychology master, and a nerdy "human calculator."
video

This week, the DHS brings him an emergency! There is a bug in the local airport's software and now 200 planes are going to crash if he doesn't do something! So he decides that the best thing to do is reboot from a backup version (yes that is the ACTUAL SUPER ELITE HIGH TECH THING HE'S DOING). But where is the backup? Ohhhh, it turns out EVERY PLANE has it, and if only they could download it from one of the planes, everybody could land and nobody would crash. The only way to get that backup, though, is USING AN ETHERNET CABLE DANGLED OUT OF THE BOTTOM OF THE PLANE AND PLUGGED INTO HIS LAPTOP.
Oh I know, I know — you think that's ridiculous, right? But it's not! Because they ALREADY TRIED A WIFI CONNECTION and it didn't work. So obviously the next thing is the ethernet cable.
Also, the best way to do all this is to fly the plane low over the car that is racing ON THE LANDING STRIP. No, don't LAND THE DAMN PLANE on said strip and then reboot from the plane's backup (note that I am not even getting into the sheer dumbfoundery of the notion that the planes all have a backup of the software, or that the entire airport is run on "a piece of software," or that you can't land without software EVEN THOUGH WE ACTUALLY INVENTED PLANES BEFORE WE INVENTED COMPUTERS).
Oh and also? At one point, we see that all the computers are running VMware. Which — did VMware pay for product placement? Did Scorpion hire somebody with a job title like "cybersecurity ninja" from VMware to advise them? We may never know.
So anyway the guy gets some random chick from the diner where he installed some wifi to drive with him in his car and hook up the ethernet cable and save the airport. Yay! Airport rebooted! Hacker triumph! Next week, the geniuses will help a guy whose pants keep falling down.
I apologize for all the caps but I had a lot of feels.
How to make JQuery event handling work on ajax loaded content?
How to make JQuery event handling work on ajax loaded content?

This code allows us to use JQuery event handling work on ajax loaded content

$('body').on('click','#list-panel .item', function() {
        $('#list-panel .item').removeClass('active');
        $(this).addClass('active');
});


The above code is just an example to remove class "active" from other items and add it to the currently clicked element.

Related Questions

jQuery click not working in AJAX loaded content.
jQuery click() event not firing on AJAX loaded HTML elements
jquery click doesnt work on ajax generated content
jQuery not working in AJAX Loaded page
Jquery click function doesn't work after ajax call?
jQuery click() event not firing on AJAX loaded HTML elements
jQuery code doesn’t work on dynamic content loaded with ajax


How to make JQuery event handling work on ajax loaded content?

on September 11, 2014
How to make JQuery event handling work on ajax loaded content?
How to make JQuery event handling work on ajax loaded content?

This code allows us to use JQuery event handling work on ajax loaded content

$('body').on('click','#list-panel .item', function() {
        $('#list-panel .item').removeClass('active');
        $(this).addClass('active');
});


The above code is just an example to remove class "active" from other items and add it to the currently clicked element.

Related Questions

jQuery click not working in AJAX loaded content.
jQuery click() event not firing on AJAX loaded HTML elements
jquery click doesnt work on ajax generated content
jQuery not working in AJAX Loaded page
Jquery click function doesn't work after ajax call?
jQuery click() event not firing on AJAX loaded HTML elements
jQuery code doesn’t work on dynamic content loaded with ajax


If you add a class vertical to your carousel, then adding the following CSS to the page will override the sliding to be vertical:


.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s 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;
}​

Twitter Bootstrap carousel vertical sliding

on September 10, 2014
If you add a class vertical to your carousel, then adding the following CSS to the page will override the sliding to be vertical:


.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s 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;
}​

So here's what we are gonna do...

We're going to use "responsive design" principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we're going to reformat the table.
We're being good little developers and using Plain Ol' Semantic Markup here for our table. Bare bones example:
<table>
 <thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Job Title</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>James</td>
  <td>Matman</td>
  <td>Chief Sandwich Eater</td>
 </tr>
 <tr>
  <td>The</td>
  <td>Tick</td>
  <td>Crimefighter Sorta</td>
 </tr>
 </tbody>
</table>
Our regular CSS is nothing special:
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
The small-screen responsive stuff comes in now. We've already figured out our minimum table width is about 760px so we'll set up our media query to take effect when the narrower than that. Also, we'll target iPads as they are right in that zone.
The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it's kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each "cell", we'll use CSS generated content (:before) to apply the label, so we know what each bit of data means.
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

 /* Force table to not be like tables anymore */
 table, thead, tbody, th, td, tr { 
  display: block; 
 }
 
 /* Hide table headers (but not display: none;, for accessibility) */
 thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
 }
 
 tr { border: 1px solid #ccc; }
 
 td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee; 
  position: relative;
  padding-left: 50%; 
 }
 
 td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
 }
 
 /*
 Label the data
 */
 td:nth-of-type(1):before { content: "First Name"; }
 td:nth-of-type(2):before { content: "Last Name"; }
 td:nth-of-type(3):before { content: "Job Title"; }
 td:nth-of-type(4):before { content: "Favorite Color"; }
 td:nth-of-type(5):before { content: "Wars of Trek?"; }
 td:nth-of-type(6):before { content: "Porn Name"; }
 td:nth-of-type(7):before { content: "Date of Birth"; }
 td:nth-of-type(8):before { content: "Dream Vacation City"; }
 td:nth-of-type(9):before { content: "GPA"; }
 td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table:

Hey what about IE?

IE 9 and down don't like you setting table elements as display: block; It does weird stuff and doesn't work right. But IE 9 does support media queries. So my solution thus far is just to wrap the media query styles in conditional comments.
<!--[if !IE]><!-->
<style>
   /* table-related media query stuff only */
</style>
/* Or an external stylesheet or whatever */
<!--<![endif]-->
If the problem was only that older versions of IE don't support media queries, we could use the css3-mediaqueries-js project (polyfills support for all media queries) orRespond (also polyfill, way smaller, but only does min/max-width). They both work very well. But this isn't our problem in this case.
This all works fine in IE 10 and IE 10 also ignores conditional comments, so the styles will work even if wrapped in !IE conditionals.

How to make a responsive table

on September 09, 2014

So here's what we are gonna do...

We're going to use "responsive design" principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we're going to reformat the table.
We're being good little developers and using Plain Ol' Semantic Markup here for our table. Bare bones example:
<table>
 <thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Job Title</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>James</td>
  <td>Matman</td>
  <td>Chief Sandwich Eater</td>
 </tr>
 <tr>
  <td>The</td>
  <td>Tick</td>
  <td>Crimefighter Sorta</td>
 </tr>
 </tbody>
</table>
Our regular CSS is nothing special:
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
The small-screen responsive stuff comes in now. We've already figured out our minimum table width is about 760px so we'll set up our media query to take effect when the narrower than that. Also, we'll target iPads as they are right in that zone.
The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it's kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each "cell", we'll use CSS generated content (:before) to apply the label, so we know what each bit of data means.
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

 /* Force table to not be like tables anymore */
 table, thead, tbody, th, td, tr { 
  display: block; 
 }
 
 /* Hide table headers (but not display: none;, for accessibility) */
 thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
 }
 
 tr { border: 1px solid #ccc; }
 
 td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee; 
  position: relative;
  padding-left: 50%; 
 }
 
 td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
 }
 
 /*
 Label the data
 */
 td:nth-of-type(1):before { content: "First Name"; }
 td:nth-of-type(2):before { content: "Last Name"; }
 td:nth-of-type(3):before { content: "Job Title"; }
 td:nth-of-type(4):before { content: "Favorite Color"; }
 td:nth-of-type(5):before { content: "Wars of Trek?"; }
 td:nth-of-type(6):before { content: "Porn Name"; }
 td:nth-of-type(7):before { content: "Date of Birth"; }
 td:nth-of-type(8):before { content: "Dream Vacation City"; }
 td:nth-of-type(9):before { content: "GPA"; }
 td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table:

Hey what about IE?

IE 9 and down don't like you setting table elements as display: block; It does weird stuff and doesn't work right. But IE 9 does support media queries. So my solution thus far is just to wrap the media query styles in conditional comments.
<!--[if !IE]><!-->
<style>
   /* table-related media query stuff only */
</style>
/* Or an external stylesheet or whatever */
<!--<![endif]-->
If the problem was only that older versions of IE don't support media queries, we could use the css3-mediaqueries-js project (polyfills support for all media queries) orRespond (also polyfill, way smaller, but only does min/max-width). They both work very well. But this isn't our problem in this case.
This all works fine in IE 10 and IE 10 also ignores conditional comments, so the styles will work even if wrapped in !IE conditionals.
© www.frontendlab.net. Powered by Blogger.