How to use CSS combinators?

Question

I have a slider and under each individual slide I would like to display two divs with a description depending on which slide is active.

var swiper = new Swiper('.swiper-container.about', {
  effect: 'coverflow',
  initialSlide: 1,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 800,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: '.swiper-pagination',
  }
});

.swiper-container.about {
  width: 100%;
  padding-top: 200px;
  padding-bottom: 50px;
  height: 100vh;
}

.swiper-slide.about {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 400px !important;
  background-color: rgb(216, 155, 0);
}

.swiper-slide .imgBx {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.swiper-slide .imgBx img {
  width: 100%;
}

.swiper-slide .employee {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.swiper-slide .employee h3 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

.swiper-slide .employee h3 span {
  font-size: 16px;
  color: white;
}

.employee-details-text {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.employee-details-note {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.swiper-container .swiper-wrapper .swiper-slide~.employee-details-text,
.swiper-container .swiper-wrapper .swiper-slide~.employee-details-note {
  display: none;
}

.swiper-slide.swiper-slide-active+.employee-details-text,
.swiper-slide.swiper-slide-active+.employee-details-note {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="tom.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Travel production manager</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="annie.jpg">
      </div>
      <div class="employee">
        <h3>Annie<br><span>Co-founder and Finance manager</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="suzan.jpg">
      </div>
      <div class="employee">
        <h3>Suzan<br><span>Travel manager</span></h3>
      </div>

    </div>

  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

</div>

<div class="employee-details-text">
 Description employee one
</div>

<div class="employee-details-note">
  Note employee one
</div>
<div class="employee-details-text">
 Description employee two
</div>

<div class="employee-details-note">
  Note employee two
</div>

<div class="employee-details-text">
 Description employee three
</div>

<div class="employee-details-note">
  Note employee three
</div>

So under every employee slide I would like to display their description.

Here is simple sketch of how it should look:

The Div with the description is outside of the <div class="swiper-container about"> div.

When the slide is active, the class swiper-slide-active is added to

<div class="swiper-slide about">

I am trying to use the combinator ~ selector to connect the active slide with the proper description divs so I added this css code:

.swiper-container .swiper-wrapper .swiper-slide~.employee-details-text,
.swiper-container .swiper-wrapper .swiper-slide~.employee-details-note {
  display: none;
}

.swiper-slide.swiper-slide-active+.employee-details-text,
.swiper-slide.swiper-slide-active+.employee-details-note {
  display: block;
}

This doesn't seem to work. All descriptions are displayed at once. Not sure what am I missing, any advice is highly appreciated.

@Rob Well I thought it was some HTML issue or maybe I did something wrong with my CSS code... — user9347049
– user9347049, Commented May 1, 2019 at 12:21

Gacci · Accepted Answer · 2019-05-01 13:17:09Z

The easiest, cleanest and more organized way to accomplish what you are looking for would be to make use of one the features provided by the plugin; swiper.controller.control = another_instance. If you want to accomplish it using ~ selector, it can be done but it will be very repetitive as you would have to basically copy the code from swiper.css. There is one more solution using javascript only. Let us know if this solution does not work.

I did change your css except for the first class - I simply uncommented to make loook more like the picture you showed. You can uncomment it and it will work just fine.

I did change the html a little to be able to use that functionality I mentioned at the beginning. Basically, what it happens is that the first swiper controls the second one.

NOTE: when you run it to test it make it in full view to see both working together

var swiper = new Swiper('.swiper-container.about', {
  effect: 'coverflow',
  initialSlide: 1,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 800,
    modifier: 1,
    slideShadows: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev'
  }
});

swiper.controller.control = new Swiper('#description', {
	slidesPerView: 1
});

/*
.swiper-container.about {
  width: 100%;
  padding-top: 200px;
  padding-bottom: 50px;
  height: 100vh;
}
*/

.swiper-slide.about {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 400px !important;
  background-color: rgb(216, 155, 0);
}
.swiper-container.about .swiper-wrapper{
	height: auto !important;
}
.swiper-slide .imgBx {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.swiper-slide .imgBx img {
  width: 100%;
}

.swiper-slide .employee {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.swiper-slide .employee h3 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

.swiper-slide .employee h3 span {
  font-size: 16px;
  color: white;
}

.employee-details-text {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.employee-details-note {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.swiper-container .swiper-wrapper .swiper-slide~.employee-details-text,
.swiper-container .swiper-wrapper .swiper-slide~.employee-details-note {
  display: none;
}

.swiper-slide.swiper-slide-active+.employee-details-text,
.swiper-slide.swiper-slide-active+.employee-details-note {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="tom.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Travel production manager</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="annie.jpg">
      </div>
      <div class="employee">
        <h3>Annie<br><span>Co-founder and Finance manager</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="suzan.jpg">
      </div>
      <div class="employee">
        <h3>Suzan<br><span>Travel manager</span></h3>
      </div>

    </div>
	
    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="tom.jpg">
      </div>
      <div class="employee">
        <h3>Charlie<br><span>Travel production manager assistant</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="annie.jpg">
      </div>
      <div class="employee">
        <h3>Kevin<br><span>Accountant</span></h3>
      </div>

    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="suzan.jpg">
      </div>
      <div class="employee">
        <h3>Robert<br><span>Graphic Designer</span></h3>
      </div>

    </div> 

  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

</div>


<div class="swiper-container" id="description">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<h1>Slide #1</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
		<div class="swiper-slide">
			<h1>Slide #2</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
		<div class="swiper-slide">
			<h1>Slide #3</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
		<div class="swiper-slide">
			<h1>Slide #4</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
		<div class="swiper-slide">
			<h1>Slide #5</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
		<div class="swiper-slide">
			<h1>Slide #6</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
	</div>
</div>

Joykal Infotech · Accepted Answer · 2019-05-01 11:26:16Z

I have made changes in your HTML structure please have a look once, the details related to each employee are in the same structure and they show on the active slide

in case you can't change the structure you will have to use jQuery for that purpose and also use of ids for triggering the correct detail.

var swiper = new Swiper('.swiper-container.about', {
  effect: 'coverflow',
  initialSlide: 1,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 800,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: '.swiper-pagination',
  }
});

.swiper-container.about {
  width: 100%;
  padding-top: 200px;
  padding-bottom: 50px;
  height: 100vh;
}

.swiper-slide.about {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 400px !important;
  background-color: rgb(216, 155, 0);
}

.swiper-slide .imgBx {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.swiper-slide .imgBx img {
  width: 100%;
}

.swiper-slide .employee {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.swiper-slide .employee h3 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

.swiper-slide .employee h3 span {
  font-size: 16px;
  color: white;
}

.employee-details-text {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.employee-details-note {
  font-family: 'EB Garamond', serif !important;
  background-color: black;
  color: white;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.swiper-slide-active .employee-details-note,
.swiper-slide-active .employee-details-text {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="tom.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Travel production manager</span></h3>
      </div>
      <div class="desc">
        <div class="employee-details-text">
          Description employee one
        </div>
        <div class="employee-details-note">
          Note employee one
        </div>
      </div>
    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="annie.jpg">
      </div>
      <div class="employee">
        <h3>Annie<br><span>Co-founder and Finance manager</span></h3>
      </div>
      <div class="desc">
        <div class="employee-details-text">
          Description employee two
        </div>
        <div class="employee-details-note">
          Note employee two
        </div>
      </div>
    </div>

    <div class="swiper-slide about">
      <div class="imgBx">
        <img src="suzan.jpg">
      </div>
      <div class="employee">
        <h3>Suzan<br><span>Travel manager</span></h3>
      </div>
      <div class="desc">
        <div class="employee-details-text">
          Description employee three
        </div>
        <div class="employee-details-note">
          Note employee three
        </div>
      </div>
    </div>

  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

</div>

I have already try it like this. And it works when it comes to functionalities but my divs are not displayed in nice way they are very tight because of fixed width of slide, which is not equal to design I have. That was the main reason I took them out of swiper container and tried to get them work with CSS combinators. If you could help me with adding jQuery to it to make it work I would be very grateful.
The problem of divs tight and in fixed width will also appear after using jQuery, because that will be used for functionality only, the styling needs to be done with CSS. show me your design, i will try the styling problem
You have it in my question update. Hopefully it helps! But I was sure It is doable with CSS and that I can reach it if is out of container. But well...

Collectives™ on Stack Overflow

How to use CSS combinators?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related