javascript - 光滑的 slider 同步 - 断点上的自定义箭头-6ren

javascript - 光滑的 slider 同步 - 断点上的自定义箭头

转载作者：太空宇宙更新时间：2023-11-04 06:27:27

25

4

所以我有这个多 slider ，我使用灵活的 slider 同步来使这个 slider 工作。一切都很好，除非我想在移动屏幕(768 及以下)上使用不同的/我自己的按钮作为下一个箭头。就显示正确的按钮而言，我的用户界面设置正确。但是我的设置无法将我的自定义按钮识别为移动设备上的光滑箭头。

常规屏幕

移动屏幕(按钮不能用作箭头)

**here is my code**

$(document).ready(function () {

  $(".home-nav-slider-bg").slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     fade: true,
     asNavFor: '.home-nav-slider-slider',
  });


  $(".home-nav-slider-slider").slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     centerPadding: '30px',
     asNavFor: '.home-nav-slider-bg',
     centerMode: false,
     focusOnSelect: true,
     speed: 500,
     arrows: true,
     //fade: true,
     responsive: [
        {
           breakpoint: 768,
           settings: {
              nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) { return v.outerHTML }).join(),
              prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) { return v.outerHTML }).join()
           }
        }


     ]
  });

  $(window).resize(function () {
     $('.home-nav-slider-slider')[0].slick.refresh();
  });
});

jQuery(window).on('load', function () {
  function getImage() {
     jQuery(".home-nav-slider-image-holder").each(function () {
        var imgSrc = $(this).find("img").attr("src");
        $(this).css('background-image', 'url(' + imgSrc + ')');
     });
  }
  getImage();
});




var $status = $('.home-nav-slider-slideCount');
var $slickElement = $('.home-nav-slider-slickElement');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text(i + '/' + slick.slideCount);
});

