Slickカルーセルのアイテム間にスペースを入れる方法
2023-08-08 09:04:42
質問
私は2つのスリックカルーセルアイテムの間にスペースを追加したいのですが、それは私の要素のサイズを減少させるので、パディングでスペースを望んでいない(と私はそれを望んでいない)。
$('.single-item').slick({
initialSlide: 3,
infinite: false
});
.slick-slider {
margin:0 -15px;
}
.slick-slide {
padding:10px;
background-color:red;
text-align:center;
margin-right:15px;
margin-left:15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:gray;">
<div class="slider single-item" style="background:yellow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
なぜか両側からスペースが入るので、それを除去しようとしています。
どのように解決するのですか?
はい、解決しました。
- 作成 幅の広いスライダーボックスを1つ を作成します(これは、両側からアイテムスペースを追加するために使用できます)。
- 作成 インナーアイテムの内容 を、適切な幅と余白で作成します(これは実際のラッパーのサイズでなければなりません)。
- 完了
関連
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] 既存の非順序型リストにリストアイテムを追加する方法
-
[解決済み] jQueryで複数のCSS属性を定義するには?
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] HTML文字列を表示できない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: 未定義のプロパティ 'length' を読み取れませんでした。
-
[解決済み] jquery 3.0 url.indexOfエラー
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] jQueryの複数要素の同一クリックイベント
-
[解決済み] jQueryを使用してDropDownListの値を設定するにはどうすればよいですか?
-
[解決済み] jQuery: テキストで要素を検索する
-
[解決済み] jQueryで<input type="text">のonchangeを実装するには?