Home>

Unable to center separately labels that are in the .tabs container. If you wrap them in a separate flex container, the slider disappears. In the source code, everything is in one .tabs container. I understand that everything is crumbling because of the IDs of the labels, which determine the initialization of the slider in a separate tab. I was trying to wriggle out the left property for .tabs > label, but the adaptive does not work well and nothing good came of it.

//after the DOM is ready
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)= >
 {
      //initialize elms [i] as a slider
      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 {
  /* hide content by default * /
  display: none;
  border: 1px solid # e0e0e0;
  padding: 10px 15px;
  font-size: 16px;
}
/* display content associated with the selected radio button (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" >
  <
! -Including CSS slider ->
  <link rel= "stylesheet" href= "https://kilometr-online.com/wp-content/themes/hello-elementor-child/ChiefSlider/chief-slider.min.css" > <
! -We connect the JS slider ->
  <
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" >
Tab 1 <
/label >
  <
input type= "radio" name= "tab-btn" id= "tab-btn-2" value= "" >
  <
label for= "tab-btn-2" >
Tab 2 <
/label >
  <
input type= "radio" name= "tab-btn" id= "tab-btn-3" value= "" >
  <
label for= "tab-btn-3" >
Tab 3 <
/label >
  <
div id= "content-1" >
    Content 1 ...
    <
div class= "container" >
      <
div class= "slider" >
        <
div class= "slider__wrapper" >
          <
div class= "slider__items" >
            <
div class= "slider__item" >
              <
! -Content of 1 slide ->
              1
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of 2 slides ->
              2
            <
/div >
            <
div class= "slider__item" >
              <
! -Content 3 slides ->
              3
            <
/div >
            <
div class= "slider__item" >
              <
! -Content 4 slides ->
              4
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of the 5th slide ->
              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" >
              <
! -Content of 1 slide ->
              1
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of 2 slides ->
              2
            <
/div >
            <
div class= "slider__item" >
              <
! -Content 3 slides ->
              3
            <
/div >
            <
div class= "slider__item" >
              <
! -Content 4 slides ->
              4
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of the 5th slide ->
              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" >
    Content 2 ...
    <
div class= "container" >
      <
div class= "slider" >
        <
div class= "slider__wrapper" >
          <
div class= "slider__items" >
            <
div class= "slider__item" >
              <
! -Content of 1 slide ->
              1
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of 2 slides ->
              2
            <
/div >
            <
div class= "slider__item" >
              <
! -Content 3 slides ->
              3
            <
/div >
            <
div class= "slider__item" ><! -Content 4 slides ->
              4
            <
/div >
            <
div class= "slider__item" >
              <
! -Content of slide 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" >
    Content 3 ...
  <
/div >
<
/div >
  • Answer # 1
    .tabs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    };
    .content-1, .content-2, .content-3 {
      width: 100%
    }
    

    add these styles and for these cases it is better to use a library, the layout looks ugly, and the library is easier). And your slider does not disappear when you wrap the elements separately, but the content, because you use radio buttons and styles because of this, when displayed, they do not see the nesting that is specified. You can even not a library, but stupidly find the code in js and insert it into your project, it will look and work much better. I hope I answered your question

    Besides the fact that now all the content is in a row, nothing has changed. Or am I just dumb? Show your version of the code so that you can run it here.

    Aleksus2021-11-08 11:21:09

    @ Alexis jsfiddle.net /a40si8bk

    EkaterinaRatatui2021-11-08 12:16:33