javascript - 我无法让 jQuery 插件 AnythingSlider 在 JS Bin 中工作

Question

我正在尝试将 jQuery 插件添加到我正在为我的编码类(class)之一工作的网站。 (参见 https://jsbin.com/jawibotera/edit?html,output 处的代码)我正在尝试将插件 AnythingSlider 添加到我的代码中。我正在关注 Github wiki 页面 ( https://github.com/CSS-Tricks/AnythingSlider/wiki/Setup ) 上的文档，尤其是 head 标签中的代码和示例 HTML。然而，输出始终显示彼此下方的三张图片，而不是幻灯片放映。到目前为止，我已经更改了 css 页面并确保已将所有内容设置为 jQuery。我删除了所有可选插件并使用了我的编码类(class)中提供的所有链接。对于作业，我获得了这些链接:

http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/js/jquery.anythingslider.min.js

http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/css/anythingslider.css

即使我使用我的编码类(class)提供的链接，我也无法获得幻灯片。我查看了 Github 页面上示例的代码以仔细检查我自己的代码，但是我找不到任何错误。我应该将两个 css 页面链接到一个站点吗？如果不是，我应该使用哪个 css 页面？

Answer 1

我真的建议你使用 flexslider，因为在我看来它比这个好得多，而且我不知道你的实现有什么问题但是当你将你的网站移动到一个已经有 anythingslider 的 JSFiddle 之上时它，它工作得很好。这是链接:

http://jsfiddle.net/ycUB6/10706/

因为我唯一改变的是这里的 Jquery，它也是:

var modalContainer = $("#modal-container");

var hideModal = function() {
  modalContainer.hide();
};

var showModal = function() {
  modalContainer.show();
};

var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);

var modalCloseButton = $("modal-hide");
modalCloseButton.on("click", hideModal);

$(document).on("keyup", function(evt) {
  evt = evt || window.event;

  if (evt.keyCode === 27) {
    hideModal();
  }
});

var handleNewsletterSignup = function(evt) {
  evt.preventDefault();

  var newsletterHeader = $("#newsletter-header");

  var newsletterForm = $("#newsletter-signup");
  newsletterForm.hide();

  newsletterHeader.text("Thank you for signing up!");

  setTimeout(hideModal, 2000);
};

var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);

var clockTime = function() {
  var currentTime = new Date ();

  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();

  if (hours <= 11) {
    var period = "AM";
  } else {
    var period = "PM";
  }

  if (hours > 12) {
    hours = hours - 12;
  } else if (hours === 0) {
    hours = 12;
  }

  if (minutes < 10) {
    minutes = "0" + String(minutes);
  }

  if (seconds < 10) {
    seconds = "0" + String(seconds);
  }

  var time = hours + ':' + minutes + ':' + seconds + ' ' + period;

  return time;
};

var clock = $("#clock");

setInterval(function() {
  clock.text(clockTime());
}, 1000);




