标签: swiper

我在一个容器上应用了idangerous swiper滚动条插件,其内容是用ajax动态加载的,我在ajax调用后初始化插件,问题是在我调整浏览器大小之前滚动不起作用.我已经使用静态内容对其进行了测试,它工作正常,无需调整窗口大小,但是一旦切换到动态内容,滚动将无法工作单元我调整浏览器大小.

这是我如何初始化插件

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });  

这是html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

swiper-container高度为100%

我正在使用AngularJS,jQuery,HTML,CSS和Bootstrap创建一个Web应用程序,我想从我的JSON中选择一些位于Apache2服务器中的图像链接并使用它们来在我的主页面中呈现这些图像.我也想像旋转木马一样刷它们.为了做到这一点,我正在尝试使用iDangero.us Swiper.

当我用3个分开的div选择我的图像时,我没有问题.我得到了我的图像然后我可以按照我想要的方式刷它们.我这样做如下所示:

main.html中:

<div ng-init="initGetRequestMain()">

  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background1}}"></div>
  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background2}}"></div>
  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background3}}"></div>

   <script src="scripts/custom/main/swipers.js"></script>
</div>

我使用Swiper从一个图像滑动到另一个图像,它似乎应该工作.这是一个jQuery插件,你可以在这个链接上看到一些演示.

Swipers.js:

angular.module('swipers', [])
       .controller('',[ 
        $(document).ready(function (){
           var swiper = new Swiper('.swiper-container',{
           direction: 'horizontal',
           pagination: '.swiper-pagination',
           paginationClickable: true
       })
})]);

JSON:

"background1":"background-image: url(images/img1.jpg)",
"background2":"background-image: url(images/img2.jpg)",
"background3":"background-image: url(images/img3.jpg)"

mainController.js:

  myApp.controller('MainController', ["$scope","$http",                
                  function($scope,$http){

      $scope.initGetRequestMain = function(){

       $http.get('http://localhost/main.json').success(function(data){

         $scope.data=data;
       })
      }
  }]);

问题是,当我尝试使用ng-repeat而不是3个分开的div时,我再也看不到它们了,我的Swiper脚本在完全加载之前就会触发.我的控制台或JSON中没有错误(使用JSONLint验证).下面,我在两种情况下都添加了2个输出屏幕截图.

使用3个独立的div:

不使用ng-repeat:

这是我尝试使ng-repeat工作保持与以前相同的控制器和相同的Swiper脚本的代码:

main.html中:

  <div ng-init="initGetRequestMain()">

       <div ng-repeat="slide in data.slides" isLoaded=""> …

当我在90度上旋转滑动条时,我正在努力改变滑动方向.所以在开始时默认它有水平方向.当点击幻灯片时,我正在旋转"swiper-container"使其全屏显示.所以它仍然有从左到右的滑动方向,但我需要从上到下改变而不改变参数方向到垂直方向.

const topSwiper = new Swiper(this.DOMTopSwiper.current, {
  spaceBetween: 0,
  observer: true,
  observeParents: true,
  observeSlideChildren: true,
  direction: "vertical",
  navigation: {
    nextEl: ".top-swiper-button-next",
    prevEl: ".top-swiper-button-prev",
  },
  pagination: {
    el: ".zoom-amount-slides",
    type: "fraction",
  },
})

我在我的网站上使用iDangerous Swiper以较低的分辨率.这是我如何称呼它:

var resolution = 670;
if ($(window).width() < resolution) {
var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: true,
    grabCursor: true,
    paginationClickable: true
});

因此,当您在桌面浏览器中访问它时,将不会调用滑动器.我想要做的是"如果用户将窗口大小调整到小于resolution或者破坏它,如果用户以小窗口大小访问它,然后将其大小调整为大于",则"打开" resolution.我试过这个,但它不起作用:

$(window).resize(function(){
    if ($(window).width() < resolution) {
        if(typeof(mySwiper) === "undefined" ) {
            var mySwiper = $('.swiper-container').swiper({
                mode:'horizontal',
                loop: true,
                grabCursor: true,
                paginationClickable: true
            });
        }
    } else {
        if (typeof(mySwiper) !== "undefined" ) {
            mySwiper.destroy();
        }
    }
});

发生两件令人不快的事

1. 如果用户的分辨率很小,并将其调整为仍然调用狙击手的分辨率,则会重新启动狙击手.
2. 如果用户分辨率较小并将其调整为更大的分辨率,则不会被破坏.

我的问题是我的问题typeof.我不太清楚变量如何在它们被调用时如何工作:$('.swiper-container').swiper().

如何"取消"swiper以及如果已经调用它怎么不调用？

如果我有自定义菜单.

如何在Swiper.js中随时查看特定幻灯片？