$('.home-nav-slider-slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {

  console.log(event);
  console.log(slick);
  console.log(currentSlide);
  console.log(nextSlide);

});

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.home-nav-slider-main .home-nav-slider-title h1 {
  color: #fff;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .57);
  line-height: 110%;
}
.home-nav-slider-main .home-nav-slider-media-control button {
  z-index: 1;
  border-radius: 0;
}
.home-nav-slider-main .home-nav-slider-slider {
  color: #fff;
}
.home-nav-slider-main .home-nav-slider-slider .slick-prev, .home-nav-slider-main .home-nav-slider-slider .slick-next {
  border: 1px solid #eee;
  height: 2.1rem;
  width: 40px;
  z-index: 1;
  top: -1rem !important;
}
.home-nav-slider-main .home-nav-slider-slider .slick-list {
  padding-top: 1rem;
}
.home-nav-slider-main .home-nav-slider-slider .slick-list:before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
}
.home-nav-slider-main .slick-prev:before, .home-nav-slider-main .slick-next:before {
  font-family: 'Ionicons';
}
.home-nav-slider-main .slick-next:before {
  content: '\f3d6';
}
.home-nav-slider-main .slick-prev:before {
  content: '\f3d5';
}
.home-nav-slider-main .home-nav-slider-image-holder {
  background-size: cover;
  background-position: center;
}
.home-nav-slider-main .home-nav-slider-image-holder img {
  opacity: 0;
  visibility: hidden;
}
.home-nav-slider-main .home-nav-slider-bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.home-nav-slider-main .home-nav-slider-bg div {
  height: 100%;
}
.home-nav-slider-main .home-nav-slider-bg .slick-slide {
  margin: 0px;
}
.home-nav-slider-main .home-nav-slider-bg img {
  height: 100vh;
  width: auto;
}
.home-nav-slider-main .home-nav-slider-wrap {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.home-nav-slider-main .home-nav-slider-slideCount {
  position: relative;
  left: 6rem;
  top: -10px;
  color: #fff;
}
.home-nav-slider-main .slick-slide {
  margin: 0px 3px;
}
.home-nav-slider-main .home-slider-gradient-wrap {
  overflow: hidden;
}
.home-nav-slider-main .home-slider-gradient-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
 /* background-color: #000;
  */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
}
.home-nav-slider-main .home-slider-gradient-wrap .container .row {
  height: 100vh;
}
@media (min-width: 992px) {
  .home-nav-slider-main .slick-next {
    left: 2.18rem;
 }
  .home-nav-slider-main .slick-prev {
    left: 0px;
 }
}
@media (max-width: 992px) {
  .home-nav-slider-main .home-nav-slider-slider {
    position: relative;
    top: 0px;
 }
  .home-nav-slider-main .slick-prev {
    left: 0px;
 }
  .home-nav-slider-main .slick-next {
    left: 40px;
 }
}
@media (max-width: 767px) {
  .home-nav-slider-main .home-nav-slider-slider-text {
    display: block !important;
    text-align: left;
 }
  .home-nav-slider-main .home-nav-slider-slider-text p {
    text-align: left !important;
 }
  .home-nav-slider-main .home-nav-slider-slider-text p br {
    display: none;
 }
  .home-nav-slider-main .slider-home h1 {
    text-align: left;
 }
}
@media (max-width: 1024px) {
  .home-nav-slider-main .home-slider-gradient-wrap .container .row {
    height: auto;
 }
  .home-nav-slider-main .home-nav-slider-wrap {
    height: auto;
 }
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick 2-in-1-new</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
   <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
   <link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700" rel="stylesheet">
   <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <div class="home-nav-slider-main">
      <section class="home-nav-slider-wrap  mb-0 pt-11">
         <div class="home-slider-gradient-wrap">
            <div class="home-nav-slider-bg">

               <div class="home-nav-slider-image-holder">
                  <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
               </div>
               <div class="home-nav-slider-image-holder">
                  <img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1" alt="">
               </div>



            </div>
            <div class="container">
               <div class="row">
                  <div class=" col-lg-12 align-self-center">
                     <div class="home-nav-slider-title">
                        <h1> Hello<br>Slider</h1>
                     </div>
                  </div>
                  <div class="col-lg-12 align-self-center d-none d-lg-block ">
                     <span class="home-nav-slider-slideCount"></span>

                     <div class="home-nav-slider-slider home-nav-slider-slickElement ">

                        <div>
                           <div
                              class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
                              <div class="pr-5">
                                 <h6>
                                    hello
                                 </h6>
                              </div>
                              <div class="pr-5">
                                 <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                    blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                    excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.

                                 </p>
                              </div>
                              <div>
                                 <a href="#">
                                    <button class="btn btn-primary">
                                       click this
                                    </button>
                                 </a>
                              </div>
                           </div>
                        </div>

                        <div>
                           <div
                              class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
                              <div class="pr-5">
                                 <h6>
                                    hello
                                 </h6>
                              </div>
                              <div class="pr-5">
                                 <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
                                    blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
                                    excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.

                                 </p>
                              </div>
                              <div>
                                 <a href="#">
                                    <button class="btn btn-primary">
                                       click this
                                    </button>
                                 </a>
                              </div>
                           </div>
                        </div>


                     </div>
                  </div>

               </div>

            </div>
            <!-- small screen slide control -->
            <div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control">
               <button class="btn btn-primary left "><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button>
               <button class="btn btn-primary right "><i class="ion-ios-arrow-thin-right"
                     aria-hidden="true"></i></button>

            </div>



         </div>
      </section>
   </div>


   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
   <script src="js/extra-jquery.js"></script>
</body>

</html>

最佳答案

此代码部分不正确:

settings: {
    nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) { return v.outerHTML }).join(),
    prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) { return v.outerHTML }).join()
}

HTML 中没有这些组合:
.home-nav-slider-media-control button.right slick-next
.home-nav-slider-media-control button.left slick-prev
您不应该复制按钮的 HTML 代码，您应该指向它们。

正确代码:

settings: {
    nextArrow: $('.home-nav-slider-media-control button.right'),
    prevArrow: $('.home-nav-slider-media-control button.left')
}

这是工作 jsfiddle

更多内容:

这个光滑的 slider 模块似乎有很多错误，并且在调整到较小的屏幕尺寸时会杀死自定义控制按钮。它也不会生成断点事件。

我添加了一些额外的代码并更新了 jsfiddle，以确保您的测试页面在多次调整窗口大小后仍能正常工作。

它可以被优化，但至少它现在完全可以正常工作。

关于javascript - 光滑的 slider 同步 - 断点上的自定义箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54948399/

25

4

0

文章推荐： java - Netbeans 中的 StdIn 库 - StdIn.readInt()

文章推荐： python - RabbitMQ 消费者停止接收消息

文章推荐： java - 如何在 Java 中进行直接替换

