有人问过similar question这个问题,但这是关于移动滑块的。就我而言,该问题也发生在计算机中。
可以看到问题here(当前不适用于移动设备),其中滑块没有初始值。而当您移动它时,滑块将具有一个值。
即使我在滑块内放了一些文本,也会发生这种情况。代码是:
$( "#slider" ).slider({
create: function() {
handle.text(1911+'');
},
slide: function( event, ui ) {
var curr_val = parseInt(ui.value) ;
...
这意味着未触发create事件。
我正在使用Jekyll来构建this网站。因此,我有一个包含代码的模板:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<script src="jquery.ui.touch-punch.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://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
.background1
{
background-color:black ;
height: 100%;
width: 100%;
text-align: center ;
}
.background2
{
background-color:white ;
height: 100%;
width: 100%;
text-align: center ;
padding-top: 70px ;
}
#navbarBrand
{
color:black;
letter-spacing:10px ;
}
.navbar-custom {
z-index:999999; /* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
width:100% ;
position: fixed;
background-color: white;
}
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="navbarBrand">INFER</a>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b2').scrollIntoView();"> DATASET</button>
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b4').scrollIntoView();"> PROJECTS</button>
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b5').scrollIntoView();"> ABOUT</button>
</div>
</div>
</nav>
<div class="background2">
{{content}}
</div>
</body>
<html>
请注意{{content}}
。替换为:
---
layout: post
title: "Jammu And Kashmir GIFs"
---
<style>
#slider
{
width: 80%;
margin: 0 auto;
}
#custom-handle {
width: 3.5em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
font-size: 120% ;
}
</style>
<script>
$( function() {
$( "#slider" ).slider({
max: 88
});
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text(1911+'');
},
slide: function( event, ui ) {
var curr_val = parseInt(ui.value) ;
handle.text( (Number (ui.value)+1911)+'' );
if(curr_val<5)
$('.carousel').carousel(0) ;
else if(curr_val<10)
$('.carousel').carousel(1) ;
else if(curr_val<15)
$('.carousel').carousel(2) ;
else if(curr_val<20)
$('.carousel').carousel(3) ;
else if(curr_val<25)
$('.carousel').carousel(4) ;
else if(curr_val<30)
$('.carousel').carousel(5) ;
else if(curr_val<35)
$('.carousel').carousel(6) ;
else if(curr_val<40)
$('.carousel').carousel(7) ;
else if(curr_val<45)
$('.carousel').carousel(8) ;
else if(curr_val<50)
$('.carousel').carousel(9) ;
else if(curr_val<55)
$('.carousel').carousel(10) ;
else if(curr_val<60)
$('.carousel').carousel(11) ;
else if(curr_val<65)
$('.carousel').carousel(12) ;
else if(curr_val<70)
$('.carousel').carousel(13) ;
else if(curr_val<75)
$('.carousel').carousel(14) ;
else if(curr_val<80)
$('.carousel').carousel(15) ;
else if(curr_val<85)
$('.carousel').carousel(16) ;
else if(curr_val<90)
$('.carousel').carousel(17) ;
}
});
} );
</script>
<div id="carouselExampleIndicators" class="carousel slide" data-interval="false" >
<div class="carousel-inner" style="width:50%; height:80%; margin: 0 auto;">
<div class="carousel-item active">
<img class="d-block w-100" src="/infer/assets/1911-1915.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1916-1920.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1921-1925.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1926-1930.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1931-1935.jpg" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1936-1940.jpg" alt="Sixth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1941-1945.jpg" alt="Seventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1946-1950.jpg" alt="Eighth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1951-1955.jpg" alt="Ninth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1956-1960.jpg" alt="Tenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1961-1965.jpg" alt="Eleventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1966-1970.jpg" alt="Twelfth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1971-1975.jpg" alt="Thirteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1976-1980.jpg" alt="Fourteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1981-1985.jpg" alt="Fifteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1986-1990.jpg" alt="Sixteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1991-1995.jpg" alt="Seventeenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1996-1999.jpg" alt="Eighteenth 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>
<p id="para">
</p>
</div>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle">
</div>
</div>
对此有任何帮助吗?
答案 0 :(得分:0)
我认为您正在使它变得过于复杂。请考虑以下内容:
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text(1911 + '');
},
min: 0,
max: 17,
slide: function(event, ui) {
var curr_val = parseInt(ui.value);
$('.carousel').carousel(curr_val);
}
});
});
这将初始化并按预期工作。现在,如果希望滑块最大为100,则可以使用模数运算符查找5的倍数。
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text(1911 + '');
},
min: 0,
max: 88,
slide: function(event, ui) {
var curr_val = parseInt(ui.value);
if(curr_val % 5 == 0){
var val = curr_val / 5;
$('.carousel').carousel(val);
}
}
});
完整示例:
.background1 {
background-color: black;
height: 100%;
width: 100%;
text-align: center;
}
.background2 {
background-color: white;
height: 100%;
width: 100%;
text-align: center;
padding-top: 70px;
}
#navbarBrand {
color: black;
letter-spacing: 10px;
}
.navbar-custom {
z-index: 999999;
/* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
width: 100%;
position: fixed;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<script src="jquery.ui.touch-punch.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://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="navbarBrand">INFER</a>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b2').scrollIntoView();"> DATASET</button>
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b4').scrollIntoView();"> PROJECTS</button>
<button type="button" class="btn btn-outline-dark" onClick="document.getElementById('b5').scrollIntoView();"> ABOUT</button>
</div>
</div>
</nav>
<div class="background2">
<style>
#slider {
width: 80%;
margin: 0 auto;
}
#custom-handle {
width: 3.5em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
font-size: 120%;
}
</style>
<script>
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text(1911 + '');
},
min: 0,
max: 89,
slide: function(event, ui) {
var curr_val = parseInt(ui.value);
if (curr_val % 5 == 0) {
var val = curr_val / 5;
console.log(ui.value, val);
$('.carousel').carousel(val);
}
}
});
});
</script>
<div id="carouselExampleIndicators" class="carousel slide" data-interval="false">
<div class="carousel-inner" style="width:50%; height:80%; margin: 0 auto;">
<div class="carousel-item active">
<img class="d-block w-100" src="/infer/assets/1911-1915.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1916-1920.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1921-1925.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1926-1930.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1931-1935.jpg" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1936-1940.jpg" alt="Sixth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1941-1945.jpg" alt="Seventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1946-1950.jpg" alt="Eighth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1951-1955.jpg" alt="Ninth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1956-1960.jpg" alt="Tenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1961-1965.jpg" alt="Eleventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1966-1970.jpg" alt="Twelfth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1971-1975.jpg" alt="Thirteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1976-1980.jpg" alt="Fourteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1981-1985.jpg" alt="Fifteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1986-1990.jpg" alt="Sixteenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1991-1995.jpg" alt="Seventeenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/infer/assets/1996-1999.jpg" alt="Eighteenth 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>
<p id="para">
</p>
</div>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle">
</div>
</div>
</div>
答案 1 :(得分:0)
这里的问题是我在代码中两次调用了滑块。因此,create事件仅针对第一个触发,而不针对第二个触发。我要做的就是删除第一个滑块并将lodash, hapi, thinky, when
添加到第二个滑块。 max: 88
事件之后很愉快。