Ползунок кавычек, кажется, не загружает текст, кнопки и точки есть, но реальные цитаты в центре не отображаются внутри них, есть просто набор точек и кнопок, аккуратно помещенных в центре экран, где цитаты должны быть. Как сделать так, чтобы внутри кнопок ползунка отображались кавычки HTML
<div class="testimonials">
<div class="slideshow-container">
<div class="mySlides">
<q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, vel?</q>
<p class="author">Name Name</p>
</div>
<div class="mySlides">
<q>Quibusdam adipisci ab explicabo. Porro exercitationem delectus nam unde corporis.</q>
<p class="author">Name Name</p>
</div>
<div class="mySlides">
<q>Beatae saepe ab sed, nihil perferendis et, pariatur dolores! Vel.</q>
<p class="author">Name Name</p>
</div>
<a class="prev" onclick='plusSlides(-1)'>❮</a>
<a class="next" onclick='plusSlides(1)'>❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick='currentSlide(1)'></span>
<span class="dot" onclick='currentSlide(2)'></span>
<span class="dot" onclick='currentSlide(3)'></span>
</div>
</div>
CSS
.testimonials {
height: 800px;
}
.slideshow-container {
position: relative;
background: #f1f1f1;
}
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding:16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 30px 0;
user-select: none;
}
.next {
position: absolte;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color:white;
}
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background: #717171;
}
q {
color: #1c1c1c;
font-style: italic;
}
.authour {
color: aqua;
}