2017-10-25 15 views
0

Ich möchte einen Schieberegler mit JQuery Swiper plugin, dass Slider Navigation ist aus Swiper sind. Ich habe zwei Element für die Navigation:CSS-Position des absoluten Elements ändern

<div class="swiper-button-next"></div> 
<div class="swiper-button-prev"></div> 

Wenn ich ändern right Eigenschaft .swiper-button-next gehen unter Eltern-Element ist und zeigen nicht richtig. Hier

Here is a JsFiddle example.

ist ein Bild meines erwarteten Ergebnisses: enter image description here

+0

was gibst du der rechten Eigenschaft und was passiert –

+0

zum Beispiel wenn ich 'rechts: 10px' nach' rechts: -10px' ändere die '.swiper-button-next' gehe unter das übergeordnete Element –

Antwort

0

Sie Polsterung in übergeordnetem Elemente hinzufügen und legen Sie die Navigationsposition

.swiper-container { 
    padding: 0 30px; 
} 
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { 
    left:0; 
} 
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { 
    right:0; 
} 

Aktualisiert Demo

+0

Es ist nicht genau was Ich will. Wenn Sie wischen, werden Dias unter Navigationselementen übergeben. Ich möchte, dass die Navigationselemente vollständig aus dem Swipe-Bereich entfernt sind. –

+0

Sie können das Navigationselement nicht vollständig aus dem Bereich entfernen, da '.swiper-container' das Attribut 'overflow: hidden' hat, damit Ihre Navigation ausgeblendet wird. –

0

Try Geben Sie einen höheren Z-Index der Klasse .swiper-button-next

Verwandte Themen