Swiper常用于移动端网站的内容触摸滑动

magento的产品页面的橱窗展示支持触摸活动效果

这块代码应该是可以通用的，哈哈。

放在产品页面下面的media模板文件中。

<div class ="swiper-container">

  < div class = "swiper-wrapper" >

    <?php foreach ($this -> getGalleryImages() as $_image): ?>

        < div class = "swiper-slide" >< img src = " <?php echo $this -> helper( 'catalog/image' ) -> init($this -> getProduct(), 'thumbnail' , $_image -> getFile()) -> resize( 360 ); ?> " data-holder-rendered = "true" /></ div >

    <?php endforeach ; ?>

  </ div > 

  < div class = "swiper-pagination" id = "swiper-pagination1" > &nbsp; </ div >  

</ div >

< script type = "text/javascript" >

  var mySwiper = new Swiper( '.swiper-container' ,{

    loop : true ,

//   autoplay: 3000,

      pagination : '.swiper-pagination' ,

     paginationType : 'bullets' ,

  });

</ script >

记得设置图片居中就好了。

还要在catelog.xml当中引入,swiper插件相关的js与css.

            < action method = "addJs" >< script >jquery/swiper.min.js</ script ></ action >

            < action method = "addCss" >< stylesheet >css/swiper.min.css</ stylesheet ></ action >

本来是直接在media当中引入的，但是发现js放在文件当中会出现图片在页面加载以后竖排的问题。