Search code examples
javascriptjqueryhtmlcssflexslider

Flexslider position of previous and next slides

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>

enter image description here

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?

Solution

  • UPDATE on what you need

    OMG! I now understand what you need! All this time I thought you where talking abouth the prev/next arrows I see that you want the others prev/next slides to be viewed.

    Just an example:

    .container {overflow: hidden; width: 100%}
.flexslider {margin: 0 auto}
.flex-viewport {overflow: visible !important}

    Check out the:

    ALSO:

       $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false //if you don't want it to slide auto
        });

    default is fade so with default(fade), it cannot do did implement

    FIDDLE