Container centre at machine adapter
-
It's not possible to concentrate the separate labels in the container.tabs. If you put them in a separate flex-container, the slider's gone. The original code is all in one container of .tabs. I understand that everything's going to be rashed out of label additives that determine the initialization of a slider in a separate pelvis. I've been trying to digest the properties left for a .tabs parlabel, but the adaptive works badly and nothing good has come out of it.
// после готовности DOM document.addEventListener("DOMContentLoaded", () => { const contents = { "#tab-btn-1": "#content-1", "#tab-btn-2": "#content-2", "#tab-btn-3": "#content-3" };const activatedSliders = (selector) => {
const sliders = document.querySelectorAll(selector);
sliders.forEach((slider) => {
// инициализация elms[i] в качестве слайдера
if (!slider.classList.contains("activated")) {
slider.classList.add("activated");
new ChiefSlider(slider);
}
});
};const tabBtns = document.querySelectorAll('[name="tab-btn"]');
tabBtns.forEach((tabBtn) => {
tabBtn.addEventListener("change", (e) => {
console.log(e.target);
const selector = contents["#" + e.target.id] + " .slider";
activatedSliders(selector);
});
});activatedSliders("#content-1 .slider");
});*,
*::before,
*::after {
box-sizing: border-box;
}body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}.container {
max-width: 700px;
margin: 0 auto;
}.slider__wrapper {
overflow: hidden;
}.slider__item {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.8);
font-size: 7rem;
}.slider__item:nth-child(1) {
background-color: #f44336;
}.slider__item:nth-child(2) {
background-color: #9c27b0;
}.slider__item:nth-child(3) {
background-color: #3f51b5;
}.slider__item:nth-child(4) {
background-color: #03a9f4;
}.slider__item:nth-child(5) {
background-color: #4caf50;
}.tabs {
font-size: 0;
/max-width: 350px;/
margin-left: auto;
margin-right: auto;
}.tabs>input[type="radio"] {
display: none;
}.tabs>div {
/* скрыть контент по умолчанию */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
}.tabs>label:not(:first-of-type) {
border-left: none;
}.tabs>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Подключаем CSS слайдера -->
<link rel="stylesheet" href="https://kilometr-online.com/wp-content/themes/hello-elementor-child/ChiefSlider/chief-slider.min.css">
<!-- Подключаем JS слайдера -->
<script defer src="https://kilometr-online.com/wp-content/themes/hello-elementor-child/ChiefSlider/chief-slider.min.js"></script>
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Вкладка 1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Вкладка 2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Вкладка 3</label><div id="content-1">
Содержимое 1...
<div class="container"><div class="slider"> <div class="slider__wrapper"> <div class="slider__items"> <div class="slider__item"> <!-- Контент 1 слайда --> 1 </div> <div class="slider__item"> <!-- Контент 2 слайда --> 2 </div> <div class="slider__item"> <!-- Контент 3 слайда --> 3 </div> <div class="slider__item"> <!-- Контент 4 слайда --> 4 </div> <div class="slider__item"> <!-- Контент 5 слайда --> 5 </div> </div> </div> <a href="#" class="slider__control" data-slide="prev"></a> <a href="#" class="slider__control" data-slide="next"></a> </div> </div> <div class="container"> <div class="slider"> <div class="slider__wrapper"> <div class="slider__items"> <div class="slider__item"> <!-- Контент 1 слайда --> 1 </div> <div class="slider__item"> <!-- Контент 2 слайда --> 2 </div> <div class="slider__item"> <!-- Контент 3 слайда --> 3 </div> <div class="slider__item"> <!-- Контент 4 слайда --> 4 </div> <div class="slider__item"> <!-- Контент 5 слайда --> 5 </div> </div> </div> <a href="#" class="slider__control" data-slide="prev"></a> <a href="#" class="slider__control" data-slide="next"></a> </div> </div></div>
<div id="content-2">
Содержимое 2...
<div class="container"><div class="slider"> <div class="slider__wrapper"> <div class="slider__items"> <div class="slider__item"> <!-- Контент 1 слайда --> 1 </div> <div class="slider__item"> <!-- Контент 2 слайда --> 2 </div> <div class="slider__item"> <!-- Контент 3 слайда --> 3 </div> <div class="slider__item"> <!-- Контент 4 слайда --> 4 </div> <div class="slider__item"> <!-- Контент 5 слайда --> 5 </div> </div> </div> <a href="#" class="slider__control" data-slide="prev"></a> <a href="#" class="slider__control" data-slide="next"></a> </div> </div></div>
<div id="content-3">
Содержимое 3...
</div>
</div>
-
.tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }; .content-1, .content-2, .content-3{ width: 100% }Add these styles and make it easier to use the library for these cases, the backbone looks ugly, and the library is easier.
And you don't have a slider missing when you turn the elements apart, and the content, because you use the radio-plate and stylish for it, when displayed, don't see the investment that's indicated.
You know, not even a library, but a stupid code to find js and put yourself in the project will look and work a lot better.
I hope I answered your question.
