Как сделать точки на слайд-шоу в slick?
Я работаю над сайтом и хотел добавить красивую презентацию. Сначала у меня были проблемы, но сейчас они устранены. Кто-нибудь знает, как сделать точки на слайд-шоу вместе с программируемыми кнопками на реальном слайд-шоу, например, в этот сайт?
Это для совершенно нового сайта, который еще не запущен. Я не пробовал слишком много, так как я новичок в кодировании, но я пытался использовать несколько других фрагментов кода, которые я нашел в Интернете (открытое использование)
<!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>Я заканчиваю с кнопками под слайд-шоу, тогда как я хотел бы набор кнопок на слайд-шоу
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать css для изменения размещения точек. Я думаю, что класс .slick-dots. Что-то вроде этого:
.slick-dots {
position: relative;
z-index: 10;
bottom: 50px;
}
Скорее всего это не совсем то. Но в целом вы хотите использовать CSS для позиционирования элемента на более высоком z-index и перемещения точек вверх. Вы даже можете заглянуть в CSS на сайте, на который вы ссылаетесь, — вы знаете, как это сделать? Похоже, они используют transform: translateY(-50), чтобы поднять точки вверх.
Вы знаете, как сделать точки настоящими точками? на данный момент они выглядят как это
@VladConovali извините, не видел этого в то время. Но похоже, что вы получили ответ в другом месте. Если мой ответ помог вам, пожалуйста, примите его как ответ.
Можете ли вы сократить свой код только до того, что необходимо для решения этой проблемы? Знаешь, сделать так, чтобы тебе было легко помочь.