Я хочу создать коллекцию изображений на основе слайдера, или, можно сказать, слайдер на основе слайдера.У ползунка, который я имею в виду, есть определенные маркировки (скажем, 1990, 1995, 2000, и так далее), и есть изображение, соответствующее диапазону, в котором находится ползунок в настоящее время (то есть одно изображение за 1990-1995 гг.еще один на 1995-2000 и т. д.).Изображения не обязательно должны скользить в и из визуального.Итак, Corousel Bootstrap не нужен.
Слайдер, на который я смотрю, это this , который я изменю в соответствии со своими потребностями.
Итак, я попытался объединить эти два понятия.Два элемента, показанные в скрипте this , вообще не связаны друг с другом.Затем я попытался возиться с кодом , но движения слайдера, похоже, все еще не затронуты.
Вот код после возни:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
var slide_number = Number($(this).slider("value"))/34+1 ;
handle.text( $( this ).slider( "value" ) );
$("#carouselExampleIndicators").data('slide-to',slide_number) ;
},
slide: function( event, ui ) {
var slide_number = Number(ui.value)/34+1 ;
handle.text( ui.value );
$("#corouselExampleIndicators").data('slide-to',slide_number) ;
}
});
} );
</script>
</head>
<div id="carouselExampleIndicators" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.imgur.com/S7Hebtq.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://procutlandscaping.com/blog/wp-content/uploads/2012/06/landscape-design-rockland-county.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://4.bp.blogspot.com/-7Tjc6muCHKc/UIToU_6RXeI/AAAAAAAAC4Q/2iE7Cb0m5ZU/s1600/Beautiful+-Landscape-+HD-+Wallpapers3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script>
$(function(){
$('#carouselExampleIndicators').carousel();
});
</script>
</div>
<div>
<br><br>
</div>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</html>
Основная часть, которая не работает:
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
var slide_number = Number($(this).slider("value"))/34+1 ;
handle.text( $( this ).slider( "value" ) );
$("#carouselExampleIndicators").data('slide-to',slide_number) ;
},
slide: function( event, ui ) {
var slide_number = Number(ui.value)/34+1 ;
handle.text( ui.value );
$("#corouselExampleIndicators").data('slide-to',slide_number) ;
}
});
} );
</script>
Я получаю следующие ошибки:
Ошибка типа: Actions [t.getLast (...)] isundefined, не может получить доступ к свойству "bind" этого
и
TypeError: $ (...). carousel не является функцией
Corousel работает нормально, поэтому я не понимаю, почему появляется вторая ошибка.Между тем я тоже не понимаю первую ошибку.
Итак, мой вопрос здесь, почему это не работает?
Во-вторых, есть ли лучший способ сделать это?
В-третьих, могу ли я написать лучший код для этого?
Любая помощь приветствуется!
UPD : Обновлено fiddle .
UPD : изменено $("#corouselExampleIndicators").data('slide-to',slide_number) ; на $('.corousel').corousel(slider_number) ;, как указано здесь .Но это все еще не работает, и ползунок перестал работать.Посмотрите на скрипку здесь .
Попытался использовать id вместо class, в коде, то есть используется $('#corouselExampleIndicators').corousel(1) ;.Все еще ничего не работало.
UPD: Если кому-то интересно, окончательную версию можно найти здесь .Это работает безупречно.