php 161011slickのと箭头点
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 161011slickのと箭头点相关的知识,希望对你有一定的参考价值。
/* -----------------------------------------------------------
.box_slide
----------------------------------------------------------- */
.slick-arrow {
position: absolute;
width: 27px;
height: 51px;
z-index: 10;
&::before {
display: none;
}
&.slick-prev {
left: 45px;
top: 50%;
background: url(../images/common/slide_prev.png) 0 0 no-repeat;
border: none;
cursor: pointer;
text-indent:200%;
white-space:nowrap;
overflow:hidden;
@include mq(tab_sp) {
top: 38%;
left: 10px;
}
&::before {
display: none;
}
&:hover {
left: 35px;
@include mq(tab_sp) {
left: 5px;
}
}
}
&.slick-next {
right: 45px;
top: 50%;
cursor: pointer;
background: url(../images/common/slide_next.png) 0 0 no-repeat;
border: none;
text-indent: -9999px !important;
white-space:nowrap;
overflow:hidden;
@include mq(tab_sp) {
top: 38%;
right: 10px;
}
&:hover {
right: 35px;
@include mq(tab_sp) {
right: 5px;
}
}
}
}
.slick-dots {
position: absolute;
width: 100%;
bottom: 20px;
z-index: 5;
line-height: 0;
text-align: center;
@include mq(sp) {
bottom: 10px;
}
li {
margin-left: -1px;
display: inline-block;
vertical-align: top;
height: 5px;
cursor: pointer;
margin-left: 10px;
background: #fff;
width: 15px;
height: 15px;
@include border-radius(50%);
@include mq(sp) {
width: 8px;
height: 8px;
}
&:first-child {
margin-left: 0;
}
button {
width: 15px;
height: 15px;
border-radius: 5.5px;
text-indent: -9999px !important;
background: none;
border: none;
cursor: pointer;
@include mq(sp) {
width: 8px;
height: 8px;
}
}
&.slick-active {
background: #838383;
}
}
}
<link href="css/slick.css" rel="stylesheet" type="text/css" media="all">
<script src="js/slick.min.js"></script>
//slick
$('.slide').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
dots: true,
});
<div class="box_slide">
<ul class="slide">← ここのcssがjsで読み込まれてる
<li class="slider1"><img src="images/img_slide01.jpg" alt="slide01"></li>
<li class="slider2"><img src="images/img_slide02.jpg" alt="slide02"></li>
<li class="slider3"><img src="images/img_slide03.jpg" alt="slide03"></li>
<li class="slider4"><img src="images/img_slide04.jpg" alt="slide04"></li>
<li class="slider5"><img src="images/img_slide05.jpg" alt="slide05"></li>
</ul><!-- .slide -->
</div>
以上是关于php 161011slickのと箭头点的主要内容,如果未能解决你的问题,请参考以下文章
::before 伪类影响 react-slick 中的箭头
自定义光滑箭头
如何使用数据属性更改 Slick Slider 默认箭头?
带有样式组件的 React-slick 自定义箭头
如何设计 React Slick carrousel 的箭头样式?
更改“光滑”滑块中的箭头按钮