无法滑到最后的项目

Question

我的目标是获得与原生机器人类似的滑动标签体验。 开始屏幕上的WhatsApp选项卡是我的目标的一个很好的例子。

所以我决定使用http://idangero.us/swiper。 我的配置如下：

// This works -> but I dont want centered slides
var galleryThumbs = new Swiper('.gallery-thumbs', {
    centeredSlides: true,
    slidesPerView: 'auto'
});

// This will not work -> I can only slide the first elements but I cannot slide to the last ones
var galleryThumbs = new Swiper('.gallery-thumbs', {
    slidesPerView: 'auto'
});

这是我的问题的截图（我有10个div。活动幻灯片有bg颜色红色。）：

所以我只能滑到幻灯片7.尝试进一步滑动不起作用。

我的目标是否可以使用选定的swiper插件？

Answer 1

只需在最后一张滑动幻灯片上添加右边距

struct CountDownIntervalView: View {
  @ObservedObject var timerManager: SimpleTimerManager
  var length: Double
  @Environment(\.presentationMode) var mode: Binding<PresentationMode>

  var interval: Double {
    length - self.timerManager.elapsedSeconds
  }

  var body: some View {
    VStack {
      Text("Time remaining: \(String(format: "%.2f", interval))")
        .onReceive(timerManager.$elapsedSeconds) { _ in
            if self.interval <= 0 {
              self.mode.wrappedValue.dismiss()
              self.timerManager.stop()
            }
        }

    // ... other your code

var mySwiper = new Swiper('.slider .swiper-container', {
  slidesPerView: 'auto',
})

.slider .swiper-slide {
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 20px;
}

.slider .swiper-slide:last-child {
    margin-right: calc(100% - (100% / 3));
}

.slider .swiper-slide.swiper-slide-active {
    background-color: red;
}

Answer 2

尝试使用$(document).ready(function() { var parent = $('#foo'); parent.find('#bar').attr('value','hi'); console.log(parent.prop('outerHTML')); }); 请参阅文档here