Slick.js - images stacked - Отличная библиотека

Невозможно получить Slick для работы на моем сайте dev на http://freeamericaswater.mmartinez.webfactional.com. Я пробовал различные комбинации переупорядочения файлов js и пытаюсь использовать cdn versio там и на сайте, который я сделал для тестирования Slick, http://slick.mmartinez.webfactional.com Slick.js - images stacked

Изображения отображаются как сложены. Не могу понять это!

<!DOCTYPE html> 
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> 
<html class="no-js" lang="en" > 

<head> 
    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Free America's Water</title> 

    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/foundation-icons.css"> 

    <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 

    <script src="js/vendor/modernizr.js"></script> 




</head> 

<!--BODY--> 
<body> 
    <div class="contain-to-grid sticky"> 
    <nav class="top-bar" data-topbar> 
     <ul class="title-area"> 
     <li class="name"> 
      <a href="#"><h1>Free America's Water</h1></a> 
     </li> 
     <li class="toggle-topbar menu-icon"><a href="#"></a> 
     </li> 
     </ul> 
    </nav> 
    </div> 


<div class="single-item"> 
    <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide1.png" alt="slide 1" /></div> 
    <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide2.png" alt="slide 2" /></div> 
    <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide3.png" alt="slide 3" /></div> 
    <div><img src="http://freeamericaswater.mmartinez.webfactional.com/img/slide4.png" alt="slide 4" /></div> 
</div> 



<!--TAKE ACTION--> 
    <div class="row take-action"> 
    <div class="small-12 columns text-center"> 
    <h2>Take action today!</h1> 
    <div class="row"> 
     <div class="small-10 columns small-centered text-center">   
     <p>Together, we can Free America's Water from being a drain on our wallets and our natural resources</p> 
     <p>We are a not-for-profit initiative whose mission to create awareness of the staggering cost and environmental impact of disposable bottle water and to encourage people to enjoy clean delicious tap water in refillable bottles.</p> 
     <p>On our site you'll find links to all the allies you need. Use our graphic assets and common-sense guides to take action in your community, on your campus, and at your workplace.</p> 

     </div> 
    </div> 
    </div> 
</div> 
<!--END OF TAKE ACTION--> 

<!--PROMOTE--> 
<ul class="tabs" data-tab> 
    <li class="tab-title active"><a href="#panel1-1">Tab 1</a> 
    </li> 
    <li class="tab-title"><a href="#panel1-2">Tab 2</a> 
    </li> 
    <li class="tab-title"><a href="#panel1-3">Tab 3</a> 
    </li> 
    <li class="tab-title"><a href="#panel1-4">Tab 4</a> 
    </li> 
</ul> 
<div class="tabs-content"> 
    <div class="content active" id="panel1-1"> 
     <p>First panel content goes here...</p> 
    </div> 
    <div class="content" id="panel1-2"> 
     <p>Second panel content goes here...</p> 
    </div> 
    <div class="content" id="panel1-3"> 
     <p>Third panel content goes here...</p> 
    </div> 
    <div class="content" id="panel1-4"> 
     <p>Fourth panel content goes here...</p> 
    </div> 
</div> 
<!--END OF PROMOTE--> 

<!--FREE STICKERS--> 
<div class="free-stickers"> 

    <h2>Get your FREE stickers!</h1> 
    <p>Just fill out this simple form and we'll ship them right away </p> 
    <!--Form--> 
    <div class="row"> 
    <form> 
     <div class="small-6 column small-centered"> 

     <div class="row"> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="First Name" placeholder="First Name" aria-label="First Name"> 
      </div> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="Last Name" placeholder="Last Name" aria-label="Last Name"> 
      </div> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="Email" placeholder="Email" aria-label="Email"> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="small-12 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="Street Address" placeholder="Street Address" aria-label="Street Address"> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="City" placeholder="City" aria-label="City" style="padding-left: .1375em; padding-right: 0px;"> 
      </div> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="State" placeholder="State" aria-label="State" style="padding-left: .1375em; padding-right: 0px;"> 
      </div> 
      <div class="small-12 large-4 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <input type="text" name="Zip Code" placeholder="Zip Code" aria-label="Zip Code" style="padding-left: .1375em; padding-right: 0px;"> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="small-12 columns" style="padding-left: .1375em; padding-right: 0px;"> 
      <a href="#" class="button expand">Submit</a> 
      </div> 
     </div> 

     </div> 

    </div> 

</div> 
<!--END OF FREE STICKERS--> 

<!--FOOTER--> 
<footer class="footer"> 
    <p>&copy; 2015 The Monday Campaigns, Inc.</p><i class="fi-[icon]"></i> 
    <p>Privacy Policy | Terms of Use | Disclaimer</p> 
    <ul class="inline-list social"> 
     <a href="#"><i class="fi-social-facebook"></i></a> 
     <a href="#"><i class="fi-social-twitter"></i></a> 
     <a href="#"><i class="fi-social-instagram"></i></a> 
     </ul> 

</footer> 
<!--END OF FOOTER--> 



<script src="/js/vendor/jquery.js"></script> 
<script src="/js/vendor/fastclick.js"></script> 
<script src="/js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="slick/slick.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.single-item').slick({ 
     setting-name: setting-value 
     }); 
    }); 
    </script> 

</body> 
</html>

источник

2015-07-22 MMC

Я пошел к первой ссылке, которую вы предоставили, и соответствует вашему примеру. Виновник находится в ваших настройках для пятна на странице. Это не допустимые настройки, а также неправильный синтаксис для JS, поскольку вы включили дефиши в имя.

Если вы проверяете вашу консоль в хроме или в другом браузере вы, вероятно, будете видящей ошибку вида: Uncaught SyntaxError: Неожиданный токен -

Это ваш виновник:

$('.single-item').slick({ 
    setting-name: setting-value 
});

Если изменить это просто быть под ним должно работать нормально:

$(".single-item").slick();

источник

2015-07-23 01:28:35

OP, чтобы увидеть все доступные параметры пятна, [проверить здесь] (https://github.com/kenwheeler/s облизывают настройки #). – TheWanderingMind

Slick.js - images stacked

ответ

Смежные вопросы