0
私はjqueryスライダを作成しましたが、今はレスポンスに問題があります。ナビゲーションドットおよびナビゲーションボタンを固定高さに配置することができます。しかし、私は、カルーセルの中央の右に次のボタンを配置し、％でそれをやりたいと思っていました。ですから、私は身長、100％を親体の#container、#carouselに与えます。それは機能しましたが、私が提供したデモで見ることができるようにページが拡大されました。どのように＃番目の、＃prevをパーセンテージで配置するかの提案？ http://codepen.io/anon/pen/ZpXmQjjqueryスライダを反応させる
html,
body {
position: relative;
background-color: #ccc;
}
Css html,
body {
height: 100%;
position: relative;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {} #prev,
#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border: none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom: 49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border: 2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
ポジショニングの問題が正しいことを明確にするには？ –
はい、それは正しいでしょう。 – Ndx
次のボタンをカルーセルの中央の中央に配置したいので％でそれをやりたかった。ですから、私は身長、100％を親体の#container、#carouselに与えます。それは機能しましたが、私が提供したデモで見ることができるようにページが拡大されました。どのように＃を次の位置に置くか、スケール上の問題なしにパーセントで＃prevを提案してください。 – Ndx