Home>

Slick is used to slide a list of 6 images with no images and only text. However, the behavior is strange because the width is automatically calculated. Some slides overlap and sometimes the movement is jerky.
In particular, dots have a large width, which is not displayed on one line but on two lines.
Please tell me where to fix it.

<div>
      <div>
        <div>
            <p>,,</p>
            <div>
            <p>,,</p>
            <p><span>,,</p>
            <p><img src = .png "alt =" "></p>
            <p>, ...
            </div>
        </div>
,<div>
            <p>,,</p>
            <div>
            <p>,,</p>
            <p><span>,,</p>
            <p><img src = .png "alt =" "></p>
            <p>, ...
            </div>
,,,
        </div>
. slider-container {
  display: none;
  position: relative;
    width: 84%;
    margin: 0 auto;
}
.slider-container.initialized {
  display: block;
}
.slider {
  margin: 0 24px;
  overflow: hidden;
}
.slick-list {
  margin-right: -12px;/* Negative margin for gutter * /
}
.slider-arrow {
  position: absolute;
  top: 50%;
  height: 36px;
  margin-top: -18px;/* Negative margin by half the height * /
  line-height: 36px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;/* Important * /
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}
.slick-slide {
  margin-right: 12px;/* Gutter * /
}
.slick-slide {
  outline: 0;
}
.slick-slide {
  transition: .3s ease;
  transform: scale (.85);
}
.slick-current {
  transform: scale (1);
}
.slick-slide: not (.slick-current) {
  opacity: .5;
}
.flow-slide {
    width: 240px;
    height: 800px;
}
.flow-list {
    width: 240px;
    height: 600px;
    border: 1px solid # 000;
    background-color: #fff;
    padding: 24px;
}
var $slider_container = $('. slider-container'),
    $slider = $('. slider');
// Add class when initializing slide
// Start with display: none and when .initialized is added display: block
$slider.on ('init', function () {
  $slider_container.addClass ('initialized');
});
$slider.slick ({
  appendArrows: $slider_container,
  prevArrow: '<div></div>',
  nextArrow: '<div></div>',
  slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
// dots: true,
    variableWidth: true,
    autoplay: true
});
// Display slide width up to px
$slider.on ('setPosition', function () {
  var slider_width = $slider.width (),
      slide_gutter = $slider.find ('. slick-slide'). eq (0) .css ('margin-right'). split ('px') [0],
      slides_num = $slider.slick ('slickGetOption', 'slidesToShow'),
      slide_width = (slider_width-slide_gutter * (slides_num-1))/slides_num;
  $slider.find ('. slick-active'). css ('width', slide_width + 'px');
});
  • Answer # 1

      

    Several slides overlap,

    This is due to the width adjustment process in$slider.on ('setPosition&apos ;, function () {});.
    Without this process itself, the slides will not overlap.

      

    Occasionally jerky

    This is because the animation is not executed by moving between the last slide and the first slide.

    . slick-slide {
      transition: .3s ease;
      transform: scale (.85);
    }
    .slick-current {
      transform: scale (1);
    }


    These are these.

    I think you're going to animate the class that slick gives you, but the detachment of the class when switching between the end and the beginning will be different from when moving other slides.
    When using such a layout-type library, it is better to operate it within the range that can be realized with the functions provided by the library.
    If you want to extend your own, I think you have to investigate thoroughly the balance with the library standard behavior.
    I am not willing to investigate that much. Not bad.

Related articles