<ul class="banner">
  <li>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13239/forside_banner_1.jpg" alt="" />
     <div class="banner-tekst">
  			<p>Med en bred vifte af<br />tilbud sikre GTS, at du kan<br />føle dig TRYG i dit eget hjem</p>
  		</div>
  </li>
  
    <li>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13239/forside_banner_2.jpg" alt="" />
       <div class="banner-tekst">
  			<p>jhv hvhhjhvhvhvkjmhjkvjhv ,hjb ,hb ,hjkb kj ,hjvhj</p>
  		</div>
  </li>
  
    <li>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13239/forside_banner_3.jpg" alt="" />
       <div class="banner-tekst">
  			<p>kjb lhjbk v hjv hjvhjv kjn Æøjk lvcvhmgcg</p>
  		</div>
  </li>
  
    <li>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13239/forside_banner_4.jpg" alt="" />
      <div class="banner-tekst">
  			<p>æasnv ælkNRWG ALDJBKDB kjbv kjvb jkd</p>
  		</div>
  </li>
</ul>

ul.banner {
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
   width: 986px;
  height: 338px;
}
ul.banner li {
	margin: 0;
	padding: 0;
	list-style-type: none;
  position: absolute;
  width: 986px;
  height: 338px;
  
}
.banner-tekst {
	position: absolute;
	color: #fff;
	z-index: 100;
	right: 0;
	top: 0;
	bottom: 68px;
	width: 280px;
	font-size: 1.2em;
	line-height: 2em;
	text-align: right;
 
}
.banner-tekst p {
	padding: 0;
	position: absolute;
	bottom: 300px;
	right: 35px;
  
  -moz-transform: skewX(-200deg);
  -ms-transform: skewX(-200deg);
  -o-transform: skewX(-200deg);
  -webkit-transform: skewX(-200deg);
   transform: skewX(-200deg);
  
  -moz-transition: 1s all;
  -o-transition: 1s all;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.active .banner-tekst p, li:nth-child(1) .banner-tekst p{
 bottom: 0;
  -moz-transform: skewX(0deg);
 -ms-transform: skewX(0deg);
  -o-transform: skewX(0deg);
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

len = $('ul.banner').children().length;
if(len>1) {
$("ul.banner > li:gt(0)").hide();

setInterval(function() {
  $('ul.banner > li:first')
  .removeClass("active")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .addClass("active")
    .end()
    .appendTo('ul.banner');
},  8000);

}