Javascript 使用循环创建内容时，滑动滑块不起作用
我正在尝试从Google电子表格加载数据，并使用javascript循环数据。这是一段在Html中硬编码数据的代码 index.htmlJavascript 使用循环创建内容时，滑动滑块不起作用,javascript,slick.js,tabletop.js,Javascript,Slick.js,Tabletop.js,我正在尝试从Google电子表格加载数据，并使用javascript循环数据。这是一段在Html中硬编码数据的代码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Responsive history timeline</title> <link hre
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive history timeline</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--Timeline carousel-->
<section class="timeline-carousel">
<h1>History timeline</h1>
<div class="timeline-carousel__item-wrapper"data-js="timeline-carousel">
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1914</span>
<span class="month">June 28</span>
<p>Assassination of Archduke Franz Ferdinand of Austria, heir to the Austro-Hungarian throne, who was killed in Sarajevo along with his wife Duchess Sophie by Bosnian Serb Gavrilo Princip.</p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('http://factsforkids.net/wp-content/uploads/2013/09/13.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">July 5 </span>
<p>Austria-Hungary seeks German support for a war against Serbia in case of Russian militarism. Germany gives assurances of support.</p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://cdn-images-1.medium.com/max/2000/1*tjpdoOeFp6PfczMjqh6JEA.jpeg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1915</span>
<span class="month">January 2</span>
<p>The Russian offensive in the Carpathians begins. It will continue until April 12. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://ichef-1.bbci.co.uk/news/660/media/images/72349000/jpg/_72349652_generals-on-horseback.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">January 18–19 </span>
<p>Battle of Jassin. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://thechive.files.wordpress.com/2014/05/world-war-1-photography-30.jpg?quality=85&strip=info&w=550') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1916</span>
<span class="month">January 5–17</span>
<p>Austro-Hungarian offensive against Montenegro, which capitulates. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://kidskonnect.com/wp-content/uploads/2010/10/Approaching_Omaha.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">January 6–7 </span>
<p>Battle of Mojkovac. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.trimart.com.ng/wp-content/uploads/1970/01/GREEN-APPLE-1-PIECE.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">2019</span>
<p>Green apple</p>
<a href="https://www.trimart.com.ng/wp-content/uploads/1970/01/GREEN-APPLE-1-PIECE.jpg" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://static1.squarespace.com/static/5849b12a2e69cf47aecece6b/584ebb9646c3c416aac4f2b5/5d50528ce6bf0300010ffed8/1565554761086/red-apple-small.jpg?format=2500w') center center; background-size:cover;"></div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">2018</span>
<p>Apple</p>
<a href="https://static.agcanada.com/wp-content/uploads/sites/5/2018/11/apple_GettyImages186843005_cmyk.jpg" class="read-more">Read more</a>
</div>
</div>
</div>
<!--/Timeline item-->
</div>
</section>
<!--Timeline carousel-->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1znAku0PXH31_0hH-z3b86DMBf_4jr7JBe4BDuuaDGTw/edit#gid=0';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
alert('Successfully processed!')
console.log(data);
}
window.addEventListener('DOMContentLoaded', init)
</script>
<script src='https://code.jquery.com/jquery-3.4.1.min.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
<script src="./script.js"></script>
<!--<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>-->
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive history timeline</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--Timeline carousel-->
<div class="timeline-carousel">
<h1>History Timeline</h1>
<div class="timeline-carousel__item-wrapper" data-js="timeline-carousel">
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
var publicSpreadsheetUrl = '1znAku0PXH31_0hH-z3b86DMBf_4jr7JBe4BDuuaDGTw';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
/*alert('Successfully processed!')*/
console.log(data);
for(var i = 0;i < data.length; i++){
$('.timeline-carousel').append(
'<div class="timeline-carousel__item">'
+ '<div class="timeline-carousel__image">'
+ '<div class="media-wrapper media-wrapper--overlay" style="background: url(' + data[i].photo + ') center center; background-size:cover;"></div></div>'
+ '<div class="timeline-carousel__item-inner">'
+ '<span class="year">' + data[i].year + '</span>'
+ '<span class="month">' + data[i].month + '</span>'
+ '<p>' + data[i].caption + '</p>'
+ '<a href =' + data[i].link + ' class="read-more">Read more</a></div></div>');
}
}
window.addEventListener('DOMContentLoaded', init)
</script>
<script src='https://code.jquery.com/jquery-3.4.1.min.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
<script src="./script.js"></script>
<!--<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>-->
</body>
</html>
tabletop.js<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive history timeline</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--Timeline carousel-->
<section class="timeline-carousel">
<h1>History timeline</h1>
<div class="timeline-carousel__item-wrapper"data-js="timeline-carousel">
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1914</span>
<span class="month">June 28</span>
<p>Assassination of Archduke Franz Ferdinand of Austria, heir to the Austro-Hungarian throne, who was killed in Sarajevo along with his wife Duchess Sophie by Bosnian Serb Gavrilo Princip.</p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('http://factsforkids.net/wp-content/uploads/2013/09/13.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">July 5 </span>
<p>Austria-Hungary seeks German support for a war against Serbia in case of Russian militarism. Germany gives assurances of support.</p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://cdn-images-1.medium.com/max/2000/1*tjpdoOeFp6PfczMjqh6JEA.jpeg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1915</span>
<span class="month">January 2</span>
<p>The Russian offensive in the Carpathians begins. It will continue until April 12. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://ichef-1.bbci.co.uk/news/660/media/images/72349000/jpg/_72349652_generals-on-horseback.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">January 18–19 </span>
<p>Battle of Jassin. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://thechive.files.wordpress.com/2014/05/world-war-1-photography-30.jpg?quality=85&strip=info&w=550') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<span class="year">1916</span>
<span class="month">January 5–17</span>
<p>Austro-Hungarian offensive against Montenegro, which capitulates. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://kidskonnect.com/wp-content/uploads/2010/10/Approaching_Omaha.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">January 6–7 </span>
<p>Battle of Mojkovac. </p>
<a href="#" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.trimart.com.ng/wp-content/uploads/1970/01/GREEN-APPLE-1-PIECE.jpg') center center; background-size:cover;"></div>
</div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">2019</span>
<p>Green apple</p>
<a href="https://www.trimart.com.ng/wp-content/uploads/1970/01/GREEN-APPLE-1-PIECE.jpg" class="read-more">Read more</a>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline-carousel__item">
<div class="timeline-carousel__image">
<div class="media-wrapper media-wrapper--overlay" style="background: url('https://static1.squarespace.com/static/5849b12a2e69cf47aecece6b/584ebb9646c3c416aac4f2b5/5d50528ce6bf0300010ffed8/1565554761086/red-apple-small.jpg?format=2500w') center center; background-size:cover;"></div>
<div class="timeline-carousel__item-inner">
<div class="pointer"></div>
<span class="month">2018</span>
<p>Apple</p>
<a href="https://static.agcanada.com/wp-content/uploads/sites/5/2018/11/apple_GettyImages186843005_cmyk.jpg" class="read-more">Read more</a>
</div>
</div>
</div>
<!--/Timeline item-->
</div>
</section>
<!--Timeline carousel-->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1znAku0PXH31_0hH-z3b86DMBf_4jr7JBe4BDuuaDGTw/edit#gid=0';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
alert('Successfully processed!')
console.log(data);
}
window.addEventListener('DOMContentLoaded', init)
</script>
<script src='https://code.jquery.com/jquery-3.4.1.min.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
<script src="./script.js"></script>
<!--<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>-->
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive history timeline</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--Timeline carousel-->
<div class="timeline-carousel">
<h1>History Timeline</h1>
<div class="timeline-carousel__item-wrapper" data-js="timeline-carousel">
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
var publicSpreadsheetUrl = '1znAku0PXH31_0hH-z3b86DMBf_4jr7JBe4BDuuaDGTw';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
/*alert('Successfully processed!')*/
console.log(data);
for(var i = 0;i < data.length; i++){
$('.timeline-carousel').append(
'<div class="timeline-carousel__item">'
+ '<div class="timeline-carousel__image">'
+ '<div class="media-wrapper media-wrapper--overlay" style="background: url(' + data[i].photo + ') center center; background-size:cover;"></div></div>'
+ '<div class="timeline-carousel__item-inner">'
+ '<span class="year">' + data[i].year + '</span>'
+ '<span class="month">' + data[i].month + '</span>'
+ '<p>' + data[i].caption + '</p>'
+ '<a href =' + data[i].link + ' class="read-more">Read more</a></div></div>');
}
}
window.addEventListener('DOMContentLoaded', init)
</script>
<script src='https://code.jquery.com/jquery-3.4.1.min.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
<script src="./script.js"></script>
<!--<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>-->
</body>
</html>
添加和删除$（'.add-remove'）.slick({
幻灯片放映：3，
幻灯片滚动：3
});
$（'add-remove'）.slick（'slickAdd'，'I'm a new slide！'）；
此代码将卡添加到
add removeappendslickAdd$('.add-remove').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.add-remove').slick('slickAdd','<div><h3>I'm a new slide!</h3></div>');