how to add this on slider?-CodePudding

Description of my problem: I have a slider without js and I need to add a fixed Text and a button on top of it

html:

<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shop</title>
  <meta charset="UTF-8">
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<body>
  <header >
  <a href="" >Fresh market</a>
  <input  type="checkbox" id="menu-btn" />
  <link rel="stylesheet" href="style.css">
  <label  for="menu-btn"><span ></span></label>
  <ul >
    <li><a href="#work">Home</a></li>
    <li><a href="#about">Shop</a></li>
    <li><a href="#careers">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <div >
<input  placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
  </ul>
</header>

<div >
  <input type="radio" name="switch" id="btn1" checked>
  <input type="radio" name="switch" id="btn2">
  <input type="radio" name="switch" id="btn3">
  
  <div >
    <label for="btn1"></label>
    <label for="btn2"></label>
    <label for="btn3"></label>
  </div>
  
  <div >
    <div >
      <img src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp"/>
      <img src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp"/>
      <img src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp"/>
    </div>
  </div>
</div>
</body>
</html>

css:

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #ffffff;
  }
 
  a {
    color: #000;
  }
  
  /* header */
  
  .header {
    background-color: #ffff;
    /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
    position: fixed;
    width: 100%;
    z-index: 99;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  
  .header li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
  }
   
  .header li a:hover,
  .header .menu-btn:hover {
    color:green;
  }

  
  .header .logo {
    display: block;
    float: left;
    
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
    color:green;
    
  }

  .logo::before {
   
    content:url('imgonline-com-ua-Resize-HhpRdaDieHxuk8.png');
            display: inline-block;
            padding-right: 3px;
            vertical-align: middle;
          }
  
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  
.icons{
/*   display:block; */
  display:flex;
  gap:20px;
  float:right;
  padding:16px;
  margin-right:50px;
  
/*   clear:both; */
  
}
ion-icon{
  font-size:25px;
}

.search{
  border:none;
}
.search::placeholder{
  font-size
}


  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: center;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
  }
  
.slider {
  position: relative;
  width: 680px;
  margin: 50px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
  transform: translateY(40%);
}

.slider input[name="switch"] {
  display: none;
}

.switch {
  position: absolute;
  left: 0;
  bottom: -40px;
  text-align: center;
  width: 100%;
}

.switch label {
  display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  margin: 0 0px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  border-radius: 50%;
  border: 5px solid #2f363c;
  background-color: #738290;
}

#btn1:checked~.switch label[for="btn1"] {
  background-color: white;
}

#btn2:checked~.switch label[for="btn2"] {
  background-color: white;
}

#btn3:checked~.switch label[for="btn3"] {
  background-color: white;
}

.slider-inner {
  overflow: hidden;
}

.slides {
  width: 500%;
  transition: all 0.5s;
}

.slides img {
  width: 680px;
  height: 340px;
  float: left;
}

#btn1:checked~slider-inner slides {
  transform: translate(0);
}

#btn2:checked~.slider-inner .slides {
  transform: translate(-680px);
}

#btn3:checked~.slider-inner .slides {
  transform: translate(-1360px);
}

also, this slider is written only in html and css, so there may be many bugs here, and the code itself is probably written quite poorly and I have never made sliders so I don't know how to do it can you help?

this is what the slider should look like

CodePudding user response：

This one is done with following steps:

Remove the <img> tags in div.slides
Create <div> with class .slide-wrapper
Add <h1>, <p> and <button> in div.slide-wrapper
Now add required image to the background of div.slide-wrapper using css background-image: url(image-link);
Don't forget to give the background-size: cover; to the div.slide-wrapper to fit the image in <div>

It is just an easy task...

Note: I am not going to style this one it is all up to you. Give the content some margin and padding freely to gain required design. You can also set image using before and after pseudo selectors.

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #ffffff;
}

a {
    color: #000;
}

/* header */

.header {
    background-color: #ffff;
    /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
    position: fixed;
    width: 100%;
    z-index: 99;
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
}

