【问题标题】:Infinite Slideshow无限幻灯片
【发布时间】:2019-03-18 04:01:01
【问题描述】:

我需要一些关于无限幻灯片概念的帮助。 我需要的是类似于这张图片:

嗯,我在 HTML 和 CSS 中有这种结构,我在 div 的背景上使用图像,但我不知道如何用 jquery 实现无限效果。谁有耐心解释一下?

我找到了一些代码,但它们并没有像我预期的那样工作,有一个集中的 div 和上一张和下一张幻灯片的剪辑。

我要感谢从现在开始帮助我的任何人。

【问题讨论】:

  • 嗨..你可以通过使用owl carousel来实现这一点

标签: jquery slideshow infinite-loop


【解决方案1】:

使用这个插件制作你想要的轮播 https://owlcarousel2.github.io/OwlCarousel2/demos/merge.html

【讨论】:

    【解决方案2】:

    查看此演示

    $('.owl-carousel').owlCarousel({
        items:5,
        loop:true,
        margin:10,
        merge:true,
        responsive:{
            678:{
                mergeFit:true
            },
            1000:{
                mergeFit:false
            }
        }
    });
    .item {
    	height: 10rem;
    	background-color: #4DC7A0;
    	padding: 1rem;
    	color: #fff;
    }
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.css">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <div class="owl-carousel owl-theme">
        <div class="item" data-merge="1"><h2>1</h2></div>
        <div class="item" data-merge="2"><h2>2</h2></div>
        <div class="item" data-merge="1"><h2>3</h2></div>
        <div class="item" data-merge="3"><h2>4</h2></div>
        <div class="item" data-merge="6"><h2>6</h2></div>
        <div class="item" data-merge="2"><h2>7</h2></div>
        <div class="item" data-merge="1"><h2>8</h2></div>
        <div class="item" data-merge="3"><h2>9</h2></div>
        <div class="item"><h2>10</h2></div>
        <div class="item"><h2>11</h2></div>
        <div class="item" data-merge="2"><h2>12</h2></div>
        <div class="item"><h2>13</h2></div>
        <div class="item"><h2>14</h2></div>
        <div class="item"><h2>15</h2></div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

    【讨论】:

    • 是的,我看到了那个例子,但是我需要所有宽度相同的 DIV,就像我的问题中的图像一样。在视口中,第一张幻灯片集中,25% 的下一张和最后一张幻灯片在两侧,你明白吗?这个插件不完全是我需要的。
    • 删除数据合并属性表单项,兄弟请检查 owl carousel 的整个文档,您会找到您想要的一切。似乎您希望有人根据您的要求对此进行编码
    猜你喜欢
    • 2011-08-15
    • 2022-11-08
    • 1970-01-01
    • 2015-04-21
    • 2011-12-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多