У меня есть королевский слайдер, созданный на сайте, над которым я работаю. Он настроен на главной странице и на моей странице продуктов, где у меня есть раздел, в котором отображаются несколько королевских ползунков в разных div, которые пользователь может переключаться между ними.
Первый из слайдеров на странице продуктов, которые мне удалось настроить, и отобразится правильно. Однако, когда я добираюсь до второго королевского слайдера в том же разделе, я вижу, что высота и ширина установлены на 0px, и я не могу понять, почему? Ive посмотрел на форум поддержки для royalslider, но я не могу найти что-нибудь, что поможет мне понять, почему это происходит.
Вот HTML для моего второго слайдера:
<div class="container">
<div class="row toggle-prod ps2">
<div class="span7">
<div class="royalSlider-prod2 rsDefault">
<img class="rsImg" src="/IMG-1.jpg" width="670" height="660"/>
<img class="rsImg" src="/IMG-2.jpg" width="670" height="660"/>
</div>
</div>
<div class="span5">
<p>PhoneShield 2 (PS2)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
Вот JS для слайдера:
$(".royalSlider-prod2").royalSlider({
keyboardNavEnabled: true,
autoScaleSlider: true,
slidesSpacing: 0,
imageScalePadding: 0,
loop: true,
navigateByClick: false,
arrowsNav: false,
autoScaleSliderWidth: 670,
autoScaleSliderHeight: 660,
controlsInside: false,
autoPlay: {
enabled: true,
pauseOnHover: true,
delay: 5000
}
});
JS для первого слайдера на этой странице точно такой же, поэтому я не понимаю, почему высота и ширина arent подбираются для второго ползунка.
Добавление нескольких слайдеров на одну и ту же страницу и отображение отображения другим (что я и делал, потому что я не хотел, чтобы все они были видимыми одновременно) заставляет другие слайдеры получать высоту и ширину 0px. Я не понимал этого некоторое время. В конце концов, я использовал слайдер карусели bootstraps, который отлично работает, и нет конфликтов, независимо от того, сколько ползунков у меня на странице.