时间戳

首页 > 解决方案 > 如何编辑我的幻灯片以使其具有响应性？

javascript - 如何编辑我的幻灯片以使其具有响应性？

问题描述

基本上，我创建了一个幻灯片，一旦用户悬停图像，就会出现一个文本框。但是，我有一个问题，它没有响应。我曾尝试编辑媒体查询，但幻灯片保持在其当前的宽度和高度，使其无法移动。如何创建具有响应性的幻灯片，以便它可以在不同的屏幕尺寸上查看并且不包含水平滚动条？任何帮助表示赞赏。谢谢。这是我的代码。

@media (min-width: 200px) and (max-width: 899px) {
    .slidershow{
    width: 400px;
    height: 400px;
    overflow: hidden;
  }
}
.slidershow {
    width: 700px;
    height: 400px;
    overflow: hidden;
}
.middle {
    position: relative;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.bar {
    width: 50px;
    height: 10px;
    border: 2px solid #3F69CA;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}
.bar:hover {
    background: #3F69CA;
}
input[name="r"] {
    position: absolute;
    visibility: hidden;
}
.slides {
    width: 500%;
    height: 100%;
    display: flex;
}
.slidess {
    width: 20%;
    transition: 0.6s;
}
.slidess>h2 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, .6);
    color: rgb(24, 23, 23);
    font-size: 18px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
    z-index: 2;
}
.slides .slidess:hover>h2 {
    visibility: visible;
    opacity: 1;
}
.slidess img {
    width: 100%;
    height: 100%;
}
#r1:checked~.s1 {
    margin-left: 0;
}
#r2:checked~.s1 {
    margin-left: -20%;
}
#r3:checked~.s1 {
    margin-left: -40%;
}
#r4:checked~.s1 {
    margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
    background: #fff
}
#r2:checked~.navigation [for="r2"] {
    background: #fff
}
#r3:checked~.navigation [for="r3"] {
    background: #fff
}
#r4:checked~.navigation [for="r4"] {
    background: #fff
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width" name="viewport">
    <title>Slideshow</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="slidershow middle">
        <div class="slides">
            <input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
            <div class="navigation">
                <label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
            </div>
            <div class="slidess s1">
            <h2>Description 1.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/c82315a6-ac99-464a-a753-c26bc0fb647d/bvlatuR/std/1200x628/lhd-model-3-social"></div>
            <div class="slidess">
            <h2>Description 2.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/56cb8c41-e898-44ce-b6b7-fe9b9a05f529/bvlatuR/std/1200x628/MS-Social"></div>
            <div class="slidess">
            <h2>Description 3.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/3863f3e5-546a-4b22-bcbc-1f8ee0479744/bvlatuR/std/1200x628/MX-Social"></div>
            <div class="slidess">
            <h2>Description 4.</h2><img src="https://www.tesla.com/xNVh4yUEc3B9/04_Desktop.jpg"></div>
        </div>
    </div>
    <script src="script.js">
    </script>
</body>
</html>

标签： javascripthtmlcssresponsive-designresponsive

解决方案

You are on the right track but however, put all your media queries in a block at the very end so they will override the relevant style further up the sheet.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width" name="viewport">
    <title>Slideshow</title>
    <style>
    
.slidershow {
    width: 700px;
    height: 400px;
    overflow: hidden;
}
.middle {
    position: relative;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.bar {
    width: 50px;
    height: 10px;
    border: 2px solid #3F69CA;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}
.bar:hover {
    background: #3F69CA;
}
input[name="r"] {
    position: absolute;
    visibility: hidden;
}
.slides {
    width: 500%;
    height: 100%;
    display: flex;
}
.slidess {
    width: 20%;
    transition: 0.6s;
}
.slidess>h2 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, .6);
    color: rgb(24, 23, 23);
    font-size: 18px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
    z-index: 2;
}
.slides .slidess:hover>h2 {
    visibility: visible;
    opacity: 1;
}
.slidess img {
    width: 100%;
    height: 100%;
}
#r1:checked~.s1 {
    margin-left: 0;
}
#r2:checked~.s1 {
    margin-left: -20%;
}
#r3:checked~.s1 {
    margin-left: -40%;
}
#r4:checked~.s1 {
    margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
    background: #fff
}
#r2:checked~.navigation [for="r2"] {
    background: #fff
}
#r3:checked~.navigation [for="r3"] {
    background: #fff
}
#r4:checked~.navigation [for="r4"] {
    background: #fff
}

@media (min-width: 200px) and (max-width: 899px) {
    .slidershow{
    width: 400px;
    height: 400px;
    overflow: hidden;
  }
}
    </style>
</head>
<body>
    <div class="slidershow middle">
        <div class="slides">
            <input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
            <div class="navigation">
                <label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
            </div>
            <div class="slidess s1">
            <h2>Description 1.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/c82315a6-ac99-464a-a753-c26bc0fb647d/bvlatuR/std/1200x628/lhd-model-3-social"></div>
            <div class="slidess">
            <h2>Description 2.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/56cb8c41-e898-44ce-b6b7-fe9b9a05f529/bvlatuR/std/1200x628/MS-Social"></div>
            <div class="slidess">
            <h2>Description 3.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/3863f3e5-546a-4b22-bcbc-1f8ee0479744/bvlatuR/std/1200x628/MX-Social"></div>
            <div class="slidess">
            <h2>Description 4.</h2><img src="https://www.tesla.com/xNVh4yUEc3B9/04_Desktop.jpg"></div>
        </div>
    </div>
    <script src="script.js">
    </script>
</body>
</html>

推荐阅读