2016-06-15 3 views
0

Слайд-слайдер не инициализируется propel Я думаю, что пятно получает ширину его родителя. Но я не уверен, что происходит. Im под этим имприном, потому что когда я «проверяю элемент», я вижу width:35000 px;Slick Slider ничего не показывает

Я написал этот простой код для простоты

<div style="text-align: center;"> 
     <div id="AboutUsSlider" style="width: 90%; display: inline-block;"> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
      <div><img src="/images/banners/727X300.jpg"></div> 
     </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $("#AboutUsSlider").slick({ 
     rtl:true, 
     infinite:true, 
     centerMode: true, 
     variableWidth: true, 
     dots: true, 
     speed: 500, 
     cssEase: 'linear', 
     autoplay: true, 
     autoplaySpeed: 6000, 
     arrows: true 
    }); 
}); 
</script> 

Если вы, ребята, хотели бы видеть его вживую, new.jccayer.com/test.php

кто имеет представление о том, почему это происходит? Любая помощь/комментарий оцениваются!

EDIT

Я взял пример они отгружать в загружаемом «Slick» .zip размещена в Интернете по адресу new.jccayer.com/test.html Мы можем сравнить его с new.jccayer.com/test.php Witch моего

Обе страницы использует файлы на моем сервере. Так что нет cdn. и оба файла. Это означает, что только исходный код на этой странице где-то не так. (потому что пример работы)

Все еще я не могу понять, что отличается от двух файлов. Im я становлюсь слепым из-за того, как долго я пытался сделать эту работу?

Любой?

+0

Получено 404 по ссылке. Также, пожалуйста, разместите фактический код, чтобы мы могли диагностировать проблему, и только соответствующий код. – Li357

+0

Его фактический код, я создал страницу только для этого, поэтому у нас есть только код, выпущенный для этого. Страница должна работать сейчас. –

+0

Включили ли вы файл миграции jquery? Я не вижу его в вашем исходном коде –

ответ

2

Мне удалось заставить это работать локально, избавившись от опции rtl. Можете ли вы проверить и посмотреть, работает ли для вас избавление от этой опции? Таким образом, код будет просто:

$(document).ready(function(){ 
    $("#AboutUsSlider").slick({ 
     infinite:true, 
     centerMode: true, 
     variableWidth: true, 
     dots: true, 
     speed: 500, 
     cssEase: 'linear', 
     useTransform:false, 
//  autoplay: true, 
//  autoplaySpeed: 6000, 
     arrows: true 
    }); 
}); 

Если вы не хотите, чтобы избавиться от каких-либо опций, см скользкой документации на http://kenwheeler.github.io/slick/, чтобы посмотреть, как обращаться справа налево -

Примечание: тег HTML или родительский элемент слайдера должен иметь атрибут «dir», установленный в «rtl».

Итак, у вашего div будет только dir = "rtl" в теге. Оба работают. Если у вас есть какие-либо вопросы, дайте мне знать!

+0

Wow! лол. Какой смысл иметь это свойство, если он не работает! Спасибо! Я был на этом в течение 3 часов! Я никогда не удалял это свойство, так как мне это нужно. –