如何使我的 html 幻灯片具有响应性？
[英]How can I make my html slideshow responsive?
问题描述
I tried making my slideshow responsive using this line of code
我尝试使用这行代码使我的幻灯片具有响应性
<img src="nature.jpg" alt="Nature" class="responsive">
.responsive {
width: 100%;
height: auto;
}
But it made no difference at all.但这根本没有区别。 I uploaded my site here: https://acaschoolgpa.000webhostapp.com/我在这里上传了我的网站： https : //acaschoolgpa.000webhostapp.com/
This is my html:这是我的 html：
<!DOCTYPE html>
<html>
<header>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="favico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
<link rel="apple-touch-icon" href="favico/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favico/favicon-144.png">
<meta name="msapplication-config" content="favico/browserconfig.xml">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<header>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground"> </p>
<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="boyshome.html">Boys Campus</a></li>
<li><a href="girlshome.html">Girls Campus</a></li>
<li><a href="calculator.html">GPA Calculator</a></li>
</ul>
</nav>
<p class="bluebackground"> </p>
<br>
<div class="slideshow-container" class="responsive">
<div class="mySlides fade" style="--background-image: url('homepagepictures/foodtopeopleschool.jpg')"class="responsive">
<div class="numbertext">1 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/onground.jpg')" class="responsive">
<div class="numbertext">2 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/givingwater.jpg')" class="responsive">
<div class="numbertext">3 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/holdingcamera.jpg')" class="responsive">
<div class="numbertext">4 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/studentsgroup.jpg')" class="responsive">
<div class="numbertext">5 / 5</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="slideshow.js"></script>
<br>
<br>
<br>
<br>
<center>
<h1 class="Welcome">WELCOME TO THE ACA NHS WEBSITE!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
</center>
<h2 class="message">Our Message</h2>
<p id="messagetext" align="justify">"Long before National Honor Society was available in the American Creativity Academy, students sought after an opportunity to create, inspire, and open the doors for creativity. With a heritage of respect to individuality and personal interest, the National Honor Society offered a platform for creation and student ingenuity. Today, the dream of a boy who grew up between the blue walls of ACA turned into reality: he can finally create and enjoy creation for a respected audience!</p>
<p id="messagetext" align="justify">The National Honor Society is a community by students within the campus that works towards creating a better school and local environment. We believe that every act of kindness, no matter how insignificant it may seem, has a drastic impact on a person and starts a ripple of kind-hearted acts among the people. The NHS creates opportunities for its members in volunteering within and off the campus and raising awareness for global issues, which makes them more productive, responsible and engaged citizens. We try to make a difference by inspiring and supporting the people around us whenever we can.</p>
<p id="messagetext" align="justify">The NHS team is more than all of its members; although the impact of one person is limited, working as a team allows us to achieve our goal and leave behind a great mark. We envision a kinder society where people are keen on helping others, and will work until that vision is achieved."</p>
<p id="messagetext" align="justify">- By the NHS Team</p>
<footer class="footer-distributed">
<div class="footer-left">
<h3>NHS<span>ACA</span></h3>
<p class="footer-links">Boys Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
nhsb.aca</a> 
| 
<a href="mailto:nhsb.aca@gmail.com"><i class="fa fa-envelope"></i>
nhsb.aca@gmail.com</a>
</p>
<p class="footer-links">Girls Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
aca.nhs</a> 
| 
<a href="mailto:acanational.hs@gmail.com"><i class="fa fa-envelope"></i>
acanational.hs@gmail.com</a>
</p>
<br>
<p class="footer-company-name">© Mohammad al Nusif</p>
</div>
<div class="footer-center">
<br>
<br>
<br>
<div>
<a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
<p>Boys Campus map</p></a>
</div>
<div>
<a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
<p>Girls Campus map</p></a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br>
<br>
<br>
<span>Boys Campus:</span>
Advisor's Email - sali.alkhuraishi@aca.edu.kw<br>
President's Email - bahaabed2003@gmail.com<br>
Vice President's Email - azoibi17@gmail.com<br>
<br>
<span>Girls Campus:</span>
Advisor's Email - nicole.depew@aca.edu.kw<br>
President's Email - kayanalghanim@gmail.com<br>
Vice President's Email - skkh03@gmail.com <br>
<br>
<div class="footer-icons">
</div>
</div>
</footer>
</body>
</html>
This is my css:这是我的CSS：
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1200px;
min-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0E68C;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FFD750;
}
.Welcome {
font-family: 'Raleway',sans-serif;
font-size: 62px;
font-weight: 800;
line-height: 45px;
margin: 0 0 24px;
text-align: center;
text-transform: uppercase;
}
.message {
font-family: "Great Vibes";
font-size: 62px;
font-weight: 600;
}
.example_e {
border: none;
width: 759px;
background: #6495ED;
color: Yellow !important;
font-weight: 100;
padding: 20px;
text-transform: uppercase;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.example_e:hover {
color: #404040 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}
a{
text-decoration:none
}
.main {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.girls-message{
color: #F0E68C
}
.mySlides {
height: 80vh;
width: 100%;
margin-bottom: 0.5rem;
background-image: var(--background-image);
background-size: cover;
background-position: center;
}
.mySlides > .numbertext {
background-color: rgba(255, 255, 255, 0.8);
padding: 0.5rem;
}
.bluebackground{
background-color: #4169E1;
margin:0;
}
#messagetext{
margin-left: 20px;
margin-right: 20px
}
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
/* The footer is fixed to the bottom of the page */
footer{
bottom: 0;
}
@media (max-height:800px){
footer { position: static; }
}
.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: #e0ac1c;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #e0ac1c;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
@media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
@font-face {
font-family: 'Cookie';
font-style: normal;
font-weight: 400;
src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v12/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
.middlecent{
justify-content: center;
}
.responsive {
width: 100%;
height: auto;
}
This is my javascript:这是我的javascript：
var slideIndex = 1;
var timeGap = 5000;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
setInterval(function() {
showSlides(slideIndex);
slideIndex++
}, timeGap)
My site looks really weird on mobile but looks great on pc.我的网站在移动设备上看起来很奇怪，但在 PC 上看起来很棒。 Mostly because of the slideshow主要是因为幻灯片
1 个解决方案
解决方案1
0 已采纳 2020-10-07 14:40:36
Firstly remove your min-width: 1000px;首先删除你的 min-width: 1000px; in your slideshow-container.在你的幻灯片容器中。 Never ever specify min-width more than 400px, if you need your site to be responsive.如果您需要您的网站具有响应性，请永远不要指定超过 400 像素的最小宽度。 Secondly, always adjust your container not the image width or height.其次，始终调整您的容器而不是图像宽度或高度。 Try not to go over the image height as it looks stretched.尽量不要超过图像高度，因为它看起来被拉伸了。 Try to use background-size: 100% 100%;尝试使用 background-size: 100% 100%; to display the whole image.以显示整个图像。
.slideshow-container {
min-width: unset;
min-height: 400px;
}
.mySlides {
height: 100%;
min-height: 400px;
max-width: 100%;
}
Thirdly, do not specify class attribute two times on a single element.第三，不要在单个元素上两次指定 class 属性。 Use same attribute and add multiple classes in that.使用相同的属性并在其中添加多个类。 class="slideshow-container responsive" class="slideshow-container 响应"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何编辑我的幻灯片以使其具有响应性？ - How can I edit my slideshow to make it responsive?
我正在努力使我的幻灯片响应 - i am struggling to Make my slideshow responsive
如何使幻灯片淡入淡出？ - How can I make my slideshow fade?
如何使幻灯片中的所有图片大小相同？ - How can I make all the pictures in my slideshow the same size?
如何使特定的幻灯片放映窗口调整大小？ - How can I make my specific slideshow resize with the window?
如何使我的 jQuery 幻灯片中的幻灯片平滑淡出？ - How can I make the slides in my jQuery slideshow fade smoothly?
如何让我的页脚随着内容移动（使其具有响应性）？ - How can I make my footer move with the content (make it responsive)?
如何在鼠标悬停时暂停幻灯片放映 - How can I make the slideshow pause on mouseover
如何用一张图片制作幻灯片 - How can I make a slideshow with one image
我如何使此滑块自动幻灯片放映 - How can i make this slider to automatic slideshow
相关标签