使我的jQuery滑塊響應

我創建了我的jQuery滑塊，現在我遇到了問題，試圖使其響應。導航點和導航按鈕可以定位在固定高度。但是我想將下一個按鈕定位在旋轉木馬的中心右側，並希望以％來做到這一點。所以，我給身高：100％的母體，＃容器，＃carousel。它的工作，但頁面縮放，你可以看到我提供的演示。任何建議如何定位＃下一個＃prev百分比？使我的jQuery滑塊響應

這是我的工作：http://codepen.io/anon/pen/ZpXmQj

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="&gt;"> 
 
     <input type="button" name="next" id="prev" value="&lt;"> 
 
     </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>

來源

2016-10-03 Ndx

只是爲了澄清你有定位問題的權利？ –

是的，那是對的。 – Ndx

我想將下一個按鈕定位在旋轉木馬的中心右側，並希望以％顯示。所以，我給身高：100％的母體，＃容器，＃carousel。它的工作，但頁面縮放，你可以看到我提供的演示。任何建議如何定位＃下一步，＃prev百分比沒有任何規模問題？ – Ndx

檢查this出來。我相信發生了什麼事情是你的下一個和上一步調整到屏幕的高度，而不是像你希望的圖像的高度。

所以自定義此，首先設置高度和任何你想要你的圖像的寬度，匹配同樣高度的按鈕，只要他們在同一個父DIV應該匹配

<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> 
<header> 
header is here 
</header> 
<div id="carousel"> 
<div class="sliderbuttons"> 
<input type="button" name="next" id="next" value="&gt;"> 
<input type="button" name="prev" id="prev" value="&lt;"> 
</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> 

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; 
    width: 100%; 
    z-index: 0; 
    height: 100%; 
} 
.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; 

}

來源

2016-10-04 00:53:56

使我的jQuery滑塊響應

回答

相關問題