scala - 光滑，如何将查询映射到继承表模型？
光滑，如何将查询映射到继承表模型？ IE，我有表A，B，C A是“父”表，B＆C是“子”表我想知道的是我该如何使用平滑模型，以便A将成为抽象的B＆C具体类型，而查询A中的一行将导致B或C对象类似
scala - 光滑:创建数据库
如果数据库尚不存在，有没有办法轻松创建数据库？ Database.forURL("jdbc:mysql://127.0.0.1/database", driver = "com.mysql.jdbc.
Java 光滑 : translation
我是 Java slick 的新手，我对“相机”的翻译有一个小问题。我有这个代码: package chapterOne; import org.newdawn.slick.Animation; im
java - 光滑 - 填充矩形
我正在尝试使用 Slick 渲染健康栏。我想要一个红色矩形，前面有一个绿色矩形来显示剩余的生命值。这是我到目前为止所拥有的: Rectangle healthBG = new Rect
html - 如何让点继承图像的宽度？ (光滑)
有一个225px的方 block 。在里面插入一张大尺寸的图片(850 像素)。她走到外面。看起来像这样: .content {display: inline-block;} .column {fl
Java 光滑；延迟后运行命令而不循环；
我正在用 Java slick 编写游戏，我想添加消息管理。应该有一个 ArrayList，其中包含所有尚未发送的消息。每 2 秒应显示列表中的下一项。我的逻辑: 在更新方法中，应显示第一条消息。
scala - 如何将列默认值设置为 Null？ (光滑)
case class Account(var email:String, var pass:String, var familyId: Int, var accessId: Int, id: Opti
html - 光滑 slider 内的背景图像
Content should wrap Content should wrap Content should wrap C
javascript - 光滑 slider 人为居中
我正在使用 JQuery Slick Slider http://kenwheeler.github.io/slick/效果非常好。我还运行了一个单独的脚本，用于检查页面 url，如果光滑 slid
javascript - 如何在插件中使用定义的事件处理函数而不是匿名函数(光滑 slider )
我知道如何使用 click, scroll 的事件处理函数和其他默认事件。目前我正在使用一个名为 slick slider 的 slider 插件。并且它工作正常，我想用定义的函数而不是匿名函数替换
javascript - 光滑 slider 通过单击按钮播放视频
我有 slider ，每个 slider 都包含视频作为背景和播放/暂停按钮。尝试通过单击正确的按钮来播放视频，但出现以下行为:我单击第二张幻灯片中的播放按钮，视频从第一张幻灯片中播放。暂停按钮也是如
javascript - 光滑 slider 中的断点有什么用？
我正在尝试在我的页面上实现一个光滑的 slider 。在浏览精美的文档时，他们提到要以响应方式使用 slider ，请遵循代码(我在下面发布)。我无法理解断点的用途。谁能给我解释一下代码。我尝试谷歌搜
jquery - 光滑 slider 上的灯箱并将内容添加到与图像一起弹出的灯箱
我遇到了光滑 slider 的问题，我想创建一个应该在光滑 slider 上打开的灯箱，我想在灯箱中添加一些内容，主要问题是我不知道如何我可以将内容添加到灯箱部分吗？ $('.works-slides
javascript - 光滑 slider 正则表达式过滤
我正在尝试使用一个 slider ，它附带一个搜索框。此搜索框搜索 slider 中的用户名称。目前，当用户开始在输入框中键入内容时，搜索框会自动完成全名。例如，他们输入“Joh”，建议输入“Jo
javascript - 光滑 slider 中心模式
我一直在尝试创建类似 this 的东西使用 slick.js，我真的无法理解它。我已经准备好了当前的代码。如何使中心幻灯片图像的宽度和高度为 100% 并为幻灯片添加填充？好像不行。我真的很感激任
javascript - 光滑 slider 响应断点宽度不起作用
我使用光滑 slider 创建了 slider 。我遇到的问题是在线断点工作正常的宽度。但是，当我以正常方式写入 html file 时，相同的代码不起作用。谁能帮我这个。从检查中检查并查看正常代码
javascript - 光滑 slider - 更改输入焦点事件的可拖动状态
我正在尝试在输入字段中删除可拖动选项(以便我可以选择文本并使用箭头在字段内导航)。 var slider = $('.slider').slick({ infinite: false,
javascript - 光滑 slider 的响应问题？
当它到达 breakpoint 时，如 990px，我在 slick slider 中遇到了问题。它删除了背景并且没有显示任何类型的错误。 iconic 我正在使用这个 javascript 来提
javascript - 光滑 slider 中按钮之间的位置点
我想将光滑 slider 的点定位在上一个和下一个按钮之间。Slick 提供设置让您定位点/按钮。但它们会互相显示。这是我的代码: $('.slider').slick({ arrows:
JQuery - 光滑 slider - 仅显示第一张图像
我在网站上创建了一个光滑的 slider 。我可以看到它进入“光滑模式”，但也没有显示我告诉它的幻灯片数量。它们都在那里，我可以通过更改它们的“左”和“不透明度”CSS 值来显示它们。我将无法复制这

首页

博学

6Ren·AI

商城

javascript - 光滑的 slider 同步 - 断点上的自定义箭头

更多内容: