IDangerous Swiper Link funktioniert nicht, wenn sich der Schlitten nicht in der ursprünglichen Position befindet

Verwenden Sie einen fehlerhaften Swiper, siehe Slide1 lets go to google. Wenn diese Folie1 an der ursprünglichen Position ist (zuerst links in der Box), funktioniert der Link zu Google immer. Aber wenn wir wischen (oder die Maus ziehen und ablegen nach links und rechts) und Slide1 an Position 2 oder 3 ist, funktioniert der Klick nicht.IDangerous Swiper Link funktioniert nicht, wenn sich der Schlitten nicht in der ursprünglichen Position befindet

http://jsfiddle.net/C8ytu/

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Demo</title> 
    <link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css"> 
    <style> 
/* Demo Styles */ 
body { 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    line-height: 1.5; 
} 
.swiper-container { 
    width: 660px; 
    height: 250px; 
    color: #fff; 
    text-align: center; 
} 
.red-slide { 
    background: #ca4040; 
} 
.blue-slide { 
    background: #4390ee; 
} 
.orange-slide { 
    background: #ff8604; 
} 
.green-slide { 
    background: #49a430; 
} 
.pink-slide { 
    background: #973e76; 
} 
.swiper-slide .title { 
    font-style: italic; 
    font-size: 42px; 
    margin-top: 80px; 
    margin-bottom: 0; 
    line-height: 45px; 
} 
.pagination { 
    position: absolute; 
    z-index: 20; 
    left: 10px; 
    bottom: 10px; 
} 
.swiper-pagination-switch { 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    border-radius: 8px; 
    background: #222; 
    margin-right: 5px; 
    opacity: 0.8; 
    border: 1px solid #fff; 
    cursor: pointer; 
} 
.swiper-visible-switch { 
    background: #aaa; 
} 
.swiper-active-switch { 
    background: #fff; 
} 
    </style> 
</head> 
<body> 
    <div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide red-slide"> 
     <div class="title"><a href="http://www.google.com" target="_blank">lets go to google</a></div> 
     </div> 
     <div class="swiper-slide blue-slide"> 
     <div class="title">Slide 2</div> 
     </div> 
     <div class="swiper-slide orange-slide"> 
     <div class="title">Slide 3</div> 
     </div> 
     <div class="swiper-slide green-slide"> 
     <div class="title">Slide 4</div> 
     </div> 
     <div class="swiper-slide pink-slide"> 
     <div class="title">Slide 5</div> 
     </div> 
     <div class="swiper-slide red-slide"> 
     <div class="title">Slide 6</div> 
     </div> 
     <div class="swiper-slide blue-slide"> 
     <div class="title">Slide 7</div> 
     </div> 
     <div class="swiper-slide orange-slide"> 
     <div class="title">Slide 8</div> 
     </div> 
    </div> 
    <div class="pagination"></div> 
    </div> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script> 

    <script> 
    var mySwiper = new Swiper('.swiper-container',{ 
    pagination: '.pagination', 
    paginationClickable: true, 
    slidesPerView: 3, 
    loop: true 
    }) 
    </script> 
</body> 
</html>

Quelle

2013-09-04 caramba

Ich habe nicht Ihre Frage und Antwort überhaupt, aber Ihre jsfiddle. Es war hilfreich für mich zu sehen, wie Sie die Paginierung implementiert haben. Vielen Dank! –

Sie haben loopAdditionalSlides:3 in Sie Code hinzufügen, und das ist Ihr Problem lösen.

Sehen Sie hier die JSFiddle

JS:

var mySwiper = new Swiper('.swiper-container',{ 
    pagination: '.pagination', 
    loopAdditionalSlides:3, //<-- This one 
    paginationClickable: true, 
    slidesPerView: 3, 
    loop: true 
});

loopAdditionalSlides: "Addition Anzahl der Folien, die nach dem Erstellen der Schleife geklont werden" auf Sliding scheint

Documentation: Swiper Usage and API

Quelle

2013-09-09 16:11:29 aldanux

es funktioniert mehr als die Hälfte, aber immer noch nicht ein 100%. wenn Folie eins an Position eins ist: ein Klick auf Google und Tab öffnet sich. Wenn Folie 1 an Position 2 oder 3 ist, werden ZWEI Klicks benötigt, um zu Google zu gelangen (nur beim ersten Mal). irgendeine Lösung dafür? – caramba

@caramba - Entschuldigung, ich habe dies auf dem neuesten Chrome, Safari und FF getestet und kein Problem. Ich rutsche einmal (mit Paginierungsleiste oder Cursor) und seine Position 2 (mit Paginierungsleiste) dann einen Klick und öffnen Sie die Registerkarte. Ich schiebe mit dem Cursor viele Male und einen Klick und Tab öffnen. Für mich funktioniert das jetzt sehr gut. :-) – aldanux

Sie müssen sich nicht entschuldigen, danke für Ihre Zeit und Mühe! Du hast recht. Auch wenn ich mit den Paginierungstasten rutsche funktioniert es. Aber wenn ich per Drag & Drop mit dem Cursor schlüpfe, benötigt man in allen genannten Browsern einen Doppelklick. (immer noch nur für den ersten Klick) – caramba

So Richtig, der Tag wird nicht angeklickt. Ich helfe dir einfach dabei. Werfen Sie einen Blick auf die Screenshots ein, bevor klauen und die andere nach

Swiper before sliding

Swiper after sliding right

klauen changeed ich in einigen Code und Feuer abgehört es. Es scheint, dass Ihre js Datei auf dem übergeordneten div eine Art Klick fügt

<div class="swiper-slide orange-slide swiper-slide-visible swiper-slide-active" style="width: 165px; height: 250px;"> 
    <div class="title">Slide 8<br><a href="http://www.google.com" target="_blank">lets go to google</a></div> 
    </div>

wo es zusätzliche Klassen für das übergeordnete Div fügt

swiper-slide-visible swiper-slide-active

aber das gleiche auf Schiebe links nicht fügt jeder Klasse wo auch immer. es hält die Standardklassen

swiper-slide orange-slide

Überprüfen Sie die JS ... Ich kann Ihnen nur direkt :) Wenn Sie dann krank gehen wollen für eine Arbeit um, aber wenn Sie die js für einen Klick bearbeiten können dann bitte. Sagen Sie mir, wenn das Ihr Problem nicht löst :)

Quelle

2013-09-13 12:15:34 Anobik

danke, habe ich noch nicht gesehen! Vielleicht finde ich eine Lösung. sehr geschätzt – caramba

Glücklich zu helfen :) – Anobik

Sag mir, wenn Sie nicht krank weitergehen erkunden :) – Anobik

IDangerous Swiper Link funktioniert nicht, wenn sich der Schlitten nicht in der ursprünglichen Position befindet

Antwort

Verwandte Themen