Incorporate an HTML and CSS carousel with slides

I came across some interesting code that allows me to create a carousel using only HTML and CSS. I successfully added an additional slide (slide 4), but I am struggling to link it with the CSS in order to make the left and right buttons functional. Would appreciate any assistance or guidance in the right direction!

<style>

.carousel {
    border-style:solid;
    border-width:1px;
    border-color:rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    widht:100%;
    height:250px;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:250px;
}

.carousel-open:checked + .carousel-item {
    position: absolute;
    opacity: 100;
    background-color:white;
    width:100%;
    height:250px;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    padding-top:10px;
    text-align:center;
}

.carousel-control {
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    color:#008c6c;
    cursor: pointer;
    display: none;
    font-size: 30px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #008c6c;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    font-size: 25px;
}

.carousel-bullet:hover {
    color: rgba(0, 0, 0, 0.1);
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #008c6c;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>
<div class="carousel"> 
   <div class="carousel-inner"> 
      <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/> 
      <div class="carousel-item"> 
         <h1>Slide 1</h1> 
         <p> Content here for page one.</p> 
      </div> 
      <input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/> 
      <div class="carousel-item"> 
         <h1>Slide 2</h1> 
         <p> Content here for page two.</p> 
      </div> 
      <input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/> 
      <div class="carousel-item"> 
         <h1>Slide 3</h1> 
         <p> Content here for page three.</p> 
      </div> 
      <input name="carousel" class="carousel-open" id="carousel-4" aria-hidden="true" type="radio" hidden="true"/> 
      <div class="carousel-item"> 
         <h1>Slide 4</h1> 
         <p> Content here for page four.</p> 
      </div> 
      <label class="carousel-control prev control-1" for="carousel-3">‹</label>
      <label class="carousel-control next control-1" for="carousel-2">›</label>
      <label class="carousel-control prev control-2" for="carousel-1">‹</label>
      <label class="carousel-control next control-2" for="carousel-3">›</label>
      <label class="carousel-control prev control-3" for="carousel-2">‹</label>
      <label class="carousel-control next control-3" for="carousel-1">›</label> 
      <ol class="carousel-indicators"> 
         <li> 
            <label class="carousel-bullet" for="carousel-1">•</label> </li> 
         <li> 
            <label class="carousel-bullet" for="carousel-2">•</label> </li> 
         <li> 
            <label class="carousel-bullet" for="carousel-3">•</label> </li> 
         <li> 
            <label class="carousel-bullet" for="carousel-4">•</label> </li> 
      </ol> 
   </div> 
</div>

Answer №1

To implement each carousel number, you must copy the CSS rules accordingly. It's important to note that the labels for each carousel contain a prev and a next arrow, which should be properly linked to the corresponding slide.

<style>

.carousel {
    border-style:solid;
    border-width:1px;
    border-color:rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    widht:100%;
    height:250px;
}

/* Rest of the CSS code omitted for brevity */

</style>
<div class="carousel"> 
   <div class="carousel-inner"> 
      <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/> 
      <div class="carousel-item"> 
         <h1>Slide 1</h1> 
         <p> Content here for page one.</p> 
      </div> 
      
       <!-- More carousel items and controls -->
       
      <ol class="carousel-indicators"> 
         <li> 
            <label class="carousel-bullet" for="carousel-1">•</label> </li> 
         
          <!-- More carousel bullets -->

      </ol> 
   </div> 
</div>

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

Guide to Embedding External CSS Stylesheet with GWT Panel Widget

Is there a way to apply CSS styles to a specific Vertical Panel in GWT? Below is an example code that demonstrates how you can achieve this: MainPanelResources.java public interface MainPanelResources extends ClientBundle { public interface MyMainPanel ...

Tips for avoiding the security risk of "A potentially hazardous Request.Form" in requests

After integrating a FreeTextBox control into my webpage, users can input HTML tags. However, upon submitting to the server, I encounter the following error: A potentially dangerous Request.Form value was detected from the client (GestisciPagine1_txtTest ...

Place the image over another section, shifting the content aside

Current: http://jsfiddle.net/nmd1abot/ Desired: https://i.sstatic.net/RP5z7.jpg Basic structure Section Header Body Graphic Section Header Body I'm looking for a way to make the graphic overlap into the grey section while provi ...

What is the best way to make a button fill the entire width on smaller screens?

I am struggling with the following code snippet: <div class="ml-auto text-right"> <button class="btn btn-next mobile" /> </div> Along with this block of css: @media screen and (max-width: 576px) { .mobile { ...

Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Three news articles are displayed below, each with its own image. The issue is that the text in the articles consists of quotes of varying sizes, causing them to not align properly. Adding a fixed height in pixels solves the alignment problem on the Deskto ...

Are there any methods I can employ to maintain the traditional aesthetic while incorporating modern elements into web forms?

My current webforms application was built using visual basic, but now the user wants to migrate it to a new UI with Bootstrap and modern styling. The goal is to apply a side navigation bar and upper navigation bar while preserving the old pages and their o ...

Utilize a counter to iterate the name repeatedly

echo "<td>".'<input type="text" name="date_from" class="datepicker"/>'."</td>"; Is there a way to utilize a counter to repeat the name attribute and then store it using $_POST[]? ...

What are some ways I can ensure my HTML page is adaptable and user-friendly for iPhone 6s users?

My HTML page with CSS looks great on my PC, but I'm experiencing some issues with the view on my iPhone 6S. Despite trying to make the page flexible using CSS, I haven't been able to achieve the desired results. Can anyone provide assistance? I ...

Validation of forms - Must include one particular word from a given set

I am in the process of utilizing Javascript to validate an input field with the specific formatting requirements outlined below: "WORD1,WORD2" The input must contain a comma separating two words, without any spaces. The first word (WORD1) can be any word ...

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

Tips for centering a div vertically inside another div that has a background image

My goal is to center the text within the background image, keeping it centered on all devices. Initially, I used a fixed pixel margin-top value, but I need it to be a percentage so that it remains centered as the screen size changes. However, when I change ...

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Current Situation: I am currently in the process of iterating through a machine learning model and dynamically updating my "divs" as text labels. My goal is to transform these values into individual bars that visually represent the values instead of just d ...

Establish the directory for javascript and css files following the designated URL rewriting regulations in the .htaccess file

Currently in the process of rewriting my URLs by configuring rules in the .htaccess file. The current version of my .htaccess file looks like this: Options +FollowSymlinks RewriteEngine on AddType text/css .css RewriteRule ^lunettes-collection/([ ...

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

Experiencing difficulties with the background image in a specific section

I am facing a simple issue that I can't seem to solve. My goal is to have a gif as the background, showing flowers growing, with a campaign logo and a donation button overlay. However, there seems to be an issue with the background getting cut off at ...

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

Removing the nested UL element while preserving the child elements

Looking to simplify a nested list structure by removing the <ul> tags and moving its child <li> elements to the parent <ul> element. Here is an example : <ul> <li>Item 1</li> <ul> <li>Item 2& ...

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Can a JavaScript prompt box be created that redirects to a site when the user selects "yes" or "ok," but does nothing if "no" is selected? Also, can this prompt appear on page load? Thank you! UPDATE: Answer provided below. It turns out it's simpler ...