Closure of elements on the basis of the word
-
There's a slider on the website with different slides. For each type of class, the task is to hide all the elements that do not contain the name of the class after its input Tell me where to dig, finding anything like that doesn't give up.
-
You need to use the method. https://swiperjs.com/swiper-api#method-swiper-removeSlide ♪ An example of the code was given below. Classes may not conform to elements - the code was written on the basis of an example from the dock swiper.js. Get in the field, for example, "slide-2" and filter it out.
const slides = [ { title: "Slide 1", class: "slide-1" }, { title: "Slide 2", class: "slide-2" }, { title: "Slide 3", class: "slide-3" }, { title: "Slide 4", class: "slide-2" } ];const initSlider = () => {
const swiperWrapper = document.querySelector(".swiper-wrapper");
while (swiperWrapper.firstChild) {
swiperWrapper.removeChild(swiperWrapper.firstChild);
}
slides.forEach((el) => {
let slide = document.createElement("div");
slide.classList.add("swiper-slide",${el.class});
slide.innerHTML = el.title;
swiperWrapper.appendChild(slide);
});
};initSlider();
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});document
.querySelector(".hide-slides-btn")
.addEventListener("click", function (e) {
e.preventDefault();
const selector = document.querySelector("input").value;
const slides = document.querySelectorAll(.${selector});
slides.forEach((s, index) => {
swiper.removeSlide(index);
});
});document
.querySelector(".reset-slides-btn")
.addEventListener("click", function (e) {
const input = document.querySelector("input");
input.value = "";
initSlider();
swiper.update();
});.swiper {
width: 100%;
height: 100%;
}.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}.swiper {
width: 100%;
height: 300px;
margin: 20px auto;
}.append-buttons {
text-align: center;
display: flex;
justify-content: center;
margin-top: 20px;
}.append-buttons button {
display: inline-block;
cursor: pointer;
border: 1px solid #007aff;
color: #007aff;
text-decoration: none;
padding: 4px 10px;
border-radius: 4px;
margin: 0 10px;
font-size: 13px;
}input {
display: block;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #007aff;
appearance: none;
border-radius: 0.25rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head><body>
<div #swiperRef="" class="swiper mySwiper">
<div class="swiper-wrapper"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<p class="append-buttons">
<input type="text" />
<button class="hide-slides-btn">Hide Slides</button>
<button class="reset-slides-btn">Reset Slides</button>
</p>
</body>
</html>FS https://ru.stackoverflow.com/help/someone-answers