.header li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
    color: green;
}


.header .logo {
    display: block;
    float: left;

    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
    color: green;

}

.logo::before {

    content: url('imgonline-com-ua-Resize-HhpRdaDieHxuk8.png');
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

/* menu */

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}


.icons {
    /*   display:block; */
    display: flex;
    gap: 20px;
    float: right;
    padding: 16px;
    margin-right: 50px;

    /*   clear:both; */

}

ion-icon {
    font-size: 25px;
}

.search {
    border: none;
}

.search::placeholder {
    /* font-size */
}


/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked~.menu {
    max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
    .header li {
        float: left;
    }

    .header li a {
        padding: 20px 30px;
    }

    .header .menu {
        clear: none;
        float: center;
        max-height: none;
    }

    .header .menu-icon {
        display: none;
    }
}

.slider {
    position: relative;
    width: 680px;
    margin: 50px auto;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    transform: translateY(40%);
}

.slider input[name="switch"] {
    display: none;
}

.switch {
    position: absolute;
    left: 0;
    bottom: -40px;
    text-align: center;
    width: 100%;
}

.switch label {
    display: inline-block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    margin: 0 0px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
    border-radius: 50%;
    border: 5px solid #2f363c;
    background-color: #738290;
}

#btn1:checked~.switch label[for="btn1"] {
    background-color: white;
}

#btn2:checked~.switch label[for="btn2"] {
    background-color: white;
}

#btn3:checked~.switch label[for="btn3"] {
    background-color: white;
}

.slider-inner {
    overflow: hidden;
}

.slides {
    width: 500%;
    transition: all 0.5s;
    position: relative;
}

.slides .slide-wrapper {
    width: 680px;
    height: 340px;
    float: left;
}

#btn1:checked~slider-inner slides {
    transform: translate(0);
}

#btn2:checked~.slider-inner .slides {
    transform: translate(-680px);
}

#btn3:checked~.slider-inner .slides {
    transform: translate(-1360px);
}

/* Code For Your Question */

.slides .slide-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
}

.slides .slide-wrapper:nth-child(1){
    background-image: url('https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp');
}
.slides .slide-wrapper:nth-child(2){
    background-image: url('https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp');
}
.slides .slide-wrapper:nth-child(3){
    background-image: url('https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp');
}

<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop</title>
    <meta charset="UTF-8">
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>

<body>
    <header >
        <a href="" >Fresh market</a>
        <input  type="checkbox" id="menu-btn" />
        <link rel="stylesheet" href="styles.css">
        <label  for="menu-btn"><span ></span></label>
        <ul >
            <li><a href="#work">Home</a></li>
            <li><a href="#about">Shop</a></li>
            <li><a href="#careers">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <div >
                <input  placeholder="Search.." type="text">
                <ion-icon name="search-outline"></ion-icon>
                <ion-icon name="person-circle-outline"></ion-icon>
                <ion-icon name="bag-handle-outline"></ion-icon>
            </div>
        </ul>
    </header>

    <div >
        <input type="radio" name="switch" id="btn1" checked>
        <input type="radio" name="switch" id="btn2">
        <input type="radio" name="switch" id="btn3">

        <div >
            <label for="btn1"></label>
            <label for="btn2"></label>
            <label for="btn3"></label>
        </div>

        <div >
            <div >
                <div >
                    <h1>Fresh Market</h1>
                    <p>We'll Deliver Everything You Need</p>
                    <button>Shop Online</button>
                </div>
                <!-- <img
                        src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp" /> -->
                <div >
                    <h1>Fresh Market 2</h1>
                    <p>We'll Deliver Everything You Need</p>
                    <button>Shop Online</button>
                </div>
                <!-- <img
                        src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp" /> -->
                <div >
                    <h1>Fresh Market 3</h1>
                    <p>We'll Deliver Everything You Need</p>
                    <button>Shop Online</button>
                    <!-- <img
                        src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp" /> -->
                </div>
            </div>
        </div>
    </div>
</body>

</html>