I am using the basic flexslider, I wantto display some of the previous and next , so if slide 2 is showing you will see part of slide 1
to the left and part of slide 3
to the right.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
.container {overflow: hidden; width: 100%}
.flexslider {max-width: 500px; width: 500px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 500px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="flexslider">
<ul class="slides">
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
</ul>
</div>
</div>
<script src="jquery.flexslider.js"></script>
<script>
jQuery(document).ready(function($) {
// You can
use the locally-scoped $ in here as an alias
to jQuery.
$(window).load(function() {
$('.flexslider').flexslider();
});
});
</script>
</body>
</html>
I have reduced the image
to 70% and positioned it in the middle of the page. I want
to have the next and previous slides visible on either side of the main pic but no idea where
to make the appropriate changes (I assume in the js file). I thought this was a margin issue but setting this
to 0 in styles makes no difference. Has anyone done this and can provide some advice?
