使用圖像映射的JQuery Swiper哈希頁更改

我試圖使用圖像映射（「熱點」）來更改JQuery Swiper實現上的頁面。請參閱測試頁http://www.homeducate.me/takeTheTour.htm 它有一個熱點圖像，我希望能夠點擊直接切換頁面，同時仍然允許頁面之間的滑動瀏覽！使用圖像映射的JQuery Swiper哈希頁更改

我試圖使用idangerous.swiper.hashnav.min.js插件，它允許#page被報告到URL和一個特定的#page被導航到直接。我的希望是，這也可以讓我導航到圖像映射中的特定頁面。從我的代碼

提取物：

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
    <br> 
     <map name="FPMap0" id="FPMap0"> 
     <area href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" /> 
     <area href="#slide1" shape="polygon" coords="186, 2, 235, 3, 236, 26, 186, 27" /> 
     <area href="#slide2" shape="polygon" coords="2, 129, 237, 128, 237, 159, 4, 159" /> 
     <area href="#slide3" shape="polygon" coords="4, 158, 237, 158, 237, 187, 1, 186" /> 
     <area href="#slide4" shape="polygon" coords="1, 187, 237, 186, 237, 220, 1, 221" /> 
     <area href="#slide5" shape="polygon" coords="1, 222, 237, 221, 237, 253, 2, 252" /> 
     <area href="#slide6" shape="polygon" coords="2, 252, 237, 251, 237, 281, 3, 281" /> 
     </map> 
     <!--Slide 1--> 
     <div class="swiper-slide" data-hash="slide1"> 
     <!-- Any HTML content of the 1st slide goes here --> 
     <img src="http://www.homeducate.me/images/tour1.jpg" class="imgSizer" usemap="#FPMap0" /> 
     </div>

等

我認真遵循實施音符，但我發現在Chrome devtools一個錯誤：「未捕獲的SyntaxError：意外的標記<」在idangerous.swiper.hashnav.min.js

任何人都可以幫我找到問題嗎？我正在絞盡腦汁，但無法發現它。有沒有更好的方法來實現我想要做的事情？任何幫助真的很感激。

乾杯。

來源

2014-06-11 Scotsman

你有沒有看過'idangerous.swiper.hashnav.min.js'的源代碼，這通常是一個標誌，表明服務器正在返回一個404頁面，這是一個HTML頁面與JS ...即。 '<'錯誤來自'<！！DOCTYPE html> – Shanimal

謝謝。我找到了一個解決方案，如下所示。感謝您的迴應。乾杯。 – Scotsman

找到了答案.....

添加一個onclick的影像地圖，具體如下：

<map name="FPMap0" id="FPMap0"> 
    <area onclick="mySwiper.swipeTo(6)" href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" />

等

然後之前和下方的添加如下腳本mySwiper腳本：

$('a[data-slide]').click(function(e){ 
    e.preventDefault(); 
    mySwiper.swipeTo(
    $(this).data('slide')); 
    })

工作一個夢想。

多虧了類似的例子/討論我的Github.com https://github.com/nolimits4web/Swiper/issues/701

幻燈片發現從0

編號希望這個答案可以幫助別人，將來別人。

乾杯。

來源

2014-06-12 16:14:32 Scotsman

你可以通過標記綠色勾號來接受它作爲你的問題的答案。 – Jai

使用圖像映射的JQuery Swiper哈希頁更改

回答

相關問題