Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
<div id="boxGallery">
  <div id="slider">
    <div style="background-color: red;">
      <p>Dette er en test</p>
    </div>
    <div style="background-color:green;">
      <h1>Juhuuuu</h1>
    </div>
    <div style="background-color: blue;">
      <i>Kursiv skrift er bare noget af det sejeste jeg overhovedet det.. bla blab lbabla bla bla r adfg sdfgl ksdgl ks</i>
    </div>
  </div>
</div>
  
  
</body>
</html>
 
#boxGallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:300px;
  height:250px;
}
#slider{
  position:absolute;
  left:0;
  height:250px;
}
#slider > div {
  position:relative;
  float:left;
  width:250px;
  height:250px;
}
 
$("#slider > div:gt(0)").hide();
setInterval(function() { 
  $('#slider > div:first').fadeOut(1000, function(){
    $(this).next()
    .fadeIn(1000)
    .end()
    .appendTo('#slider');
  });
},  3000);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers