Creating a CSS-only carousel - Ensuring its correctness (especially in terms of height)

Just stumbled upon this amazing CSS-only carousel. Any hints on how I could make it responsive and display two carousels side by side?

Click here to view the carousel.

/* ***************************************************** */
/* SLIDER 1 */
/* ***************************************************** */

.carousel-wrapper {
border: 1px solid red;
background: red;
  position: relative;
  
}

.carousel-wrapper .carousel-item {
  border: 3px solid blue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.carousel-wrapper .carousel-item .arrow {
  position: absolute;
  top: 0;
  display: block;
  width: 100px;
  height: 80vh;
  -webkit-tap-highlight-color: transparent;
  background: url("../arrow.png") 50% 50%/20px no-repeat;
}

.carousel-wrapper .carousel-item .arrow.arrow-prev {
  left: 0;
}

.carousel-wrapper .carousel-item .arrow.arrow-next {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.carousel-wrapper .carousel-item.light {
  color: white;
}

.carousel-wrapper .carousel-item.light .arrow {
  background: url("../arrow.png") 50% 50%/20px no-repeat;
}

.carousel-wrapper [id^="target-item"] {
  display: none;
}

.carousel-wrapper .item-1 {
  border: 5px solid yellow;
  z-index: 2;
  opacity: 1;
  background-color: #FFF;
}

.carousel-wrapper .item-2 {
  background-color: #FFF;
}

.carousel-wrapper .item-3 {
  background: url("../blurry.jpg") no-repeat;
  background-size: cover;
}

.carousel-wrapper *:target ~ .item-1 {
  opacity: 0;
}

.carousel-wrapper #target-item-1:target ~ .item-1 {
  border: 5px solid purple;
  opacity: 1;
}

.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3 {
  z-index: 3;
  opacity: 1;
}
<div class="carousel-wrapper">
  <span id="target-item-1"></span>
  <span id="target-item-2"></span>
  <span id="target-item-3"></span>
  <div class="carousel-item item-1">
    <p><br />x<br />x<br />x<br /></p>
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  <div class="carousel-item item-2 light">
    <p><br />x<br />x<br />x<br /></p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3">
    <p><br />x<br />x<br />x<br /></p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>

Original source:

One issue is that the height of the carousel cannot be defined (I plan to use it with 100vw pictures in place of placeholder text).

Thanks a lot, Matthias

htmlcss

Answer №1

Each slide within the carousel has been positioned absolutely, resulting in a zero-height carousel.

Instead of using the display property to switch between slides, they are controlled by their z-index. To set the height of the entire carousel based on the first slide, apply position: relative; to the first slide.

For reference, inspect the code for two consecutive carousels below:

/* The following code applies to both carousels */ 
.carousel-wrapper {
  position: relative;
}
.carousel-wrapper .carousel-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.carousel-wrapper .carousel-item .arrow {
  position: absolute;
  top: 0;
  display: block;
  width: 100px;
  height: 100%; // Addressing height bug
  -webkit-tap-highlight-color: transparent;
  background: url("http://www.cssscript.com/demo/pure-html-css-responsive-carousel-cari/arrow.png") 50% 50%/20px no-repeat;
}

/* Additional lines for responsive design */
@media (max-width: 480px) {
  .carousel-wrapper .carousel-item .arrow,
  .carousel-wrapper .carousel-item.light .arrow {
    background-size: 10px;
    background-position: 10px 50%;
  }
} 

.carousel-wrapper .item-1,
.carousel-wrapper .item-4 {
  position: relative; 
}
<h3>First carousel</h3>

<div class="carousel-wrapper">
  <span id="target-item-1"></span> 
  <div class="carousel-item item-1">
    <img src="http://placehold.it/1920x650&text=Slide%20One" alt="Slide One">
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div> 
  <div class="carousel-item item-2 light">
    <img src="http://placehold.it/1920x650&text=Slide%20Two" alt="Slide Two">
  </div>
  <div class="carousel-item item-3">
    <img src="http://placehold.it/1920x650&text=Slide%20Three" alt="Slide Three">
  </div> 
</div>

<h3>Second carousel</h3>

<div class="carousel-wrapper">
  <span id="target-item-4"></span> 
  <div class="carousel-item item-4">
    <img src="http://placehold.it/1920x650&text=Slide%20Four" alt="Slide Four">
    <a class="arrow arrow-prev" href="#target-item-6"></a>
    <a class="arrow arrow-next" href="#target-item-5"></a>
  </div> 
  <div class="carousel-item item-5 light">
    <img src="http://placehold.it/1920x650&text=Slide%20Five" alt="Slide Five">
  </div>
  <div class="carousel-item item-6">
    <img src="http://placehold.it/1920x650&text=Slide%20Six" alt="Slide Six">
  </div> 
</div>

http://codepen.io/glebkema/pen/pyGQvW

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for detecting if text appears in bold on a webpage using Selenium

I came across a pdf document with the following content: <div class=**"cs6C976429"** style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;"> <nobr ...

c#cssselenium-webdriver

Showing database information from MySQL in a concealed div using PHP

My HTML code for the div is as follows: <div id="ticketupdates" style="display:none;"> </div> It then contains PHP code like this: <?php $sql2=" SELECT ticket_seq, CONCAT(CONCAT(notes),'<br><br><a hr ...

phphtmlcss

issues with verifying form data in a popup window using jquery

Hello, I'm struggling to understand why this form isn't validating upon submission. I've chosen not to use jQuery's built-in validate function in this case. Essentially, the code is designed to show an error image and prevent form submi ...

jquerycss

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

javascriptjqueryhtml

When a row is selected in Angular UI-Grid, copy the data from that row onto the clipboard

In need of a function to copy an entire row's data to the clipboard with a simple click. I have a Plunker link where I can only copy cell text: http://plnkr.co/edit/EVrB5Ib9ZuqhbAMsV9Eg?p=preview Below is the pseudocode for the Grid Options: $scope ...

cssangularjsangular-ui-gridui-grid

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

Display a preloader image while waiting for the content to load using jQuery or AJAX

Hey there, I could really use some help with a little issue. I've been trying to use the click() and load() functions to bring my content into a specific CSS class. $("#feed").click(function(){ $(".homefeed").load("feedcontainer.php"); ...

javascriptjqueryhtmlcssajax

Display a new div with its content every 5th item

I am currently working with a Smarty template that contains the following code output: Check out my other question on Stackoverflow My problem lies in the fact that the provided code does not repeat the inserted HTML after every 5 elements... Could some ...

javascriptjqueryhtmlsmarty3

Checkbox validation malfunctioning

I'm currently working on a attendance management project and one of the forms includes multiple checkboxes. I want to ensure that at least one checkbox is checked before the form can be submitted. I attempted to use Javascript for this, however, the i ...

javascriptphpcsshtml

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

Design a unique div in the style of Google

How to Position User Data in Front of Profile Image I am currently struggling with positioning the user data in front of the profile image (the round one with the letter). I have shared my code below: <div class="conta"> <p>Logg ...

htmlcss

What is the best way to add randomness to the background colors of mapped elements?

I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...

javascriptcssreactjs

Issues with CSS file loading in Django

My program has a CSS file that I defined, but for some reason it's not working. When I checked with firebug, the status is 200 OK, but no changes are occurring. I'm unsure if there is a syntax issue with my CSS file. Can you please provide your i ...

cssdjango

Tips for implementing the same autocomplete feature across multiple form fields

Struggling to add multiple products and provide auto-suggest for each product name? You're not alone. It seems like the auto suggest feature is only working for the first product. Can anyone point out what's going wrong here? Here's my HTML ...

javascriptjqueryhtml

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

javascriptjqueryhtmlcss

What is the process for creating a sublist within an md-list-item using Angular Material?

I used Angular Material to create a md-list on the side-nav. I am looking to add a sub list under the md-list-item. Below is my code snippet: <md-sidenav id="sideNav" md-component-id="left" class="md-sidenav-left md-whiteframe-z1 md-locked-open " layo ...

cssangularjsangular-material

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

css

Customized link routing / Deep linking

I need some help. I am managing a standard website and I want to redirect custom URLs to specific pages when visitors access the site. For instance: - index.html should point to custom_index.cfm?custom_id=1&page_id=1&inc=index - about.html shou ...

javascriptjqueryhtmldeep-linking

AngularJS selector, offering similar functionality to jQuery

There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...

jqueryhtmlangularjsjquery-selectors

Initiating a node request within an HTML document

I have recently started learning about node and have been practicing making http requests using the request module. In my current script, I am attempting to have a callback function execute a request that fetches HTML from a webpage and then filters it to ...

javascripthtmlnode.js