如何制作图像滑块的想法

如何解决如何制作图像滑块的想法

我是 CSS、HTML、Javascript 的新手。我想要做的是一个图像滑块，当您单击向左/向右箭头以转到上一个/下一个想象时。

此时我做了这样的事情：https://i.imgur.com/TMNIo06.png

我想做的是这样的：https://i.imgur.com/JVAvr62.mp4

编辑：我添加了片段。希望现在没事！

function prev() {
    //do_something..
}

function next() {
    //do_something..
}

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet');

.content {
    transition: transform .3s ease-in-out,margin .3s ease-in-out;
    padding-top: 35px;
    margin-left: 250px;
    min-height: calc(100vh - 101px);
    z-index: 800;
}

.header_title {
    padding-bottom: 20px;
}

.slider {
    display: flex;
    flex-wrap: Nowrap;
}

.item_ep {
    margin-right: 18px;
}

.info_ep {
    padding-top: 15px;
    padding-bottom: 20px;
}

.item_ep .info_ep .season {
    font-family: 'Rubik';
    font-size: 17px;
    color: #b3b3b3;
}

.item_ep .info_ep .title_ep {
    color: #808080;
}

.pull-right {
    float:right;
}

.title_header {
    font-size: 18px;
    font-weight: 600;
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
  
  <div class="content">
            <div class="header_title">
                <span class="title_header">Latest episodes</span>
                <!-- scroll -->
                <div class="scroll_arrows pull-right">
                    <a class="prev btn" onclick="prev()"><i class="fa fa-chevron-left"></i></a>
                    <a class="next btn" onclick="next()"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>

            <div class="slider">
                <div id="1" class="item_ep">
                    <img src="https://image.tmdb.org/t/p/w185/wmOuYyqVaczBLXxQNFSaRfAUgPz.jpg" class="img_ep">
                    <div class="info_ep">
                        <span class="season">Season 5,Episode 9</span><br>
                        <span class="title_ep">Lucifer</span>
                    </div>
                </div>
                <div id="2" class="item_ep">
                    <img src="https://image.tmdb.org/t/p/w185/3mBZwTEuN2CejVTeZqVfy2Kx5dY.jpg" class="img_ep">
                    <div class="info_ep">
                        <span class="season">Season 10,Episode 15</span><br>
                        <span class="title_ep">Ragnarok</span>
                    </div>
                </div>
                <div id="1" class="item_ep">
                    <img src="https://image.tmdb.org/t/p/w185/wmOuYyqVaczBLXxQNFSaRfAUgPz.jpg" class="img_ep">
                    <div class="info_ep">
                        <span class="season">Season 5,Episode 15</span><br>
                        <span class="title_ep">Ragnarok</span>
                    </div>
                </div>
                <div id="2" class="item_ep">
                    <img src="https://image.tmdb.org/t/p/w185/3mBZwTEuN2CejVTeZqVfy2Kx5dY.jpg" class="img_ep">
                    <div class="info_ep">
                        <span class="season">Season 10,Episode 15</span><br>
                        <span class="title_ep">Ragnarok</span>
                    </div>
                </div>
            </div>
        </div>

解决方法

你有什么问题？

.slider 类具有 flex-wrap: wrap;，因此它将项目包装到下一行。你会想要flex-wrap: nowrap;。

您可能需要一些 JavaScript 处理来确定要显示哪些项目。

我会使用 Splide。

https://splidejs.com/

看演示