如何在幻灯片上点画圆滑?

时间:2019-01-31 19:47:48

标签: javascript jquery html css slick.js

我正在一个网站上,想添加一个光滑的演示文稿。我最初遇到问题,但现在已解决。有谁知道如何在幻灯片上画点以及实际幻灯片上的可编程按钮,例如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>

我最终在幻灯片下面有按钮,而我想要幻灯片上的一组按钮

1 个答案:

答案 0 :(得分:0)

您可以使用CSS修改点的位置。我认为课程是.slick-dots。像这样:

.slick-dots {
  position: relative;
  z-index: 10;
  bottom: 50px;
}

这很可能不是完全正确。但是通常,您希望使用CSS将元素定位在较高的z-index上,并将点向上移动。您甚至可以在所引用的网站上浏览CSS-您知道该怎么做吗?好像他们在使用transform: translateY(-50)向上移动点。