Hi all
I’m using the caroufredsel carousel - http://caroufredsel.dev7studios.com
My problem is the carousel dosen’t load correctly until the window is resized
Does anyone know why this is.
http://www.ttmt.org.uk/carousel/index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel.js"></script>
<!--css-->
<style type="text/css">
*{
margin:0;
padding:0;
}
.carousel img{
max-width:900px;
height:auto;
}
@media only screen and (max-width:800px){
.carousel img{
max-width:700px;
height:auto;
}
}
@media only screen and (max-width:500px){
.carousel img{
max-width:400px;
height:auto;
}
}
@media only screen and (max-width:400px){
.carousel img{
max-width:300px;
height:auto;
}
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<section >
<div class="carousel">
<img src="images/slide-show-1.jpg" />
<img src="images/slide-show-2.jpg" />
<img src="images/slide-show-3.jpg" />
<img src="images/slide-show-4.jpg" />
</div>
</section>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.carousel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
});
});
</script>
</body>
</html