Блог

Я просто использую HTML и CSS, это было очень сложно сделать или найти. Если он слишком мал, он покроет текст ниже, а если он слишком велик, то останется пустое пространство.

Можно ли исправить этот слайдер просто с помощью HTML и CSS?

Еще одна вещь, может ли слайдер иметь изображения двух разных размеров?

HTML

 <ul class="slider">
    <li>
            <input type="radio" id="slide1" name="slide" checked>
            <label for="slide1"></label>
            <img src="1.jpg" />
    </li>
    <li>
            <input type="radio" id="slide2" name="slide">
            <label for="slide2"></label>
            <img src="2.jpg" />
    </li>
    <li>
            <input type="radio" id="slide3" name="slide">
            <label for="slide3"></label>
            <img src="3.jpg" />
    </li>
</ul>
<ul class="text">
    <li>
        <h1>Test</h1>
        <a href="#">TEXT</a>
    </li>
    <li>
        <h1>Test</h1>
        <a href="#">TEXT</a>
    </li>
</ul>

 

CSS

 .slider {
    display: block;
    height: 293px;
    width: 600px;
    margin: auto;
    margin-top: 20px;
    position: relative;
    background-size:cover;
    background-position: center center;
    padding-bottom: 50px;
}
.slider li {
    list-style: none;
    position: absolute;
}
img {
    margin: auto;
    height: 100%;
    width: 100%;
    vertical-align: top;
}
.slider input {
    display: none;
}
.slider label {
    background-color: rgb(145, 145, 145);
    bottom: 10px;
    cursor: pointer;
    display: flexbox;
    height: 15px;
    position: absolute;
    width: 15px;
    z-index: 10;
    border-radius: 101px;
}
.slider li:nth-child(1) label {
    left: 10px;
}
.slider li:nth-child(2) label {
    left: 40px;
}
.slider li:nth-child(3) label {
    left: 70px;
}
.slider img {
    opacity: 0;
    visibility: hidden;
}
.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
.text{
    text-align: center;
    list-style-type: none;
    text-decoration: none;
}