Önceki/sonraki oklar düğmesi nasıl?

Question

HEDEF

benim sitedeki ihtiyaç tarzınıza uyacak şekilde slick.css değiştirmeye çalışıyorum. here'dan slick.css'u aldım.

Şimdi

• ben oka (sol + sağ) simgeleri için
• daha büyük, ben onun etrafında hiçbir circle-border olanı kullanmak istiyorum olmak istiyorum.
• Ben fa-chevron-right mi fa-chevron-left

---

Ne denediniz mi?

kısmı 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> 

---

Detay Foto İşte

wha değildir Şimdi var. İşte

Ben istiyorum şeydir.

---

Soru

• birisi bana bu sorunu çözmek yardımcı olabilir misiniz?

  Düşüncelerinizi ve zamanınızı gerçekten takdir ediyorum.

  .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: "‹"; }

  bu sınıflar değiştirin ve bundan sonra sadece okları ayarlamak için özellikler marjı ile oynamak ve konumlandırır: :)

Answer 1

Temel şey içerik özelliğiyle onun üreten oklar Eğer bu sorunu çözmediyse bana http://jsfiddle.net/ bağlantısını göndererek size tam bir çözüm yollayacağım.

Yazı simgelerin listesi için harika

.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"; }

Yazı kullanmak istiyorsanız

nasıl Bu konuyu Use font awesome icon as css content

Answer 2

.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>

yazı ziyareti uygulamak http://astronautweb.co/snippet/font-awesome/ ve ziyaret

Answer 3

Eğer sass kullanıyorsanız, slick tarafından sağlanan sass değişkenlerini ayarlayabilirsiniz.

bakın: Add custom buttons on Slick Carousel