那些遇到过的问题

更改"光滑"滑块中的箭头按钮

Jen*_*fer 55 html javascript css jquery slider

我想更改光滑滑块中的箭头,但它不会改变.我想将下一个和上一个按钮作为图像.我试过把它放在一个<style>但它仍然无法正常工作.我在哪里可以更改箭头设置？

光滑的主题css @charset"UTF-8";

// Default Variables

$slick-font-path: "./fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "./" !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "?" !default;
$slick-next-character: "?" !default;
$slick-dot-character: "•" !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;

@function slick-image-url($url) {
    @if function-exists(image-url) {
        @return image-url($url);
    }
    @else {
        @return url($slick-loader-path + $url);
    }
}

@function slick-font-url($url) {
    @if function-exists(font-url) {
        @return font-url($url);
    }
    @else {
        @return url($slick-font-path + $url);
    }
}

/* Slider */

.slick-list {
    .slick-loading & {
        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
    }
    position: absolute;
    margin: 0 auto;
}

/* Icons */
@if $slick-font-family == "slick" {
    @font-face {
        font-family: "slick";
        src: slick-font-url("slick.eot");
        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
        font-weight: normal;
        font-style: normal;
    }
}

/* Arrows */

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 30px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    margin-top: -10px;
    padding: 0;
    border: none;
    outline: none;
    &:hover, &:focus {
        outline: none;
        background: transparent;
        color: transparent;
        &:before {
            opacity: $slick-opacity-on-hover;
        }
    }
    &.slick-disabled:before {
        opacity: $slick-opacity-not-active;
    }
}

.slick-prev:before, .slick-next:before {
    font-family: $slick-font-family;
    font-size: 20px;
    line-height: 1;
    color: $slick-arrow-color;
    opacity: $slick-opacity-default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
    [dir="rtl"] & {
        left: auto;
        right: -25px;
    }
    &:before {
        content: $slick-prev-character;
        [dir="rtl"] & {
            content: $slick-next-character;
        }
    }
}

.slick-next {
    right: -25px;
    [dir="rtl"] & {
        left: -25px;
        right: auto;
    }
    &:before {
        content: $slick-next-character;
        [dir="rtl"] & {
            content: $slick-prev-character;
        }
    }
}

/* Dots */

