1

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?

1 Answer 1

5

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

8
  • Thanks, I don’t think I explained this too well so added a image in the original description, I need to be able to see the actual slides, think you suggestion refer to the navigation elements. Any further info would be greatly appreciated.
    – TJ15
    Jun 2, 2014 at 14:27
  • Yes that helps but looking at this..... cant you just make next/prev css with the correct dimension as i mentioned to be positioned the direction you want? You can do this in percentage too.. Jun 2, 2014 at 14:35
  • sorry for the confusion, when I refer to previous and next I mean the actual slides, so if slide 2 is showing you will see part of slide 1 to the left and part of slide 3 to the right. The next and previous buttons will be removed. Think the positioning is done with the transform3d in js but can’t seem to pull them in, any help is greatly appreciated.
    – TJ15
    Jun 5, 2014 at 10:18
  • Thank you, the FIDDLE example is exactly what I am looking for.....getting excited, I am missing something though. My test doesn't show the other slides, I have put the updated code in the question above. Solution in touching distance.
    – TJ15
    Jun 5, 2014 at 15:18
  • That's most likely your flexslider.css make sure you update and edit that too Jun 5, 2014 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.