删除列上的多个圆滑的旋转木马箭头

时间：2018-12-28 15:42:45

标签： javascript html css twitter-bootstrap

是否可以定位特定的Slick Carousel箭头？我正在建立一个以3列作为轮播的方式运行的表格，并希望删除其余的上一个/下一个箭头。

这里是一个示例： enter image description here

运行以下代码段时，请将其扩展到“全页”以取得最佳效果。
提前非常感谢！

这是我当前设置的内容： 

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-3 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>

<body>
<div class="py-5">
    <div class="container">

        <div class="row">
            <div class="col-md-10 text-white text-left py-2 heading">
                <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
                <p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                        Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
                        The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
                        Each area is outlined at the junior, mid and senior level.
                </p>
            </div>
            <div class="col-md-2 text-center py-2 heading">
                
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Test</div>
            <div class="col-md-9">
                <section class="regular slider">
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                        <span>Valued Colleague and Practitioner</span>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                        <span>Trusted Colleague; Proven and Creative Practitioner</span>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                        <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                    </div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bg-fhdark">
                <span class="text-uppercase font-weight-bold text-white">Client</span>
            </div>
            <div class="col-md-9 bg-fhdark">
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bb">
                <span>Client Focus, Strategic Counsel and Consultancy</span>
            </div>
            <div class="col-md-9 bb">
                <section class="regular slider">
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <span>Integrated Strategy and Account Management</span>
            </div>
            <div class="col-md-9">
                <section class="regular slider">
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                </section>
            </div>
            </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.slider',
    });
});
</script>


</body>

</html>

2 个答案:

答案 0 :(得分：1)

我将slider-main类添加到第一个滑块，用于选择需要禁用箭头的滑块，并且使用滑块方法$(slider).slick('slickSetOption', 'option', value, refresh);确实更新了箭头值... 

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-3 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>

<body>
<div class="py-5">
    <div class="container">

        <div class="row">
            <div class="col-md-10 text-white text-left py-2 heading">
                <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
                <p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                        Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
                        The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
                        Each area is outlined at the junior, mid and senior level.
                </p>
            </div>
            <div class="col-md-2 text-center py-2 heading">
                
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Test</div>
            <div class="col-md-9">
                <section class="regular slider slider-main">
                    <div class="col-sm-4">
                        <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                        <span>Valued Colleague and Practitioner</span>
                    </div>
                    <div class="col-sm-4">
                        <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                        <span>Trusted Colleague; Proven and Creative Practitioner</span>
                    </div>
                    <div class="col-sm-4">
                        <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                        <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                    </div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bg-fhdark">
                <span class="text-uppercase font-weight-bold text-white">Client</span>
            </div>
            <div class="col-md-9 bg-fhdark">
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bb">
                <span>Client Focus, Strategic Counsel and Consultancy</span>
            </div>
            <div class="col-md-9 bb">
                <section class="regular slider">
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <span>Integrated Strategy and Account Management</span>
            </div>
            <div class="col-md-9">
                <section class="regular slider">
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                </section>
            </div>
            </div>

    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
            $(".regular").slick({
            dots: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 1,
            asNavFor: '.slider',
        });
        $('.slider:not(.slider-main)').slick('slickSetOption', 'arrows', false, true);
});
</script>


</body>

</html>

答案 1 :(得分：1)

运行滑块时，箭头将以类.slick-next和.slick-prev

表示

从那里开始，您的解决方案应该只是一个简单的CSS解决方案。您可以添加一个类或ID，以区分主滑块和其他滑块。

我认为，一个优雅的解决方案是在不需要箭头的滑块上放置一个名为.no-arrows的类，然后使用CSS选择器隐藏其箭头：

.no-arrows .slick-next,
.no-arrows .slick-prev {
   display: none;
}

这是一个演示：

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-3 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}

.no-arrows .slick-next,
.no-arrows .slick-prev {
   display: none!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>

<body>
<div class="py-5">
    <div class="container">

        <div class="row">
            <div class="col-md-10 text-white text-left py-2 heading">
                <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
                <p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                        Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
                        The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
                        Each area is outlined at the junior, mid and senior level.
                </p>
            </div>
            <div class="col-md-2 text-center py-2 heading">
                
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Test</div>
            <div class="col-md-9">
                <section class="regular slider">
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                        <span>Valued Colleague and Practitioner</span>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                        <span>Trusted Colleague; Proven and Creative Practitioner</span>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                        <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                    </div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bg-fhdark">
                <span class="text-uppercase font-weight-bold text-white">Client</span>
            </div>
            <div class="col-md-9 bg-fhdark">
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 bb">
                <span>Client Focus, Strategic Counsel and Consultancy</span>
            </div>
            <div class="col-md-9 bb">
                <section class="regular slider no-arrows">
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                    <div class="col-md-4">1</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <span>Integrated Strategy and Account Management</span>
            </div>
            <div class="col-md-9">
                <section class="regular slider no-arrows">
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                    <div class="col-md-4">2</div>
                </section>
            </div>
            </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.slider',
    });
});
</script>


</body>

</html>

相关问题
最新问题