stackoom
  简体   繁体   中英

Flexslider jQuery plugin won't run slideshow

 原文  2016-10-22 20:45:51  7   2    javascript/ jquery/ html

Question

I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. I downloaded the plugin and followed the directions on the website ( Flexslider website ) for how to get started with the plugin. However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. Here is my current code: 

 $(document).ready(function(){ /* alert('Our JavaScriipt is working!'); console.log('Our Javascript is working!'); console.warn('A dire warning!'); console.error('ERMAGERD AN ERROR!'); */ 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); }); 
  <head> <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'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> <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> <div id="modal-container"> <section id="modal-box"> <button id="modal-hide">x</button> <h2 id="newsletter-header">Sign up for my email list!</h2> <form id="newsletter-signup" action="#" method="post" accept-charset="utf-8"> <input type="email" name="email" value="" placeholder="Your email"> <input type="submit" value="Sign up"> </form> </section> </div> <footer> <p>&copy; Skillcrush 2014</p> </footer> </div> </body>

So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. I also tried moving some of the JS to the JS file. Despite these changes, the pictures in slides class remain a bullet point list. Did I link the wrong files for flexslider? I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page.

2 answers

solution1
 0  2016-10-22 20:56:29

I think error in your CSS and JS inclusion. 

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>

Like it should be: 

<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />

Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. also check included path open correctly in browser or not.

solution2
 0  2016-11-03 18:18:17

When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it. 

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta content="charset=utf-8">
    <title>Liz Lemon's Personal Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">   

  <!-- Demo CSS -->
    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />

    <!-- Modernizr -->
  <script src="js/modernizr.js"></script>

</head>
<body class="loading">

  <div id="container" class="cf">
    <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 id="main" role="main">
      <section class="slider">
        <div class="flexslider carousel">
          <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>               
            <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> 
            <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>

      <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>
    <div id="modal-container">
        <section id="modal-box">
            <button id="modal-hide">x</button>
                <h2 id="newsletter-header">Sign up for my email list!</h2>
                <form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
                    <input type="email" name="email" value="" placeholder="Your email">
                    <input type="submit" value="Sign up">
                </form>
        </section>
    </div>

    <footer>
      <p>&copy; Skillcrush 2014</p>
    </footer>

    </div>

  </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 420,
        itemMargin: 1,
        pausePlay: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
</body>
</html>

I already test it. its running fine.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can't get Jquery plugin to run slideshow jQuery Slideshow won't Loop jquery slideshow won't iterate over dom jQuery slideshow code won't work JQuery Cycle plugin - Slideshow jQuery slideshow plugin with .load() jQuery content slideshow plugin? JQuery error when run slideshow with NextGen Gallery plugin in wordpress Simple slideshow with jQuery (won't go beyond first child) How to add a library in drupal 6 into a module file ( to run a slideshow created by flexslider )
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM