Как снять границу вокруг нижнего колонтитула/подписи? ⇐ Jquery

[Anonymous]

У меня есть карусель с несколькими слайдами и красная граница вокруг карусели. Каждый слайд содержит изображение, за которым следует тег HR и подпись. Я хочу удалить границу после метки HR и подписи. Итак, я завернул их в класс div = "carousel-footer". < /P>
Я не пытаюсь полностью удалить границу из контейнера карусели-я просто хочу удалить границу под нижней частью нижней части нижней части. class = "Snippet">

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const track = document.querySelector('.carousel-track');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.carousel-button.next');
const prevButton = document.querySelector('.carousel-button.prev');
const nav = document.querySelector('.carousel-nav');
const SLIDES_PER_PAGE = 5;
let currentIndex = 0;
// Create ellipsis
const ellipsisLeft = document.createElement('span');
ellipsisLeft.textContent = '...';
ellipsisLeft.classList.add('ellipsis', 'ellipsis-left');
ellipsisLeft.style.display = 'none';
const ellipsisRight = document.createElement('span');
ellipsisRight.textContent = '...';
ellipsisRight.classList.add('ellipsis', 'ellipsis-right');
ellipsisRight.style.display = 'none';
nav.appendChild(ellipsisLeft);
nav.appendChild(ellipsisRight);

function renderDots() {
// Remove old dots
nav.querySelectorAll('.carousel-indicator').forEach((dot) => dot.remove());
const totalSlides = slides.length;
const start = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
const end = Math.min(start + SLIDES_PER_PAGE, totalSlides);
// Show/hide ellipsis
ellipsisLeft.style.display = start > 0 ? 'inline' : 'none';
ellipsisRight.style.display = end < totalSlides ? 'inline' : 'none';
// Insert dots before right ellipsis
for (let i = start; i < end; i++) {
const dot = document.createElement('span');
dot.classList.add('carousel-indicator');
if (i === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(i));
nav.insertBefore(dot, ellipsisRight);
}
}
const updateUI = () => {
renderDots();
prevButton.disabled = currentIndex === 0;
nextButton.disabled = currentIndex === slides.length - 1;
prevButton.style.opacity = prevButton.disabled ? '0.5' : '1';
nextButton.style.opacity = nextButton.disabled ? '0.5' : '1';
prevButton.style.cursor = prevButton.disabled ? 'default' : 'pointer';
nextButton.style.cursor = nextButton.disabled ? 'default' : 'pointer';
};
const goToSlide = (index) => {
const slideWidth = slides[0].getBoundingClientRect().width;
track.style.transform = `translateX(-${slideWidth * index}px)`;
currentIndex = index;
updateUI();
};
nextButton.addEventListener('click', () => {
if (currentIndex < slides.length - 1) {
goToSlide(currentIndex + 1);
}
});
prevButton.addEventListener('click', () => {
if (currentIndex > 0) {
goToSlide(currentIndex - 1);
}
});

// Ellipsis events
ellipsisLeft.addEventListener('click', () => {
const start = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
goToSlide(Math.max(0, start - SLIDES_PER_PAGE));
});

ellipsisRight.addEventListener('click', () =>  {
const start = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
goToSlide(Math.min(start + SLIDES_PER_PAGE, slides.length - 1));
});
updateUI();
});< /code>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.carousel {
position: relative;
overflow: hidden;
margin: auto;
border: 1px solid red;
box-sizing: border-box;
}

.carousel-footer {
background: #fff;
/* tried to overlay the border */
position: relative;
z-index: 2;
}

.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}

.carousel-slide {
min-width: 100%;
transition: opacity 0.5s ease;
}

.carousel-slide img {
width: 100%;
display: block;

z-index: 10;
}

.carousel-nav {
text-align: center;
left: 35%;
bottom: 180px;
position: absolute;
}

.carousel-container {
position: relative;
width: 100%;
max-width: 1000px;
/* optional container width */
margin: 0 auto;
display: flex;
justify-content: center;
/* centers content horizontally */
align-items: center;
/* centers content vertically if needed */
}

.carousel-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
border: 2px solid #1a4480;
}

.carousel-indicator.active {
background: #1a4480 !important;
}

.carousel-button {
position: absolute;
transform: translateY(-50%);
font-size: 54px;
color: #1a4480;
border: none;
padding: 10px;
z-index: 10;
background-color: transparent;
}

.carousel-button.prev {
left: 25%;
position: absolute;
bottom: 115px;
z-index: 10;
}

.carousel-button.next {
right: 30%;
position: absolute;
bottom: 115px;
z-index: 10;
}

.carousel-button:disabled {
pointer-events: none;
color: #919191;
}

.carousel-nav .ellipsis {
font-size: 3rem !important;
cursor: pointer;
color: #1a4480;
}

.carousel-border-wrapper {
border: 1px solid red;
display: inline-block;
}

@media screen and (max-width: 717px) {
.carousel-nav {
bottom: 230px;
width: 31%;
}

.carousel-button.next {
bottom: 160px;
}

.carousel-button.prev {
bottom:  160px;
}
}< /code>




[img]https://cdn.britannica.com/62/156362-050-4E8FE282/Acacia-tree-savanna-Zimbabwe.jpg[/img]
        />



ABCs
Test1.





[img]https://cdn.britannica.com/62/156362-050-4E8FE282/Acacia-tree-savanna-Zimbabwe.jpg[/img]
        />



XYZ
test2





[img]https://cdn.britannica.com/62/156362-050-4E8FE282/Acacia-tree-savanna-Zimbabwe.jpg[/img]
        />



xxx
test test





❮
❯

Подробнее здесь: https://stackoverflow.com/questions/797 ... er-caption