Question

我在idangerous的jquery版本中使用swiper。我用require.js加载并初始化它，如下所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using java.io;
using edu.stanford.nlp.process;
using edu.stanford.nlp.ling;
using edu.stanford.nlp.trees;
using edu.stanford.nlp.parser.lexparser;
using Console = System.Console;

namespace Parser
{   

    class Parser
    {
        //loads the lexical parser
        private static LexicalizedParser LoadLexicalizedParser()
        {
            // Path to models extracted from `stanford-parser-3.5.2-models.jar`
            var jarRoot = @"E:\Project\stanford-parser-full-2015-04-20\stanford-parser-3.5.2-models";
            var modelsDirectory = jarRoot + @"\edu\stanford\nlp\models";

            // Loading english PCFG parser from file
            var lp = LexicalizedParser.loadModel(modelsDirectory + @"\lexparser\englishPCFG.ser.gz");

            return lp;
        }

        //gets the lexical tree for a 'sentence'
        private static Tree GetLexicalTree(LexicalizedParser lp, string sentence)
        {
            string[] words = sentence.Split(' ');   
            // This sample shows parsing a list of correctly tokenized words            
            var rawWords = Sentence.toCoreLabelList(words);
            var tree = lp.apply(rawWords);

            return tree;
        }

        //gets the constituency tree from the lexical 'tree' as a string
        private static string GetConstituencyTree(Tree tree)
        {
            return tree.pennString();
        }

        //gets the dependency tree from the lexical 'tree' as a string
        private static string GetDependencyTree(Tree tree)
        {
            // Extract dependencies from lexical tree
            var tlp = new PennTreebankLanguagePack();
            var gsf = tlp.grammaticalStructureFactory();
            var gs = gsf.newGrammaticalStructure(tree);
            var tdl = gs.typedDependenciesCCprocessed();

            string dependencyTree = String.Empty;

            for (int i = 0; i < tdl.size(); ++i)
                dependencyTree += tdl.get(i) + "\n";

            return dependencyTree;
        }


        static void Main()
        {
            var lp = LoadLexicalizedParser();
            string sentence = "This is an easy sentence.";

            Tree tree = GetLexicalTree(lp, sentence);

            string constituencyTree = GetConstituencyTree(tree);
            string dependencyTree = GetDependencyTree(tree);

            Console.WriteLine("Constituency Tree\n" + constituencyTree);
            Console.WriteLine("Dependency Tree\n" + dependencyTree);

            //// Extract collapsed dependencies from parsed tree
            //var tp = new TreePrint("penn,typedDependenciesCollapsed");
            //tp.printTree(tree);
        }
    }
}

define(['jquery','swiper'],function($){
  $( document ).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
      speed:100,

      // If we need pagination
      // Navigation arrows
      nextButton: '.m-stage-button-next',
      prevButton: '.m-stage-button-prev',

    });
  });
});

（那些{{}}的东西现在只是占位符）

所有东西都被加载并且渲染得很好，但是当我尝试滑动时，我得到了

未捕获TypeError：无法在'Window'上执行'getComputedStyle'：参数1不是'Element'类型

任何提示？

Answer 1

而不是：

<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>

尝试将DIV's与外面的防尘盒分开：

<div style="width: auto; height: 300px;" class="swiper-container">
    <div class="swiper-wrapper"></div>
</div>

查看快速入门指南（第3点），获取SwiperJS正确HTML标记的示例：

http://www.idangero.us/swiper/get-started/

<!-- Slider main container -->
<div class="swiper-container">

    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">

        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>

    </div>

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>

</div>

Answer 2

在我的情况下，它是在此代码/场景中发生的（我使用swiperContainer- HTMLElement -更多 ==> {{1} }）。

logos

<!-- error code use logos twice -->
<div class="swiper-container logos">
    <div class="swiper-wrapper logos">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
</div>

抛出此错误：

非常容易解决此问题（从元素var mySwiper = new Swiper('.logos', { speed: 400 });中删除logos）。

Answer 3

我完全不知道失败是什么。我切换到Swiper 2.7.x，这没有任何问题。

看起来像Swiper 3.x和Require with almond目前有一些问题。

Answer 4

最快的解决方案是删除CLASS“徽标”，并将其作为ID“徽标”添加到同一元素。之后，在您的javascript文件中选择ID作为选择器。

例如：HTML

<div id="logos" class="swiper-container"> <!-- This line is edited -->
    <div class="swiper-wrapper logos">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
</div>

例如：JavaScript

//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', { 
    speed: 400
});

Answer 5

我在Angular 1.5应用程序中使用来自idangerous的swiper。使用鼠标滑动幻灯片时出现相同的错误，单击箭头没有错误更改幻灯片。对我来说这是一个时间问题。我通过将swiper var mySwiper = new Swiper('.swiper-container', {...的init移动到视图完成呈现的位置来解决它。

Answer 6

当我尝试使用教程中提供的一些代码时，这发生在我身上……我查看了官方文档并使用了他们的示例，并且没有问题

https://swiperjs.com/get-started

使用Swiper时无法执行getComputedStyle

6 个答案: