Слайдер на CSS

In this example below you will see how to do a Слайдер на CSS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SharovAlex, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SharovAlex ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Слайдер на CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="ru">
    <head>
        <title>Слайдер на CSS, шаг 4</title>
        <meta charset="utf-8">
        <base href="/assets/course76/">
        <link href="//fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">
    </head>
    <body>
        <section>
            <h1>Кексогалерея</h1>
            <div class="slider">
                <input type="radio" id="btn-1" name="toggle" checked>
                <input type="radio" id="btn-2" name="toggle">
                <input type="radio" id="btn-3" name="toggle">
                <div class="slider-controls">
                    <label for="btn-1"></label>
                    <label for="btn-2"></label>
                    <label for="btn-3"></label>
                </div>
                <div class="slider-inner">
                    <div class="slider-slides">
                        <img src="keks-1-small.jpg" alt="Кекс смотрит на еду">
                        <img src="keks-2-small.jpg" alt="Кекс смотрит на тебя">
                        <img src="keks-3-small.jpg" alt="Кекс не хочет никуда смотреть">
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/SharovAlex/andx421andx43bandx430andx439andx434andx435andx440-andx43dandx430-css-GNXNWM */
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    color: #333333;
    background-color: #f5f5f5;
}
 
section {
    width: 450px;
    margin: 40px auto;
    background-color: white;
    box-shadow: 0 0 3px #cccccc;
}

h1 {
    margin: 0;
    padding: 10px 0;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
}

.slider {
    position: relative;
}

.slider input[type=radio] {
    display: none;
}

.slider-inner {
    overflow: hidden;
}

.slider-slides {
    width: 300%;
    transition: transform 0.8s ease;
}

.slider-slides img {
    float: left;
    width: 450px;
    height: 320px;
}

.slider-controls {
    margin-bottom: 10px;
    text-align: center;
}

.slider-controls label {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    background-color: #cccccc;
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
    transition: background-color 0.2s;
    cursor: pointer;
}

#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
    background-color: #666666;
}

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

#btn-2:checked ~ .slider-inner .slider-slides {
    transform: translate(-450px);
}

#btn-3:checked ~ .slider-inner .slider-slides {
    transform: translate(-900px);
}

Comments