小编Ric*_*way的帖子

我正在努力实现迄今为止我在网上还没有看到的东西。我希望光滑滑块中的活动分页点始终位于中心。

这是预期的结果：

换句话说，我希望页面加载显示第一张幻灯片，但第一张幻灯片的分页点应该居中。

如果用户通过滑动点击下一张幻灯片，则该点应再次移动中间，活动幻灯片始终位于分页中心。关于实现这一目标的最佳方法的任何想法？

这是我到目前为止所做的示例和代码。

$('.slider').slick({
  infinite: true,
  dots: true,
  arrows: false
});

.slider {
  width: 200px;
}

.slide img {
  display: block;
  width: 100%;
  height: auto;
}

.slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 0;
  list-style-type: none;
}

.slick-dots li {
  margin: 0 0.25rem;
}

.slick-dots button {
  display: block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: grey;
  text-indent: -9999px;
}

.slick-dots li.slick-active button {
  background-color: blue;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> …

我正在尝试导出用于JavaScript的算法的Scala实现.我正在使用@JSExport.该算法适用于Scala Char和在互操作性指南Long中标记为不透明的值.

我想知道(a)这意味着什么; (b)处理此事的建议是什么.

我认为这意味着我应该避免Char和Long使用String加上运行时检查长度(或者可能使用无形的Sized集合)而Int不是.

但欢迎其他想法.

更多详情...

我正在看的代码类型是:

@JSExport("Foo")
class Foo(val x: Int) {
  @JSExport("add")
  def add(n: Int): Int = x+n
}

......按预期工作:new Foo(1).add(2)生产3.

用Long相同的调用报告替换类型:( java.lang.ClassCastException: 1 is not an instance of scala.scalajs.runtime.RuntimeLong和使用和返回的方法类似Char).

我正在使用从http://kenwheeler.github.io/slick/下载的光滑滑块

我有许多自动播放图像正确显示，但是，我还有一个无法自动播放的 mp4 文件。这是我的 HTML：

<section class="regular slider" style="width: 900px; left: 60px; top: 230px;">
    <div>        
        <video autoplay>
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        </video>
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=3">
    </div>
 </section>

这是我的脚本：

<script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000
      });
     });
  </script>

我一直在尝试使用 slick.js 创建类似的东西，但我真的无法理解它。

我已经得到了当前的代码。如何使中心幻灯片图像的宽度和高度为 100% 并为幻灯片添加填充？它似乎不起作用。

我真的很感激任何帮助。谢谢。

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  adaptiveHeight: false
});

.slick-slide img {
  max-width: 100%; 
  transition: transform 0.5s; 
 }

.slick-slide.slick-center img{
  transform: scale(2.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

我有一个光滑的滑块，当我滑动它时不会滚动超过一张幻灯片。我认为代码是正确的，但我不明白为什么它不能按我想要的时间滚动 7 张幻灯片。也许我没有看到明显的东西......

HTML

<div class="slideshow-wrapper">
  <div class="preloader"></div>
  <div class="homeslick">
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
  </div>
</div>

JS

$(document).ready(function(){
  $('.homeslick').slick({
    infinite: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 7,
    slidesToScroll: 7,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToScroll: 7,
          slidesToShow: 7
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToScroll: …

我正在使用反应光滑的滑块。问题在于项目顺序：第一个项目呈现为最后一个。但是如果无限是假的，第一项丢失，最后一项是空白。

import React from 'react';
import Slider from "react-slick";

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const { config } = this.props;
        const slideItems = config.items;

        const data = slideItems.map((item,index) => {
            let textStyle = config.textStyle;
            let titleSize = config.titleSize;
            let urlType = config.urlType;
            let showContent = config.showContent;
            let slideItemStyle = {
                "max-height": config.sliderHeight.indexOf("px")==-1?(config.sliderHeight+"px"):config.sliderHeight
            }
            let style = {
                "background-color": config.backgroundColor
            }
            let actionTarget = item.actionTarget ? "_blank" : "_parent";
            return <div className="slide-item"> …

我想将光滑滑块箭头位置更改为与图片中相同的位置，但我无法在 jquery 中实现相同的效果。

$('.your-class').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    prevArrow:'<i class=" fas fa-angle-right clr-gry"></i>',
    nextArrow:'<i class="fas fa-angle-left clr-gry"></i>'

});

我正在使用 slick 创建一个滑块。当我在光滑容器内使用两个 div 标签时，水平滚动条不会出现。但是当我在 slick 中使用两个以上的 div 时，会出现水平滚动条。我已将光滑的代码放入容器流体中。

Html code

<section class="bg-white py-5">
            <div class="container-fluid">
                <div class="cust-slider">
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
          </div>
</section>

JavaScript

 $('.cust-slider').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: …

我发现的一个codepen：https ://codepen.io/norman_pixelkings/pen/NNbqgG

HTML：

<section class="slider">
   <div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"></div>
   <div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"></div>
   <div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"></div>
   <div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"></div>
   <div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"></div>
   <div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"></div>
</section>

CSS：

.slider {
 width: auto;
 margin: 30px 50px 50px;
}

.slick-slide {
 background: #cee5ea;
 color: white;
 padding: 20px 0;
 font-size: 30px;
 font-family: "Arial", "Helvetica";
 text-align: center;
}
.slick-slide img {
 display: inline-block;
}

.slick-prev:before,
.slick-next:before {
 color: black;
}

.slick-dots li {
 width: auto;
}

.pager__item {
 padding: 0 …

这是我的光滑滑块：

            var informations_panel = document.querySelector("#block-views-block-wazne-informacje-strona-glowna-block-1 > div:nth-child(3) > div > div.view-content");
            $(informations_panel).slick({
                autoplay: true,
                autoplaySpeed: 5000,
                arrows: true,
                dots: true,
                infinite: true,
                slidesToShow: 2,
                slidesToScroll: 1
            });

当用户调整窗口大小时，有没有办法更改slidesToShow属性？使用 $(window).resize()，类似：

    $(window).resize(function(){
        var informations_panel = document.querySelector("#block-views-block-wazne-informacje-strona-glowna-block-1 > div:nth-child(3) > div > div.view-content");
        if ($(window).width() < 992) {
            $(informations_panel).slick({
                autoplay: true,
                autoplaySpeed: 5000,
                arrows: true,
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        }
    });

该解决方案出现错误，我无法再次在同一元素上初始化光滑。我只想slidesToShow当窗口宽度大于 992px 时将属性从 2 更改为 1。