2015-11-28 1 views
0

Я пытаюсь использовать слайдер начальной загрузки отсюда: https://github.com/seiyria/bootstrap-slider. Однако я не могу инициализировать слайдер. Мой фрагмент кода выглядит следующим образом:bootstrap-slider не инициализирован

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link href="css/bootstrap-switch.min.css" rel="stylesheet"/> 
    <link href="https://raw.githack.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css" rel="stylesheet" /> 
    <link rel='stylesheet' href='css/jquery-ui.css'> 
    <link rel='stylesheet' href='css/ol.css'> 
    <script src="js/jquery-ui.js"></script> 
    <script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script> 
    <script src="js/jquery.ui.widget.js"></script> 
    <script src="js/jquery.iframe-transport.js"></script> 
    <script src="js/jquery.fileupload.js"></script> 
    <script src="https://raw.githack.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script>  
    <script src="js/bootstrap-switch.min.js"></script> 

</head> 

<body> 
     <input style='width:80px;' class='opacity' type='text' value='' data-slider-min='0' data-slider-max='1' data-slider-step='0.1' data-slider-tooltip='hide'> 

    <script type="text/javascript"> 
     $('input.opacity').slider(); 
    </script> 

</body> 

Это дает мне простой тип входного сигнала, как показано на рисунке

enter image description here

Тогда, если я:

$('input.opacity').bootstrapSlider(); 

Это дает мне ошибка как:

enter image description here

Что мне здесь не хватает?

ответ

0

пожалуйста, попробуйте

$(function() { 
    $('input.opacity').bootstrapSlider(); 
}); 

выполнить код, когда документ будет готов.

+0

см. [JsFiddle] (https://jsfiddle.net/c33jLond/) – Chris