フォームのスライドショーでドットを少し大きくする方法は？

私はフォームのスライドショーの作成に取り組んでおり、うまくいきます。これらの点をクリックするとわかるように、別のフォームが開きます。私はドットをクリックした後、上から下へのトランジションを変更しました。ここではcodepen linkです。フォームのスライドショーでドットを少し大きくする方法は？

私の上記のコードリンクでは、何とか私のドットが非常に小さくなりました。私のオリジナルcodepen linkをチェックしてください。この私のドットでは、大きくて適切に間隔を置いています。私は私の点をそういうものにしたい。私の偽コードリンクで何が間違っているのですか？どのようにドットを大きくすることができますか？以下は

が私のコードです：あなたは <li>の箇条書きを使用している

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>SlidesJS Standard Code Example</title> 
    <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows."> 
    <meta name="author" content="Nathan Searles"> 
    <meta name="viewport" content="width=device-width"> 

</head> 
<body> 
<div class="topnav"> 
    <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"> 
    <nav> 
     <ul> 
     <li class="dropdown"> 
      <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a> 
      <ul class="dropdown-content"> 
       <li><a href="#"><i>INDIVIDUAL</i></a> 
       </li> 
       <li><a href="#"><i>CORPORATE</i></a> 
       </li> 
      </ul> 
     </li> 
     <li class="our-story">OUR STORY</li> 
     <li class="login-signup">Log In | Sign up</li> 
     <li class="get-covered">GET <strong style="font-style:italic">COVERED</strong> 
     </li> 
     </ul> 
    </nav> 
</div> 
    <div class="container"> 
    <h3>INSURANCE FORM</h3> 
    <h4><i>BASIC DETAILS</i></h4> 
    <br>  
    <div id="slides" class="container-fluid" > 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 1"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 2"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 2"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 2"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 2"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
     <form action="/action_page.php" class="form-horizontal"> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>FIRST NAME</label> 
        <input type="text" class="form-control" name="fname" value="Mickey 2"> 
       </div> 
       <div class="col-sm-6"> 
        <label>LAST NAME</label> 
        <input type="text" class="form-control" name="lname" value="Mouse"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>EMAIL</label> 
        <input type="text" class="form-control" name="email" value="[email protected]"> 
       </div> 
       <div class="col-sm-6"> 
        <label>PHONE NUMBER</label> 
        <input type="text" class="form-control" name="number" value="123-456-789"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-6"> 
        <label>COUNTRY</label> 
        <select name="country" class="form-control"> 
        <option value="canada">Canada</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>PROVINCE</label> 
        <select name="province" class="form-control"> 
        <option value="ontario">ONTARIO</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <label>CITY</label> 
        <select name="city" class="form-control"> 
        <option value="ottawa">OTTAWA</option> 
        </select> 
       </div> 
      </div> 
     </form> 
    </div> 
    </div> 
</body> 
</html>

出典

2017-06-16 Anonymous

最初のコードページの 'a'タグで背景画像を使用していますが、2番目のコードページのデフォルトリストの箇条書き（ただし色は変わります）です。 –

、あなたはそれがfont-sizeを変更編集することができ、試してみてください。

.slick-dots li {font-size:22px;}

あなたにも必要なので、各弾丸の間のスペースを編集して空に見えるようにするには、

出典

2017-06-16 20:56:43 Lindow

ありがとうございます。また、これらの箇条書きの間のスペースを制御する方法はありますか？そして、私が元のコードのペンのリンクを持っているのと同じように、どのようにして全体で箇条書きを作ることができますか？ –

@shortcutはい、それは私の編集を確認してください – Lindow

素晴らしい..私は実際のcodepenで持っているのと同じように、私はそれが（おそらく間違った単語を使用して）全体で弾丸を作ることができることを知っていますか？ –

.slick-dots li { 
    font-size:22px; 
    margin: -5px 0px; 
    list-style-type:circle; 
} 

.slick-dots li.slick-active { 
    color: black; 
    list-style-type: initial; 
}

これはあなたが弾丸のサイズを変更するのに役立ちます：

<style> 
li{list-style-type:none;} 
li:before{content:'\00b7'; font-size:30px; line-height:24px; vertical-align:middle;} 
</style>

私の答えはあなたを助けている場合、1 +私の答えを投票してください！

出典

2017-06-16 22:54:38 HardSystem

私はこれを試しましたが、どういうわけかそれは奇妙に動作します。まず、四角い箇条書きを示します。二番目にそれらの箇条書きをクリックすると、正しく機能しません。あなたはcodepenのリンクでこれを試すことができます。フォントサイズを100ピクセルとして使用していました。 –

それは私が好きですか、それは動作します、アップロードした画像を確認してください。あなたはそれが動作しない理由を何もしない、私はあなたのコードを入れて、あなたが見ることができるようにスタイルタグを追加し、それは完全に動作します。もし私があなたを助けたら投票してください。 – HardSystem

フォームのスライドショーでドットを少し大きくする方法は？

答えて

関連する問題