divボタンのサイズを大きくする

Question

私は画像のスライドショーを作成しており、スライドショーのonclickボタン（クラス「左」と「右」）のサイズを増やすのに役立つ必要があります。ここで

はコードです：

HTML：

<div id="coasters"> 
<div class="content"> 
<img class="img" src="coasters1.jpg" style="width:100%"> 
<img class="img" src="coasters2.jpg" style="width:100%"> 
<img class="img" src="coasters3.jpg" style="width:100%"> 
<div class="left" onclick="plusDivs(-1)">&#10094; </div> 
<div class="right" onclick="plusDivs(1)">&#10095;</div> 
</div> 
</div> 

JS：

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
showDivs(slideIndex += n);} 

function currentDiv(n) { 
showDivs(slideIndex = n);} 

function showDivs(n) { 
var i; 
var x = document.getElementsByClassName("img"); 
var dots = document.getElementsByClassName("demo"); 
if (n > x.length) {slideIndex = 1}  
if (n < 1) {slideIndex = x.length} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; } 

for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" white", "");} 

x[slideIndex-1].style.display = "block"; 
dots[slideIndex-1].className += " white";} 

CSS：

.coasters { 
    position:relative; 
    width: 100%; 
    height: 100%; 
    background: #e8e8e8; 
} 

.img { 
    display:none; 
    position:relative; 
    margin-left:50%; 
    width:100%; 
    height:auto; 
} 

.left { 
    position:relative; 
    left: 50%; 
    cursor:pointer; 
    float:left; 
} 

.right { 
    position: relative; 
    left:50%; 
    cursor:pointer; 
    float:right; 
} 

.content{ 
    width:50%; 
    height:auto; 
} 

幅と高さを追加しようとしましたが、それ以上大きくならないようにしました。

Answer 1

あなたがここに設定されている要素の高さ/幅を理解する必要があります。左ボタンと右ボタンはdiv要素にあります。したがって、高さと幅を指定すると、div全体に影響し、コンテンツには影響しません。

ボタンは実際にはテキストです。したがって、font-sizeを指定する必要があります。ここでthis fiddleを参照してください。左ボタンと右ボタンのサイズの違いに注目して、CSSに気づくこと。 font-sizeが.leftであるため、より大きく見えます。

Answer 2

私はあなたの関数にもう1つのパラメータを追加しました。 JS

function plusDivs(n,me) { 
    showDivs(slideIndex += n); 
    $(me).attr('style','width:100px');//you may define any width here. 
} 

<div class="left" onclick="plusDivs(-1,$(this))">&#10094; </div> 
<div class="right" onclick="plusDivs(1,$(this))">&#10095;</div> 

は、それはあなたに助けを願っています。