本文介绍了如何风格prev /下一个箭头按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在尝试修改 slick.css 以适应我的网站需要的风格。
我从链接我会给你完整的解决方案



如果要使用Font Awesome



  .slick-prev:before, .slick-next:before {font-family:FontAwesome; font-size:40px; line-height:1;红色;不透明度: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; } 



对于字体图标列表,请访问
和如何实现字体访问此线程


I've been trying to modify the slick.css to fit the style I need in my site.I got the slick.css from here.

Now

  • I want to make the arrow (left + right) bigger
  • For icons, I want to use the one with no circle-border around it.
  • I like fa-chevron-right and fa-chevron-left

portion of 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>


Detail Photo

Here is what I have now.

Here is what I want to have.


  • Can someone help me resolve this ?

    I really appreciate your consideration and time. :)

解决方案

The Basic thing is its producing arrows by content property:

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

Replace these classes and after that just play with margin and positions properties to adjust the arrows, if this didnot fix the issue send me the http://jsfiddle.net/ link i will send you the complete solution.

If want to use 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"; }

For list of Font icons visit http://astronautweb.co/snippet/font-awesome/and how to implement the font visit this threadUse font awesome icon as css content

这篇关于如何风格prev /下一个箭头按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 09:03