Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Некоректно отображается bxslider (https://javascript.ru/forum/misc/52407-nekorektno-otobrazhaetsya-bxslider.html)

kbn 17.12.2014 22:07

Некоректно отображается bxslider
 
Прописал два слайдера bxslider. В каждом сладере по три картинки. После добавления функции randomStart: "true" он стал отображать картинки в случайном порядке, как и задумывалось, но и сами слайдеры отображаются теперь на сайте то по одному, то по два, а нужно чтобы постоянно было два. Вот код:
<?php

echo '<div id="reklama_right" width="240" height="1200">

<div id="slider_1" class="bxslider">

<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/1.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/2.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/3.jpg" alt="kbn" width="240" height="240"/></a></div>

</div>

<div id="slider_2" class="bxslider">

<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/1.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/2.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="../kbn_4/slider/images/3.jpg" alt="kbn" width="240" height="240"/></a></div>

</div>

<script type="text/javascript">

$(document).ready(function(){

$("#slider_1").bxSlider({
auto: "true",
mode: "fade",
speed: "500",
wrapperClass: "bx-wrapper",
autoHover: "true",
randomStart: "true",
pause: "3000"
});

$("#slider_2").bxSlider({
auto: "true",
mode: "fade",
speed: "500",
wrapperClass: "bx-wrapper",
autoHover: "true",
randomStart: "true",
pause: "3000"
});

});

</script>

</div>'

?>

рони 17.12.2014 23:25

Цитата:

Сообщение от kbn
auto: "true",

зачем кавычки?
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

kbn 18.12.2014 03:11

Ковычки я прописал правильно! Я уверен, что есть какое то условие, которое задаёт порядок в моём косяке!

рони 18.12.2014 10:21

Цитата:

Сообщение от kbn
Я уверен,

Цитата:

randomStart

Start slider on a random slide
default: false
options: boolean (true / false)
http://bxslider.com/options

но в вашем случае и с кавычками сработает -- смотрите вашу разметку и другие скрипты , а данный скрипт тут не причём.
Цитата:

Сообщение от kbn
<div id="reklama_right" width="240" height="1200">


рони 18.12.2014 10:57

:write: похоже вы несколько раз запускаите инициализацию слайдера на одном и том же элементе тогда будут глюки.

kbn 18.12.2014 12:41

так и как надо прописать в итоге?

рони 18.12.2014 13:15

kbn, больше инициализаций ненужно
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
  <link rel="stylesheet" type="text/css" href="http://bxslider.com/css/styles.css">
  <link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css">
  <style type="text/css">
  .bxslider {
   width: 100%;
  }
#reklama_right     {
    width:240px; height:1200px;
    padding: 5px;
    }
</style>

  <script>
  $(function () {
 $('.bxslider').bxSlider({
 auto: true,
 mode: "fade",
 speed: 500,
 wrapperClass: "bx-wrapper",
 autoHover: true,
 randomStart: true,
 pause: 3000
});
  })
  </script>
</head>

<body>
<div id="reklama_right" >

<div id="slider_1" class="bxslider">

 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/tree_root.jpg" alt="kbn" width="240" height="240"/></a></div>
 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/houses.jpg" alt="kbn" width="240" height="240"/></a></div>
 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/hill_fence.jpg" alt="kbn" width="240" height="240"/></a></div>

 </div>

 <div id="slider_2" class="bxslider">

 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/tree_root.jpg" alt="kbn" width="240" height="240"/></a></div>
 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/houses.jpg" alt="kbn" width="240" height="240"/></a></div>
 <div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/hill_fence.jpg" alt="kbn" width="240" height="240"/></a></div>

 </div>

 </div>

</body>
</html>

kbn 19.12.2014 16:04

всё равно не работает(((((

рони 19.12.2014 16:10

kbn,
код из 7 поста работает? если работает ищите во всех скриптах строку bxSlider и убирайте -- потом поставите код из 7 поста строки 21 - 31

kbn 19.12.2014 16:18

может лучше другой слайдер попробовать? какой посоветуете?

рони 19.12.2014 16:37

kbn,
если у вас этот неработает почему должен заработать другой

kbn 19.12.2014 16:46

проблема возникает после добавления randomStart: "true", в остальном то всё в поряде

рони 19.12.2014 16:52

kbn,
скиньте ссылку на страницу с проблемой можно в личку

kbn 19.12.2014 16:57

у меня пока на локальном сервере

рони 19.12.2014 17:04

kbn,
нет кода нет совета ... пробуйте что сказано ранее.

Twix 20.09.2015 16:17

Добрый день!
Подскажите почему bxslider после загрузки, начинает с последней страницы? Случается это через раз. Просто, у меня последний слайд логически завершает просмотр. Вот ссылка. Спасибо
<script type="text/javascript">
    	$(document).ready(function(){
    		$('.bxslider').bxSlider({
    			auto: true,
    			controls: false,
    			speed: 700,
    			pause: 5000,
          startingSlide: 0,
    		});
      });
    </script>

<div id="bxslider">
        <ul class="bxslider">
          <li><img src="jq/images/0.skidki-na-divany.jpg" alt="0.скидки"/></li>
          <li><img src="jq/images/1.kozhanyy-divan.jpg" alt="1.кожанный диван"/></li>
          <li><img src="jq/images/2.besplatnaya-dostavka.jpg" alt="2.бесплатная доставка"/></li>
          <li><img src="jq/images/3.yevroknizhka-aktsiya.jpg" alt="3.еврокнижка 10000 рублей"/></li>
          <li><img src="jq/images/4.skidka-slider.jpg" alt="4.скидка на мебель последний слайдер"/></li>
        </ul>
      </div>

рони 20.09.2015 18:01

Twix,
запятая в 8 строке лишняя, убрать, если проблема останется попробовать $(window).load вместо $(document).ready

Twix 20.09.2015 19:39

Цитата:

Сообщение от рони (Сообщение 389346)
Twix,
$(window).load вместо $(document).ready

Спасибо, помогло!:victory:


Часовой пояс GMT +3, время: 12:42.