<div class="menu">
    <ul>
    <li class="slide-3">go to slide 3</li>
    <li class="slide-5">go to slide 5</li>
    <li class="slide-1">go to slide 1</li>
    </ul>
</div>

我试过这样的东西但是没有用:

$('.slide-3').click(function(e) {
    e.preventDefault();
    $(".menu .active").removeClass('active');
    $(this).addClass('active');
    swipeTo( $('.pag2').index() );
});

我正在使用 Swiper 进行一个项目，并且在调整窗口大小后一切正常。但是在初始化时幻灯片的宽度不正确。我尝试在本地复制它，但没有成功。我为每个视图设置了 4 张幻灯片，但它正在计算 3 1/2 张幻灯片的宽度。我从我的配置中清除了除 slidesPerView 之外的所有内容，但根本没有任何变化。会不会与其他框架或插件发生某种冲突？如果需要其他信息来解决此问题，请询问！:-)

编辑

HTML：

<div id="gallery_container">
    <div id="galleryLeft"></div>
    <div id="gallery-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                ...
            </div>
        </div>
    </div>
    <div id="galleryRight"></div>
</div>

初始化：

(function($) {
    $(document).ready(function() {
        var gallery_swiper = new Swiper('#gallery-swiper', {
            slidesPerView: 3,
            spaceBetween: 0,
            speed: 500,
            prevButton: '#galleryLeft',
            nextButton: '#galleryRight'
        });

        var slides = gallery_swiper.slides.length;
        if(slides < 4) {
            $('#galleryLeft').css("display", "none");
            $('#galleryRight').css("display", "none");
            $('#gallery_container').css({
                "padding": "0"
            });
        }
    });
})(jQuery);

也许值得注意的是 gallery_container 是响应式的。滑块位于列内。

我需要构建一个包含 12 个项目的旋转木马，模拟无限旋转的 3d 轮。需要明确的是，我需要精确地创建这种效果：

https://codepen.io/SitePoint/pen/yXWXaw（在这里找到）

但是有了这些附加功能（尤其是在桌面和移动设备上）：

1. 幻灯片必须一步一步地跟随滑动，即滑动时应该移动（就像 Swiper 一样）。
2. 快速滑动它应该可以滚动许多带有动量的幻灯片（就像 Swiper 一样 freeScroll）。
3. 然后，当轮子停止旋转时，它会捕捉到前滑轨（就像 Swiper 使用freeModeSticky和 那样 centeredSlides），这是用户选择的滑轮。
4. 每次幻灯片更改（事件如slideChanged）（如 Swiper 所做的那样）时，我都需要回调。

由于所有这些原因，我认为Swiper 5.3.0将是一个很好的起点。

我尝试了各种解决方法，最好的方法是使用此设置，但这loop: true是一种糟糕的解决方法并会导致问题（查看评论）：

  var swiper = new Swiper(el_class, {
    slidesPerView: 1.5,
    spaceBetween: 25,
    centeredSlides: true,
    grabCursor: true,
    speed: 550,
    loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a while before render the …

我正在构建一个用于触摸屏设备的幻灯片(使用Swiper).

由于人们可以从两侧使用此设备,我希望能够旋转包含滑块的整个网页.当我旋转页面时,幻灯片显示需要反转,以便向左滚动,将有效地保留,反之亦然.

我试过了两个:

mousewheelInvert和controlInverse,但它们似乎都没有正确响应触摸事件？

这些是Swiper库的属性,可以在这里找到:http://idangero.us/swiper/api/#.WVDHLROGN24

有人曾尝试过这个吗？提前致谢

我想获得swiper-wrapper实时的translateX .我会用实时translateX做一些工作.

swiper.on('sliderMove', function onSliderMove() {
  console.log(this.getTranslate(), this.translate); //-64 -64, or maybe other value, but not -320
});

我听sliderMove事件,但结果不正确.

我检查swiper-wrapper元素,风格是

transition-duration: 0ms; 
transform: translate3d(-320px, 0px, 0px);

我希望它的价值this.getTranslate()应该是-320,而不是-64

首先感谢您抽出宝贵时间，因为我整个上午都在讨论这个问题。如何在 vue.JS 上使用https://idangero.us/swiper模块？确实 Swiper 在页面上，但参数似乎没有被计算在内。

我也尝试过 vue awesome swiper，但我更喜欢使用没有错误的官方版本。我试图在导入后也在 const 中初始化 swiper。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <v-touch
         @tap="navigateTo(item)"
         v-for="item in subList"
         :key="item._id"
         class="swiper-slide"
      >
        {{t(item.sentence)}}
      </v-touch>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  import 'swiper/dist/js/swiper.js'
  export default {
    name: 'category',
    data () {
      return {
        subList: [{some data}],
      }
    },
    mounted () {
      this.initSwiper()
    },
    methods: {
      initSwiper () {
        const mySwiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 50
        })
        mySwiper.init() …