Придумал способ сделать это, сосредоточившись в основном на изменении z-index и свойств отображения. Лучшее решение, которое может предложить мой новичок **. Если у кого-нибудь есть предложения по улучшению моих кодов, я буду благодарен.
Вот мой HTML:
</section>
`` `
Вот мой CSS:
.slider {
position: relative;
width: 80vh;
height: 75vh;
margin: 0px auto;
}
.slider-exp {
position: relative;
width: 135vh;
height: 90vh;
margin: 0px auto;
padding-top: 4vh;
}
/* Hide the images by default */
.mySlides {
position: relative;
display: none;
z-index: 0;
}
/* Fit box for the image and style for stretch */
.lrg-img {
width: 80vh;
height: 60vh;
object-fit: cover;
margin: 0px auto;
border-radius: 3px;
}
.exp-size {
position: relative;
width: 135vh;
height: 90vh;
margin: 0px auto;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous, expand and close buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
margin-top: -30px;
top: 30vh;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
z-index: 1;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
.prev-exp,
.next-exp {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: #fff;
font-weight: bold;
font-size: 20px;
display: none;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
z-index: 4;
}
.prev-exp {
left: 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev-exp:hover,
.next-exp:hover,
#close-btn:hover,
#expand-btn:hover {
background-color: rgba(0, 0, 0, 0.6);
-webkit-filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
}
#expand-btn,
#close-btn {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
width: 18px;
position: absolute;
top: 0px;
right: 0;
z-index: 1;
border-radius: 0 3px 0 3px;
padding: 16px;
-webkit-filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
}
#close-btn {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #333;
z-index: 4 !important;
top: 4vh;
right: 0;
border-radius: 0 3px 0 3px;
display: none;
}
/* Thumbs style*/
.thumbs {
height: 11vh;
width: 80vh;
float: left;
overflow-y: hidden;
overflow-x: scroll;
margin-top: 0rem;
white-space: nowrap;
z-index: 0;
}
/* width */
.thumbs::-webkit-scrollbar {
height: 4px;
border-radius: 50%;
}
/* Track */
.thumbs::-webkit-scrollbar-track {
background: #fff;
}
/* Handle */
.thumbs::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
.thumbs::-webkit-scrollbar-thumb:hover {
background: #666;
}
.thumbs_style {
display: inline-block;
}
.thumbs_style img {
width: 10vh;
height: 8vh;
border-radius: 3px;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
border: 2px solid rgba(0, 0, 0, 0.4);
}
.active,
.demo:hover {
opacity: 1;
border: 2px solid #ffbc00;
}
/* Expand-Window style */
#expand-window {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.hide {
display: block;
}
Вот мой Javascript:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
// EXPAND FUNCTION
// Open the expanded slider
document.querySelector('#expand-btn').addEventListener('click', function () {
let expandables = document.querySelectorAll('.expandables')
let hide = document.querySelectorAll('.hide')
let show = document.querySelectorAll('.show')
let expSize = document.querySelectorAll('.lrg-img')
for (i = 0; i < expandables.length; i++) {
expandables[i].style.zIndex = "3";
}
for (i = 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
for (i = 0; i < show.length; i++) {
show[i].style.display = "block";
}
for (i = 0; i < expSize.length; i++) {
expSize[i].classList.add("exp-size");
}
document.querySelector('.slider').classList.add("slider-exp");
// document.querySelector('#close-btn').style.display = "block";
// document.querySelector("#expand-window").style.display = "block";
});
// Close the expanded slider
document.querySelector('#close-btn').addEventListener('click', function () {
let expandables = document.querySelectorAll('.expandables')
let hide = document.querySelectorAll('.hide')
let show = document.querySelectorAll('.show')
let expSize = document.querySelectorAll('.lrg-img')
for (i = 0; i < expandables.length; i++) {
expandables[i].style.zIndex = "0";
}
for (i = 0; i < hide.length; i++) {
hide[i].style.display = "block";
}
for (i = 0; i < show.length; i++) {
show[i].style.display = "none";
}
for (i = 0; i < expSize.length; i++) {
expSize[i].classList.remove("exp-size");
}
document.querySelector('.slider').classList.remove("slider-exp");
document.querySelector("#expand-window").style.display = "none";
});```