Niebezpieczne połączenie sworzniowe nie działa, gdy suwak nie znajduje się na oryginalnym położeniu.

Używanie niesteroidnego suwaka, patrz slajd1 lets go to google. Jeśli Slajd 1 znajduje się w pierwotnej pozycji (pierwszy w polu), link do google zawsze będzie działał. Ale jeśli przeciągniemy (lub przeciągniemy myszą i upuścimy w lewo i prawo), a S1 będzie na pozycji 2 lub 3, kliknięcie nie będzie działać.Niebezpieczne połączenie sworzniowe nie działa, gdy suwak nie znajduje się na oryginalnym położeniu.

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>

Źródło

2013-09-04 caramba

Nie użyłem twojego pytania i odpowiedzi w ogóle, ale twoje jsfiddle. Przydał mi się sposób implementacji stronicowania. Dziękuję Ci! –

Trzeba dodać loopAdditionalSlides:3 w was kodu i że rozwiąże Twój problem.

Zobacz Tutaj JSFiddle

JS:

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

loopAdditionalSlides: "numer Dodanie slajdy, które będą klonowane po utworzeniu pętli"

Documentation: Swiper Usage and API

Źródło

2013-09-09 16:11:29 aldanux

działa więcej niż w połowie, ale nadal nie jest w 100%. jeśli slajd jest na pozycji pierwszej: jedno kliknięcie w google i karta otwiera. jeśli slajd jest w pozycji 2 lub 3, do przejścia do google potrzebne są DWIE kliknięcia (tylko za pierwszym razem). jakieś rozwiązanie? – caramba

@caramba - Przepraszam, testowałem to na najnowszych Chrome, Safari i FF i nie ma problemu. Przesuwam jeden raz (z pasem paginacji lub kursorem) i jego pozycją 2 (z paskiem paginacji), a następnie jednym kliknięciem i otwartą zakładką. Przesuwam kursor wiele razy, a jedno kliknięcie i otwartą kartę. Dla mnie teraz działa bardzo dobrze. :-) – aldanux

nie musisz żałować, dziękuję za poświęcony czas i wysiłek! masz rację. Również, jeśli przesuwam się za pomocą przycisków paginacji, to działa. Ale jeśli przesuniemy kursor na przeciąganie i upuszczanie, potrzebne jest podwójne kliknięcie we wszystkich wymienionych przeglądarkach. (wciąż tylko za pierwszym kliknięciem) – caramba

więc wydaje na przesuwne Prawo Tag nie jest kliknięty. Po prostu Pomagam ci w tym. Spójrz na zrzuty ekranu jednym przed przesuwając i innych po przesuwając

Swiper before sliding

Swiper after sliding right

I changeed w niektórych kodu i ogień podsłuchu go. Wydaje się, że plik js jest dodanie rodzaju kliknięcia na div

<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>

gdzie jest dodanie dodatkowych zajęć na div

swiper-slide-visible swiper-slide-active

ale to samo na przesuwanie w lewo nie jest dodanie dowolnego klasy gdziekolwiek. utrzymuje klas domyślnych

swiper-slide orange-slide

Sprawdź JS ... Mogę jedynie skierować cię :) Jeśli chcesz potem źle iść do pracy wokół, ale jeśli można edytować js za kliknięcie to proszę zrobić. Powiedz mi, czy to nie rozwiąże twojego problemu :)

Źródło

2013-09-13 12:15:34 Anobik

dziękuję, nie widziałem tego wcześniej! może znajdę rozwiązanie. bardzo wdzięczny – caramba

Z przyjemnością pomogę :) – Anobik

Powiedz mi, jeśli nie chcesz iść dalej zwiedzanie :) – Anobik

Niebezpieczne połączenie sworzniowe nie działa, gdy suwak nie znajduje się na oryginalnym położeniu.

Odpowiedz

Powiązane problemy