[〜#〜] goal [〜#〜]
私は自分のサイトで必要なスタイルに合わせてslick.css
を変更しようとしています。 here からslick.css
を取得しました。
今
circle-border
の周りにないものを使用したいです。fa-chevron-right
とfa-chevron-left
が好きです何を試しましたか?
slick.css
の部分
.slick-prev, .slick-next { position: absolute; display: block; height: 200px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev { left: -10px; top: 70px; }
[dir="rtl"] .slick-prev { left: auto; right: -10px; top: 70px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }
.slick-next { right: -10px; top: 70px; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }
HTML
<div class="row slick ">
// just a bunch of lists in here
</div>
詳細写真
これが私が今持っているものです。
これが私が欲しいものです。
質問
誰かがこれを解決するのを手伝ってくれますか?
ご検討と時間を本当に感謝します。 :)
基本的なことは、コンテンツプロパティごとに矢印を生成することです。
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev:before { content: "‹"; }
[dir="rtl"] .slick-prev:before { content: "›"; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "›"; }
[dir="rtl"] .slick-next:before { content: "‹"; }
これらのクラスを置き換え、その後、マージンと位置のプロパティで再生して矢印を調整します。これで問題が解決しない場合は、 http://jsfiddle.net/ リンクを送信して、完全なソリューションを送信します。
Font Awesomeを使用する場合
.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }
フォントアイコンのリストについては、 http://astronautweb.co/snippet/font-awesome/ をご覧ください。また、フォントの実装方法については、このスレッドをご覧ください cssコンテンツとしてfont awesomeアイコンを使用
.slick-prev::before {
font-family: FontAwesome;
content: "\f0d9";
font-size: 22px;
}
.slick-next::before {
font-family: FontAwesome;
content: "\f0da";
font-size: 22px;
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<button type="button" class="slick-prev "></button>
<button type="button" class="slick-next "></button>
Sassを使用している場合、slickが提供するsass変数を設定できます。
<script type="text/javascript">
$(document).ready(function(){
$('.responsive_com2').slick({
arrows: false,
dots:true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
slidesPerRow: 1,
rows: 1,
});
$('.left_news').click(function(){
$('.responsive_com2').slick('slickPrev');
})
$('.right_news').click(function(){
$('.responsive_com2').slick('slickNext');
})
});
</script>