$('#slider').anythingSlider({

    // *********** Appearance ***********
    // Theme name; choose from: minimalist-round, minimalist-square,
    // metallic, construction, cs-portfolio
    theme: 'default',
    // Set mode to "horizontal", "vertical" or "fade"
    // (only first letter needed); replaces vertical option
    mode: 'horizontal',
    // If true, the entire slider will expand to fit the parent element
    expand: false,
    // If true, solitary images/objects in the panel will expand to
    // fit the viewport
    resizeContents: true,
    // Set this value to a number and it will show that many slides at once
    showMultiple: false,
    // Anything other than "linear" or "swing" requires the easing plugin
    easing: "swing",

    // If true, builds the forwards and backwards buttons
    buildArrows: true,
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: true,
    // If true, builds the start/stop button
    buildStartStop: true,

    // Append forward arrow to a HTML element
    // (jQuery Object, selector or HTMLNode), if not null
    appendFowardTo: null,
    // Append back arrow to a HTML element
    // (jQuery Object, selector or HTMLNode), if not null
    appendBackTo: null,
    // Append controls (navigation + start-stop) to a HTML element
    // (jQuery Object, selector or HTMLNode), if not null
    appendControlsTo: null,
    // Append navigation buttons to a HTML element
    // (jQuery Object, selector or HTMLNode), if not null
    appendNavigationTo: null,
    // Append start-stop button to a HTML element
    // (jQuery Object, selector or HTMLNode), if not null
    appendStartStopTo: null,

    // If true, side navigation arrows will slide out on
    // hovering & hide @ other times
    toggleArrows: false,
    // if true, slide in controls (navigation + play/stop button)
    // on hover and slide change, hide @ other times
    toggleControls: false,

    // Start button text
    startText: "Start",
    // Stop button text
    stopText: "Stop",
    // Link text used to move the slider forward
    // (hidden by CSS, replaced with arrow image)
    forwardText: "&raquo;",
    // Link text used to move the slider back
    // (hidden by CSS, replace with arrow image)
    backText: "&laquo;",
    // Class added to navigation & start/stop button
    // (text copied to title if it is hidden by a negative text indent)
    tooltipClass: 'tooltip',

    // if false, arrows will be visible, but not clickable.
    enableArrows: true,
    // if false, navigation links will still be visible, but not clickable.
    enableNavigation: true,
    // if false, the play/stop button will still be visible, but not
    // clickable. Previously "enablePlay"
    enableStartStop: true,
    // if false, keyboard arrow keys will not work for this slider.
    enableKeyboard: true,

    // *********** Navigation ***********
    // This sets the initial panel
    startPanel: 1,
    // Amount to go forward or back when changing panels.
    changeBy: 1,
    // Should links change the hashtag in the URL?
    hashTags: true,
    // if false, the slider will not wrap
    infiniteSlides: true,
    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
        // This is the default format (show just the panel index number)
        return "" + index;
    },
    // Set this to the maximum number of visible navigation tabs;
    // false to disable
    navigationSize: false,

    // *********** Slideshow options ***********
    // If true, the slideshow will start running; replaces "startStopped" option
    autoPlay: false,
    // If true, user changing slides will not stop the slideshow
    autoPlayLocked: false,
    // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
    autoPlayDelayed: false,
    // If true & the slideshow is active, the slideshow will pause on hover
    pauseOnHover: true,
    // If true & the slideshow is active, the  slideshow will stop on the last page. This also stops the rewind effect  when infiniteSlides is false.
    stopAtEnd: false,
    // If true, the slideshow will move right-to-left
    playRtl: false,

    // *********** Times ***********
    // How long between slideshow transitions in AutoPlay mode (in milliseconds)
    delay: 3000,
    // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
    resumeDelay: 15000,
    // How long the slideshow transition takes (in milliseconds)
    animationTime: 600,
    // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
    delayBeforeAnimate  : 0,

    // *********** Callbacks ***********
    // Callback before the plugin initializes
    onBeforeInitialize: function(e, slider) {},
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {},
    // Callback on slideshow start
    onShowStart: function(e, slider) {},
    // Callback after slideshow stops
    onShowStop: function(e, slider) {},
    // Callback when slideshow pauses
    onShowPause: function(e, slider) {},
    // Callback when slideshow unpauses - may not trigger
    // properly if user clicks on any controls
    onShowUnpause: function(e, slider) {},
    // Callback when slide initiates, before control animation
    onSlideInit: function(e, slider) {},
    // Callback before slide animates
    onSlideBegin: function(e, slider) {},
    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) {},
    // Callback when slider resizes
    onSliderResize: function(e, slider) {},

    // *********** Interactivity ***********
    // Event used to activate forward arrow functionality
    // (e.g. add jQuery mobile's "swiperight")
    clickForwardArrow: "click",
    // Event used to activate back arrow functionality
    // (e.g. add jQuery mobile's "swipeleft")
    clickBackArrow: "click",
    // Events used to activate navigation control functionality
    clickControls: "click focusin",
    // Event used to activate slideshow play/stop button
    clickSlideshow: "click",

    // *********** Video ***********
    // If true & the slideshow is active & a youtube video
    // is playing, it will pause the autoplay until the video
    // is complete
    resumeOnVideoEnd: true,
    // If true the video will resume playing (if previously
    // paused, except for YouTube iframe - known issue);
    // if false, the video remains paused.
    resumeOnVisible: true,
    // If your slider has an embedded object, the script will
    // automatically add a wmode parameter with this setting
    addWmodeToObject: "opaque",
    // return true if video is playing or false if not - used
    // by video extension
    isVideoPlaying: function(base) {
        return false;
    }

});