SlickJS 轮播中心模式不起作用

问题描述 投票：0回答：2

我正在尝试使用 slickJS 将几个图像放在轮播中居中，但是由于左侧偏移错误，它无法正确居中图像。无论如何要解决这个问题吗？有没有真正能完成这项工作的 JavaScript 轮播推荐？我直接从光滑的网站上提取了代码，但它不起作用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
        <style>

        </style>
    </head>
    <body>

            <div class="center">
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></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="/app/source/slick/slick.min.js"></script>

        <script type="text/javascript">
            //straight from the website
            $(document).ready(function(){
              $('.center').slick({
                    centerMode: true,
                    centerPadding: '60px',
                    slidesToShow: 3,
                    responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 1
                        }
                    }
                    ]

              });
            });

        </script>
    </body>
</html>

结果：

wrong center aligning

正如您所看到的，它没有正确对齐到中心，您甚至可以看到第四张幻灯片的一小部分，即使它设置为仅显示 3 张幻灯片。非常感谢任何帮助！

javascript jquery css centering slick.js
2个回答
2
投票

您看到边缘图像的部分视图的原因是因为您在设置中启用了 

centerMode
，请将其删除或将其设置为 
false
以消除该边缘视图。此外，这并不是说 div 占用的宽度不相等，而是它们内部的图像向左浮动，因此看起来在最后一个图像之后右侧有额外的空间。要解决此问题，只需使用 
margin:auto
将图像与其父 div 居中即可。

$(document).ready(function() {
  $('.center').slick({
    //centerMode: true,
    //centerPadding: '160px',
    slidesToShow: 3,
    responsive: [{
        breakpoint: 768,
        settings: {
          arrows: false,
          //centerMode: true,
          //centerPadding: '140px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          //centerMode: true,
          //centerPadding: '40px',
          slidesToShow: 2
        }
      }
    ]

  });
});
img{
  margin:auto;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />

<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.6.0/slick.js"></script>

<div class="center">
  <div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
  <div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
  <div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>

0
投票

我正在开发一个单页应用程序（SPA）。我想使用光滑的轮播中心模式，但它对我不起作用，所以我手动修复了它，这是代码。

import { useState, useRef } from 'react';
import Slider from 'react-slick';
import Image from 'next/image';

const Carousel = ({ reviews }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const sliderRef = useRef(null);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    beforeChange: (current, next) => setActiveIndex(next),
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true,
          dots: true,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          dots: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          dots: true,
        },
      },
    ],
  };

  const getSlideClasses = (index) => {
    const slidesToShow = 3;
    const totalSlides = reviews.length;
    const centerIndex = (activeIndex + Math.floor(slidesToShow / 2)) % totalSlides;
    const virtualIndex = (index + totalSlides) % totalSlides;
    if (virtualIndex === centerIndex) {

      return 'opacity-100 scale-100';
    } else if (
      virtualIndex === (centerIndex - 1 + totalSlides) % totalSlides ||
      virtualIndex === (centerIndex + 1) % totalSlides
    ) {

      return 'opacity-20 scale-90';
    } else {

      return 'opacity-50 scale-80';
    }
  };

  return (
    <div className="relative mx-auto max-w-4xl">
      <div className="relative">
        <Slider ref={sliderRef} {...settings}>
          {reviews.map((review, index) => (
            <div
              key={review.id}
              className={`px-4 transition-opacity transform transition-transform duration-300 ease-in-out ${getSlideClasses(index)}`}
            >
              <div className="flex flex-col items-center bg-brown-50 border border-gray-200 rounded-3xl shadow-md p-6 w-full max-w-sm mx-auto md:max-w-none">
                <div className="flex flex-col items-center text-center md:w-1/3">
                  <Image src={review.image} alt={review.name} width={70} height={70} className="rounded-full" />
                  <div className="flex items-center mt-3">
                    <p className="text-lg font-semibold mr-2">{review.name}</p>
                    <div className="flex">
                      {[...Array(review.rating)].map((_, idx) => (
                        <svg
                          key={idx}
                          className="w-5 h-5 text-yellow-400"
                          fill="currentColor"
                          viewBox="0 0 20 20"
                        >
                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.357 4.198a1 1 0 00.95.69h4.418c.969 0 1.371 1.24.588 1.81l-3.58 2.598a1 1 0 00-.364 1.118l1.358 4.198c.3.921-.755 1.688-1.539 1.118l-3.581-2.598a1 1 0 00-1.176 0l-3.58 2.598c-.783.57-1.838-.197-1.539-1.118l1.357-4.198a1 1 0 00-.364-1.118L2.134 9.625c-.783-.57-.381-1.81.588-1.81h4.418a1 1 0 00.95-.69l1.357-4.198z" />
                        </svg>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="mt-4 md:mt-0 md:ml-6 md:w-2/3 text-left">
                  <p className="text-gray-600 text-sm md:text-base leading-relaxed">{review.text}</p>
                  <div className="flex justify-end mt-4">
                    <Image src={review.platformLogo} alt="Platform Logo" width={30} height={30} />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </Slider>
      </div>
    </div>
  );
};


----------


export default Carousel;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.