This is a simple js gallery. I am using not:first-child to display only one photo when the page is loaded. However, it does not hide the other photos. You can view the gallery at this link: (please note that some photos are +18).
My objective is to hide all photos except for the first one when the page loads. After clicking on the buttons, it should display the next or previous photos normally. I'm confused about what I wrote incorrectly in terms of syntax and logic. The JavaScript is working, but the CSS is not.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "inline";
}.mySlides not:first-child {
display: none !important;
}<div class="btt"><button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button" onclick="plusDivs(1)">Next ❯</button></div>
<div class="w3-content">
<div><img class="mySlides" src="/wp-content/images/1.jpg" alt="Kaley Cuoco nackt"></div>
<div><img class="mySlides" src="/wp-content/images/2.jpg" alt="Kaley Cuoco nackt"></div>
<div><img class="mySlides" src="/wp-content/images/3.jpg" alt="Kaley Cuoco nackt"></div>
<div><img class="mySlides" src="/wp-content/images/4.jpg" alt=Kaley Cuoco nackt ""></div>
<!-- More image elements here -->
<div><img class="mySlides" src="/wp-content/images/21.jpg" alt="Kaley Cuoco nackt "></div>
<div><img class="mySlides" src="/wp-content/images/22.jpg" alt="Kaley Cuoco nackt "></div>
</div>