我正在一个网站上,想添加一个光滑的演示文稿。我最初遇到问题,但现在已解决。有谁知道如何在幻灯片上画点以及实际幻灯片上的可编程按钮,例如this site?
这是针对尚未启动的全新网站。我还没有尝试太多,因为我对编码还很陌生,但是我尝试使用在线找到的其他一些代码(开放使用)
<!DOCTYPE html>
<html>
<head>
<title>Sunny Bistro</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="CSS/Base%20CSS.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" type="text/css">
<style>
.slider-content{
padding:150px 0;
}
.slider-content h2{
color:red;
}
.slider-content p{
color:green;
}
</style>
</head>
<body>
<div id="slideshow">
<div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 1</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
<div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 2</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.header ').stickyNavbar();
$('#slideshow').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: true,
autoplay:true,
autoplayspeed: 2000,
});
})
</script>
</html>
我最终在幻灯片下面有按钮,而我想要幻灯片上的一组按钮
答案 0 :(得分:0)
您可以使用CSS修改点的位置。我认为课程是.slick-dots
。像这样:
.slick-dots {
position: relative;
z-index: 10;
bottom: 50px;
}
这很可能不是完全正确。但是通常,您希望使用CSS将元素定位在较高的z-index
上,并将点向上移动。您甚至可以在所引用的网站上浏览CSS-您知道该怎么做吗?好像他们在使用transform: translateY(-50)
向上移动点。