刪除列上的多個光滑輪播箭頭
[英]Delete Multiple Slick Carousel Arrows on Columns
問題描述
是否可以定位特定的Slick Carousel箭頭？ 我正在建立一個表，其中有3列以輪播的形式運行，並且要刪除其余的上一個/下一個箭頭。
這是一個例子：
當您運行以下代碼段時，請將其擴展為“整頁”以取得最佳效果 。
非常感謝！
這是我當前設置的內容：
.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 個解決方案
解決方案1
0 2018-12-28 16:56:27
我在第一個滑塊中添加了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>
解決方案2
0 已采納 2018-12-28 17:01:10
當您的滑塊運行時，箭頭以.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>
將 Slick 輪播水平箭頭更改為帶有字體真棒箭頭的向上和向下箭頭
[英]Change Slick carousel horizontal arrows to Up and & down arrows with font-awesome arrows
如何根據圓滑的輪播寬度有條件地添加下一個和上一個箭頭？
[英]How to conditionally add next and prev arrows based on slick carousel width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.