Question

我正在尝试使用JavaScript（而不是jQuery）创建Bootstrap的多项目轮播。我已将Greenshock用作动画。我有三个轮播Inner div，每个div包含4列图像。我使用列，以便可以从单张幻灯片中添加或删除项目。但是滑块只能滑动一次。它只显示8个项目，而假设从三个不同的幻灯片中显示12个项目。我做错了什么。

我的scss

np.random.seed(2019)

rng = pd.date_range('2017-04-03', periods=10)
df = pd.DataFrame({'Document Date': rng, 'a':np.random.randint(10, size=10)}).sort_values('a')
print (df)
  Document Date  a
6    2017-04-09  0
7    2017-04-10  0
1    2017-04-04  2
2    2017-04-05  5
4    2017-04-07  6
8    2017-04-11  7
0    2017-04-03  8
3    2017-04-06  8
5    2017-04-08  8
9    2017-04-12  8

a = df['Document Date'].sort_values().iat[0]
print(a)
2017-04-03 00:00:00

a = df['Document Date'].nsmallest(1).iat[0]
print (a)
2017-04-03 00:00:00

我的HTML

.slider-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;

.slider {
    display: flex;
    flex-direction: row;
    width: 100%;

    .slider-inner {
        min-width: 100%;
    }

    .slider-item {
        display: block;
    }
  }
}

我的JS代码

<div class="container">
<div class="slider-wrapper">
    <div class="slider">
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-1" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-2" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-3" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-4" alt="" class="img-fluid">
                </div>
            </div>
        </div>
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-5" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-6" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-7" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-8" alt="" class="img-fluid">
                </div>
            </div>
        </div>
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-9" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-10" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-11" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-12" alt="" class="img-fluid">
                </div>
            </div>
        </div>

    </div>
    <div class="slider-controller">
        <button href="" class="nextSlide">
            Next
        </button>
        <button href="" class="prevSlide">
            Prev
        </button>

    </div>
</div>

使用Bootstrap和Javascript的多项目轮播

0 个答案: