Skip to content

Instantly share code, notes, and snippets.

@s0ren

s0ren/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Save s0ren/8e05da8e98d8f9db143f to your computer and use it in GitHub Desktop.
Save s0ren/8e05da8e98d8f9db143f to your computer and use it in GitHub Desktop.
Download ZIP
Integration af OWL dias-karosel i Londonopgaven
Raw
index.html
<html>
<!-- Find owl på http://www.owlgraphic.com/owlcarousel/ -->
<head>
<!-- ******************* Klippet fra OWL -- START ************************ -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- owl -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.transitions.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<!-- ******************* Klippet fra OWL -- SLUT ************************ -->
<!-- <link type="text/css" href="style.css" rel="stylesheet">-->
<style type="text/css">
/* DETTE ER ET UDDRAG AF DET OPRINDELIGE style.css */
/* Hoved artiklen
******************************/
article {
height: 461px;
width: 841px;
float:left;
box-sizing: border-box;
padding-top: 25px;
padding-right: 40px;
}
article h1, article p, article ul {
margin-left: 300px;
}
article h1 {
font-family: Times;
margin-top: 5px;
margin-bottom: 5px;
color:rgb(57,84,163);
font-size: 24px;
}
article p {
font-size: 13px;
}
article ul {
margin-top: 1em;
margin-bottom: 1em;
}
article li{
margin-left: 1.5em;
}
/* Side boksen til højre for artiklen
************************************************/
aside {
height: 461px;
width: 181px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<article>
<h1>Helligdage i London</h1>
</article>
<aside>
<!-- ******************* Klippet fra OWL -- START ************************ -->
<style type="text/css">
#owl-demo .item{
margin: 0px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
border:none;
}
.owl-pagination
{
color: yellow;
background-color: red;
}
div.owl-buttons {
margin-top:-20px;
color: yellow;
background-color: red;
}
div.owl-buttons div:first-child {
float: left;
display: inline-block;
}
div.owl-buttons div:last-child {
float: right;
display: inline-block;
}
</style>
<div id="owl-demo" class="owl-carousel">
<!-- Disse tre billeder har jeg selv indsat... -->
<div class="item">
<img class="lazyOwl" data-src="assets/carosel/bus.jpg" alt="Lazy Owl Image">
</div>
<div class="item">
<img class="lazyOwl" data-src="assets/carosel/pagode.jpg" alt="Lazy Owl Image">
</div>
<div class="item">
<img class="lazyOwl" data-src="assets/carosel/postkasse.jpg" alt="Lazy Owl Image">
</div>
</div>
<!-- ******************* Klippet fra OWL -- SLUT ************************ -->
</aside>
<footer>
</footer>
</div>
<!-- ******************* Klippet fra OWL -- START ************************ -->
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 1, // her har jeg ændret til et
lazyLoad : true,
navigation : true,
autoPlay : 5000
});
});
</script>
<!-- ******************* Klippet fra OWL -- SLUT ************************ -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment