Question

我尝试使用图像映射（＆＃34;热点＆＃34;）来更改JQuery Swiper实现上的页面。查看http://www.homeducate.me/takeTheTour.htm处的测试页它有一个热点图像，我希望能够点击直接切换页面，同时仍允许在页面之间滑动导航！

我尝试使用idangerous.swiper.hashnav.min.js插件，该插件允许将#page报告到网址中，并直接导航到特定的#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中收到错误：＆＃39; Uncaught SyntaxError：意外的令牌＆lt;＆＃39;在idangerous.swiper.hashnav.min.js

任何人都可以帮我找到问题吗？我摧毁了我的大脑，却无法发现它。有没有更好的方法来实现我想要做的事情？任何帮助真的很感激。

干杯。

Answer 1

找到答案.....

在图像地图上添加一个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开始编号。

希望这个答案可以帮助其他人。

干杯。

使用图像映射更改JQuery Swiper哈希页面

1 个答案: