flexslider z środku bieżącego obrazu

próbuję zbudować Flexslider Carousel - która ma wiele obrazów, ale obecny obraz jest wyśrodkowany, z Next/Prev obrazami po obu stronach wykraczających poza ekranem - lubicie to http://www.ncad.ie/flexslider z środku bieżącego obrazu

do tej pory mam go z jednego obrazu: http://jsfiddle.net/Y3kx5/

lookign wokół innych kwestii ten przejmuje go rozwiązać, ale nie mogę zmusić go do pracy: FlexSlider: Center current image

próbowaliśmy innych flexslider JS takie jak:

$('.flexslider').flexslider({ 
animation: "slide", 
controlNav: false, 
itemWidth: 800, 
minItems: 3, 
maxItems: 3 
});

ale to 3 obrazy na ekranie - a ja chce tylko aktualna być w pełni ekranie z następnej/prev wyświetlanie tylko tyle, ile okno pozwala.

Z góry dziękuję .ben.

Źródło

2013-08-20 topiman

Możesz dodać kilka reguł CSS, aby zmienić aspekt suwaka i przesunąć nawigatory poza granice obrazu suwaka.

Kod:

.content { 
    background: #f2f2f2; 
    max-width: 800px; 
    display: block; 
    margin: 0 auto 
} 
.flex-direction-nav .flex-next { 
    right: 0 !important; 
    margin-right: -30px; 
    opacity: 1 !important; 
} 
.flex-direction-nav .flex-prev { 
    left: 0 !important; 
    opacity: 1 !important; 
    margin-left: -30px; 
} 
.flexslider { 
    width: 90%; 
    margin: 0 auto; 
}

Demo: http://jsfiddle.net/IrvinDominin/899SD/

Źródło

2013-08-20 18:28:45

Witam - dziękuję za odpowiedź - ale to, czego szukam, to posiadanie następnego/poprzedniego obrazu (nie strzałek) obok bieżącego obrazu, ale pokazującego tylko tyle, ile jest miejsca na ekranie - jak w: http: //www.ncad.ie/ – topiman

Nie wiem, czy to możliwe za pomocą tej wtyczki, zobaczę. W końcu możesz przejść do innej wtyczki? –

Może potencjalnie przenieść się do innego, ale Flexslider jest najlepszy pod względem rozmiaru przesuwania/reagowania itp. I jest tam moduł Drupala. Jeśli chodzi o rozwiązanie, autor Flexslider wymienia tutaj jeden, który próbowałem i działa to inaczej, z wyjątkiem tego, że tworzy on poziome przewijanie: https://github.com/woothemes/FlexSlider/issues/212 – topiman

Właściwie właśnie rozwiązany :-)

Oto ostateczny kawałek: http://jsfiddle.net/Y3kx5/2/

zrobić z CSS:

.container {overflow: hidden; width: 100%} 
.flexslider {max-width: 800px; width: 800px; margin: 0 auto} 
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto} 
.flex-viewport {overflow: visible !important}

Źródło

2013-08-21 09:52:28 topiman

Dzięki za udostępnienie topiman – FatalMojo

flexslider z środku bieżącego obrazu

Odpowiedz

Powiązane problemy