Center flexslider images

Question

Мне было интересно, можно ли дать flexslider минимальную высоту (конечно, это возможно), но что изображения ползунка будут переполняться с помощью окна просмотра с обеих сторон, слева и справа, так что середина изображение будет центрировано в середине области просмотра. Как с трюком margin-left: -width.

Я использую основную разметку FlexSlider:

<section class="slider"> 
      <div class="flexslider"> 
       <ul class="slides"> 
        <li> 
         <img src="images/slide2.jpg" /> 
        </li> 
        <li> 
         <img src="images/slide2.jpg" /> 
        </li> 
        <li> 
         <img src="images/slide2.jpg" /> 
        </li> 
        <li> 
         <img src="images/slide2.jpg" /> 
        </li> 
       </ul> 
      </div> 
     </section> 

Чем я добавил начало и до того к слайдера плагина:

$('.flexslider').flexslider({ 
     animation: "slide", 
     slideshowSpeed: 5000, 
     manualControls: ".custom-controls li", 
     directionNav: false, 
     useCSS: false, /* Chrome fix*/ 
     start: function(slider){ 
      $('body').removeClass('loading'); 

      $('.flexslider').css({ 
       position:'absolute', 
       left: ($(window).width() - $('.flexslider').outerWidth())/2, 
       top: ($(window).height() - $('.flexslider').outerHeight())/2 
      }); 
     }, 
     before: function(slider) { 
      $('.flexslider').css({ 
       position:'absolute', 
       left: ($(window).width() - $('.flexslider').outerWidth())/2, 
       top: ($(window).height() - $('.flexslider').outerHeight())/2 
      }); 
     } 
    }); 

Но это не работает для меня. Я не думаю, что здесь получаю нужные элементы. Пробовал также $('.flexslider .slides li img'), но ничего не работает с этими селекторами. Работает только верхнее свойство в приведенном выше коде.

Заранее спасибо.

Answer 1

вы можете использовать следующий CSS:

.flexslider { 
    position:fixed; 
    left:50%; 
    top:50%; 
    transform: translate(-50%, -50%); 
} 

Example