.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -45px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    width: 100%;
    li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
        button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: none;
            line-height: 0px;
            font-size: 0px;
            color: transparent;
            padding: 5px;
            cursor: pointer;
            &:hover, &:focus {
                outline: none;
                &:before {
                    opacity: $slick-opacity-on-hover;
                }
            }
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: $slick-dot-character;
                width: 20px;
                height: 20px;
                font-family: $slick-font-family;
                font-size: $slick-dot-size;
                line-height: 20px;
                text-align: center;
                color: $slick-dot-color;
                opacity: $slick-opacity-not-active;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
        &.slick-active button:before {
            color: $slick-dot-color-active;
            opacity: $slick-opacity-default;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

光滑的CSS

/* Slider */

.slick-slider {
    position: relative;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
Run Code Online (Sandbox Code Playgroud)

网站预览

Yoa*_*oan 71

Slick有一种非常简单的方法可以通过两个变量在自己的配置中自定义按钮:prevArrow和nextArrow.

两种类型都是:string(html | jQuery selector)| object(DOM节点| jQuery对象),所以在你的设置光滑滑块中你可以设置类:

prevArrow: $('.prev')
nextArrow: $('.next')
Run Code Online (Sandbox Code Playgroud)

并将这些元素添加到您想要的样式中.

例如:

//HTML
<div class="slider-box _clearfix">
    <div class="slick-slider">
        <div>
            <img src="img/home_carousel/home_carorusel_1.jpg">
        </div>
        <div>
            <img src="img/home_carousel/home_carorusel_2.jpg">
        </div>
        <div>
            <img src="img/home_carousel/home_carorusel_3.jpg">
        </div>
        <div>
            <img src="img/home_carousel/home_carorusel_4.jpg">
        </div>
    </div>
</div>

<div class="paginator-center text-color text-center">
    <h6>VER MAS LANZAMIENTOS</h6>
    <ul>
        <li class="prev"></li>
        <li class="next"></li>
    </ul>
</div>

//JS
$(document).ready(function () {
  $('.slick-slider').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 3,
      prevArrow: $('.prev'),
      nextArrow: $('.next'),
});

//CSS
.paginator{
  position: relative;
  float: right;
  margin-bottom: 20px;

  li{
    margin-top: 20px;
    position: relative;
    float: left;

    margin-right: 20px;

    &.prev{
      display: block;
      height: 20px;
      width: 20px;
      background: url('../img/back.png') no-repeat;
    }

    &.next{
      display: block;
      height: 20px;
      width: 20px;
      background: url('../img/next.png') no-repeat;
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 有用！但请确保已设置“ arrows：true”。与“箭头：假”的工作 (3认同)
  • 遗憾的是，如果一页上有两个或多个 Slick 滑块，则此方法将不起作用。如果是这种情况，每个自定义上一页/下一页按钮都会滑动该页面上的所有滑块。如何为这个特定的滑块只定义“那个”一个 DOM 元素作为上一个/下一个按钮？ (2认同)

Asa*_*vid 39

您可以轻松地创建自己的带箭头的样式.slick-next:before和.slick-prev:after伪类.

这是一个例子:

.slick-prev:before {
  content: "<";
  color: red;
  font-size: 30px;
}

.slick-next:before {
  content: ">";
  color: red;
  font-size: 30px;
}
Run Code Online (Sandbox Code Playgroud)

  • 很好,但不是很正确.应该是:.slick-next:在{content:">"之前; 红色; font-size:30px; } .slick-prev:before {content:"<"; 红色; font-size:30px; }(使用版本1.6.0) (2认同)

小智 26

这对我有用:

http://codepen.io/anon/pen/qNbWwK

隐藏CSS中的默认按钮并使用:

<!-- In HTML: -->
<p class="left">left</p>
<p class="right">right</p>

/* In the JS file */
$('.slider').slick({
  arrows: false
})

$('.left').click(function(){
  $('.slider').slick('slickPrev');
})

$('.right').click(function(){
  $('.slider').slick('slickNext');
})
Run Code Online (Sandbox Code Playgroud)

  • 你的解决方案是完美的，谢谢。它应该被标记为解决方案......无论如何非常感谢 (2认同)

Cha*_*Roy 20

它非常容易.使用波纹管代码,它适用于我.这里我使用了fontawesome图标,但你可以使用任何东西作为图像或任何其他Icon的代码.

    $(document).ready(function(){
        $('.slider').slick({
            autoplay:true,
            arrows: true,
            prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
            nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
        });
    });
Run Code Online (Sandbox Code Playgroud)

小智 12

简单的解决方案：

$('.slick-slider').slick({      
    arrows: true,
    prevArrow:"<img class='a-left control-c prev slick-prev' src='YOUR LEFT ARROW IMAGE URL'>",
    nextArrow:"<img class='a-right control-c next slick-next' src='YOUR RIGHT ARROW IMAGE URL'>"
});
Run Code Online (Sandbox Code Playgroud)

图像 URL 可以是本地或 cdn 类型的内容（网络图标等）。

示例 CSS（根据需要在此处进行调整，这只是可能的示例）：

.control-c {
    width: 30px;
    height: 30px;
}
Run Code Online (Sandbox Code Playgroud)

这对我来说效果很好！

  • 也适用于内联 svg (2认同)

par*_*par 10

如果你正在使用sass,你可以简单地设置下面提到的变量,

$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";
Run Code Online (Sandbox Code Playgroud)

这些将改变光滑的主题css使用的字体系列以及prev和next按钮的unicode.

可以配置的其他sass变量在Slick Github页面中给出

Del*_*ant 9

我发现做到这一点的最好方法就是这个。您可以删除我的 HTML 并将您的 HTML 放在那里。

$('.home-banner-slider').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});
Run Code Online (Sandbox Code Playgroud)

小智 7

您可以使用FontAwesome"content"值并按css应用.这些应用"雪佛龙右/左"图标.

.custom-slick .slick-prev:before {
    content: "?";
    font-family: 'FontAwesome';
    font-size: 22px;
}
.custom-slick .slick-next:before {
    content: "?";
    font-family: 'FontAwesome';
    font-size: 22px;
}
Run Code Online (Sandbox Code Playgroud)

小智 6 

<div class="prev">Prev</div>

<div class="next">Next</div>

$('.your_class').slick({
        infinite: true,
        speed: 300,
        slidesToShow: 5,
        slidesToScroll: 5,
        arrows: true,
        prevArrow: $('.prev'),
        nextArrow: $('.next')
});
Run Code Online (Sandbox Code Playgroud)

小智 6

添加值prevArrow和nextArrow以更改标准箭头。例子：

    $('.members').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        arrows: true,
        prevArrow: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 40C8.9543 40 -2.7141e-06 31.0457 -1.74846e-06 20C-7.8281e-07 8.9543 8.95431 -2.7141e-06 20 -1.74846e-06C31.0457 -7.8281e-07 40 8.9543 40 20C40 31.0457 31.0457 40 20 40ZM16.1206 13.5198C15.7554 13.1055 15.1632 13.1055 14.798 13.5198L9.58704 19.4308C9.22182 19.8451 9.22182 20.5168 9.58704 20.931L14.798 26.8421C15.1632 27.2563 15.7554 27.2563 16.1206 26.8421C16.4858 26.4278 16.4858 25.7561 16.1206 25.3418L12.4912 21.2248L29.6865 21.2248C30.2388 21.2248 30.6865 20.7771 30.6865 20.2248C30.6865 19.6725 30.2388 19.2248 29.6865 19.2248L12.4138 19.2248L16.1206 15.02C16.4858 14.6057 16.4858 13.934 16.1206 13.5198Z" fill="#7C8B9C"/></svg>',
        nextArrow: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 3.49691e-06C31.0457 5.4282e-06 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.9543 40 1.56562e-06 31.0457 3.49691e-06 20C5.4282e-06 8.95431 8.95431 1.56562e-06 20 3.49691e-06ZM23.8794 26.4802C24.2446 26.8945 24.8368 26.8945 25.202 26.4802L30.413 20.5692C30.7782 20.1549 30.7782 19.4833 30.413 19.069L25.202 13.1579C24.8368 12.7437 24.2446 12.7437 23.8794 13.1579C23.5142 13.5722 23.5142 14.2439 23.8794 14.6582L27.5088 18.7752L10.3135 18.7752C9.7612 18.7752 9.31348 19.2229 9.31348 19.7752C9.31348 20.3275 9.76119 20.7752 10.3135 20.7752L27.5862 20.7752L23.8794 24.98C23.5142 25.3943 23.5142 26.066 23.8794 26.4802Z" fill="#7C8B9C"/></svg>',
    });
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

207382 次

最近记录：

6 年，3 月 前
相关归档
解析JSON给出"意外令牌o"错误 434
如何检查用户是否可以返回浏览器历史记录 136
从浏览器下载JSON对象作为文件 124
在指令中自定义模板 98
D3 javascript foreach和each之间的区别 85
如何在单击后清除输入文本 62
fadeOut()和slideUp()同时？ 59
为什么此错误出现在chrome加载资源中:net :: ERR_QUIC_PROTOCOL_ERROR 53
jQuery UI对话验证,不使用<form>标签 32
难道使用"display:table;" 将布局组织成2列？ 16
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
如何使用保存实例状态保存Android Activity状态？ 2538
如何修复android.os.NetworkOnMainThreadException？ 2308
PHP'foreach'如何实际工作？ 1926
如何将package.json中的每个依赖项更新为最新版本？ 1871
静态类变量是否可能？ 1824
SCSS和Sass有什么区别？ 1760
macOS Mojave Update后,Git无法正常工作(xcrun:错误:无效的活动开发者路径(/ Library/Developer/CommandLineTools) 1190
wait()和sleep()之间的区别 1158
什么是Python 3相当于"python -m SimpleHTTPServer" 1124