0
Я код рефакторинга для веб-сайта, который я создаю, и я пытаюсь использовать плагин Flexslider jQuery вместо плагина AnythingSlider. Я был изначально использован. Я загрузил плагин и следил за указаниями на веб-сайте (Flexslider website) о том, как начать работу с плагином. Тем не менее, изображения в слайдах класса ul по-прежнему находятся в форме списка и не отображаются в виде слайд-шоу. Вот мой текущий код:Плагин jQuery Flexslider не запускает слайд-шоу
$(document).ready(function(){
\t /*
\t alert('Our JavaScriipt is working!');
\t console.log('Our Javascript is working!');
\t console.warn('A dire warning!');
\t console.error('ERMAGERD AN ERROR!');
\t */
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);
/* Begin the clock code */
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);
});\t <head>
\t \t <title>Liz Lemon's Personal Website</title>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
\t \t <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({;
animation: "slide",
animationLoop: true,
slideshow: true;
randomize: false,
});
});
</script>
</head>
<body>
<div class="page">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on <a href="http://www.skillcrush.com" alt="Skillcrush.com">Skillcrush</a>.
</p>
</section>
<div class="flexslider">
<ul class="slides">
<li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li>
<li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li>
<li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li>
</ul>
</div>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
\t \t \t \t <div id="modal-container">
\t \t \t \t \t <section id="modal-box">
\t \t \t \t \t \t <button id="modal-hide">x</button>
\t \t \t \t \t \t \t <h2 id="newsletter-header">Sign up for my email list!</h2>
\t \t \t \t \t \t \t <form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
\t \t \t \t \t \t \t \t <input type="email" name="email" value="" placeholder="Your email">
\t \t \t \t \t \t \t \t <input type="submit" value="Sign up">
\t \t \t \t \t \t \t </form>
\t \t \t \t \t </section>
\t \t \t \t </div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</body>
\t \t \tДо сих пор я тройной проверил каждую часть моего кода (особенно то, что в голове) с образцами из них на сайте и GitHub. Я также попытался переместить часть JS в файл JS. Несмотря на эти изменения, фотографии в классе слайдов остаются списком маркеров. Я связал неправильные файлы для flexslider? Я думаю, что моя проблема связана с разделом HTML, но я не на 100% положителен, так как мой код выглядит так же, как на странице примера.
Мне потребовалось несколько дней, но я, наконец, получил слайд-шоу для работы. Я только что изменил плагин, который использовал и читал документацию плагина. Я думаю, проблема была в HTML и ссылках, которые я использовал в тегах ссылок. Я мог бы снова сыграть с моим кодом в будущем, чтобы узнать, смогу ли я заставить flexslider работать когда-нибудь в будущем. –