“Slider obrazu CSS” Kod odpowiedzi

Slajdek obrazu CSS

<div class="carousel">
    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

<style>
  html, body {
    margin: 0px;
    padding: 0px;
    background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}

.carousel {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    margin-top: 26px;
}

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

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 100%;
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    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.8);
    color: #aaaaaa;
}

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

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

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

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#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: #428bca;
}

#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>
Lovely Leopard

Slider Html CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        /* ///headers profile for the css//// */
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            text-decoration: none;
        }
        /* slider body */
        
        .background {
            height: 100vh;
            width: 100vw;
            position: relative;
            background-color: rgb(100, 100, 100);
        }
        
        .divmain {
            /* height: 500px;
    width: 80%; */
            height: 100%;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #fff;
            transform: translate(-50%, -50%);
            background-image: url(../images/pexels-1.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 2px 4px 6px 6px rgb(0, 0, 0);
            animation: slider 15s infinite linear;
        }
        
        h1 {
            position: absolute;
            color: rgb(0, 0, 0);
            text-align: center;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5rem;
            font-weight: 800;
        }
        
        .glow {
            font-size: 80px;
            color: #fff;
            text-align: center;
            animation: glow 1s ease-out infinite alternate;
        }
        
        .mask {
            background-color: rgba(0, 0, 0, 0.459);
            height: 100%;
            width: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 10px rgb(108, 238, 255), 0 0 20px rgb(108, 238, 255), 0 0 30px #ccc, 0 0 40px #ccc, 0 0 50px #ccc, 0 0 60px #ccc, 0 0 70px #ccc;
            }
            to {
                text-shadow: 0 0 20px rgb(108, 238, 255), 0 0 30px aqua, 0 0 40px aqua, 0 0 50px aqua, 0 0 60px aqua, 0 0 70px aqua, 0 0 80px aqua;
            }
        }
        
        @keyframes slider {
            0% {
                background-image: url(../images/pexels-1.jpg);
            }
            25% {
                background-image: url(../images/pexels-4.jpg);
            }
            50% {
                background-image: url(../images/pexels-2.jpg);
            }
            80% {
                background-image: url(../images/pexels-3.jpg);
            }
        }
    </style>
</head>

<body>
    <section class="background">
        <div class="divmain">
            <div class="mask">
                <h1 class="glow">This is a slider</h1>
            </div>
        </div>
    </section>
</body>

</html>
Better Bee

Slider obrazu CSS

//https://www.w3schools.com/howto/howto_js_slideshow.asp
Shiny Shrimp

Slajdów CSS

#slideset1 {height: 10em; position: relative}
Yellowed Yacare

Odpowiedzi podobne do “Slider obrazu CSS”

Pytania podobne do “Slider obrazu CSS”

Więcej pokrewnych odpowiedzi na “Slider obrazu CSS” w CSS

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel