0

I'm trying something out with flex slider where i have my non-active slides at 0.5 opacity, and the main fully visible. The viewport is set to 1280px wide, and the slide should center within the viewport. But on first load of the page, until the slider moves to the next slide and slides thereafter, the li is not centered within the viewport.

I've made a demo of the problem: http://jsfiddle.net/XMXGJ/94/

You will notice on first load you see parts of two slides, until it moves to the next slide then the li centers as it's supposed to.

For the purposes of the demo I've set flexslider to be 350px wide. What i want to achieve is to get the first slide centered within the viewport on first load.

The HTML:

<div class="flexslider loading">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
  </ul>
</div>

JS:

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    startAt: 0,
    start: function(slider) {
        slider.removeClass('loading');
    }
 });

CSS:

.flexslider {
  margin: 0;
  height: 483px;
  background: #fff;
  position: relative;
  zoom: 1;
  overflow: hidden;
}

.flex-viewport {
  width: 350px;
  margin: 0 auto;
  overflow: visible;
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.loading {
  max-height: 483px;
}

.flexslider .slides {
  zoom: 1;
}

.flexslider .slides li {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.flexslider .slides li.flex-active-slide {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.carousel li {
  margin-right: 5px;
}
Gerico
  • 5,079
  • 14
  • 44
  • 85

2 Answers2

0

Slides are displayed in linear sequence.. I have added inline style.

<div class="flexslider loading" style="text-align:center;">
<ul class="slides" style="margin:0 auto;">
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
</ul>
</div>
</center>
Vishwas
  • 6,967
  • 5
  • 42
  • 69
  • The `` tag has been deprecated in HTML so you should avoid using it in your work. Some reference: http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html – gvee Nov 22 '13 at 10:27
  • You can do it by applying style "text-align:center" to parent class(.flexslider) and setting "margin:0 auto;" to .slides. I will edit my answer. – Vishwas Nov 22 '13 at 10:45
0

I had a similar problem, and I solved it by using some of flexslider's properties of start and end to check the position of the slide, and comparing it relative to the parent container's position (.flex-viewport), and then adjusting that first appearing slide's position with inline styling, and then using flexsliders end() property to remove it after it has run though the first time. 

if(jQuery().flexslider) { // check that flexslider is a loaded function
     jQuery('#my-slider .flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            start: function(slider){
                var activeslideXpos = Math.round(jQuery('.flex-active-slide').position().left);
                if ( activeslideXpos < 0 ) { // check if value is negative and is offset incorrectly
                    var offset = Math.abs(activeslideXpos);
                    jQuery('.flex-active-slide').css({left:offset, position:'relative'});
                }           
                jQuery('.flexslider').removeClass('loading');
            },
            end: function(slider){
                jQuery('.slides li').css({left: '', position: ''});
            }
    });
}
Charlie
  • 1
  • 1