Question

我正在尝试在页面中显示3张幻灯片。问题是，每当少于3张幻灯片时，这些幻灯片就会被复制以填充空白区域，因此，例如，如果我只有一张幻灯片，它将显示同一张幻灯片的三个相同副本。有什么办法可以避免这种情况？我只想显示一张幻灯片。

这是swiper的配置：

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: 3,
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        767: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});

我看了一下Swiper文档，但找不到关于这种配置的任何信息。如何解决这个问题？

Answer 1

只需将import matplotlib.pyplot as plt import cartopy import cartopy.feature as cf import cartopy.crs as ccrs import numpy as np plt.figure(figsize=(8, 8)) extent = [-6.5, 3.5, 49.5, 59.0] central_lon = np.mean(extent[:2]) central_lat = np.mean(extent[2:]) proj = ccrs.Orthographic(central_lon, central_lat) ax = plt.axes(projection=proj) ax.set_extent(extent) ax.gridlines() border = cf.NaturalEarthFeature( 'cultural', 'admin_0_boundary_lines_land', scale='110m') land = cf.NaturalEarthFeature( 'physical', 'land', scale='110m', edgecolor='black', facecolor=cfeature.COLORS['land']) ocean = cf.NaturalEarthFeature( 'physical', 'ocean', scale='110m', edgecolor='none', facecolor=cfeature.COLORS['water']) ax.add_feature(border) ax.add_feature(land) ax.add_feature(ocean) Greenwich_lon, Greenwich_lat = 0.0, 51.0 ax.plot(Greenwich_lon, Greenwich_lat, marker='x', markersize=12, color='red') plt.show()参数从loop更改为true

Answer 2

在创建滑动程序之前添加这些行

const swiper = this.swiper;
swiper.loopDestroy();
swiper.loopCreate();

例如：

const swiper = this.swiper;
swiper.loopDestroy();
swiper.loopCreate();

var swiper = new Swiper('.swiper-container', { 
    slidesPerView: 'auto',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});`

Answer 3

在初始化 swiper 后手动销毁循环对我有用，如关于此 github 问题的建议：

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: 3,
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        767: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});


swiper.loopDestroy();

它允许您有循环但不会创建任何重复项。

一张幻灯片时，Swiper js显示了3张相同的幻灯片

3 个答案: