Question

我有一个旋转木马，我想在用户在最后一个或第一个项目时禁用过渡（通过触摸或点击或其他）。目前，旋转木马具有圆形列表的行为，这不是我想要的。我希望轮播像时间轴或页面浏览组件一样工作。

有人在这里问了一个类似的问题，但它对我不起作用： Disable Touch on Materialize Carousel

我在这里有一个代码笔：

$(document).ready(function () {
    $('.carousel').carousel();
    $('.carousel.carousel-slider').carousel({ fullWidth: true , noWrap: true});
    $('.slide-prev').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.carousel').carousel('prev')
    });
    $('.slide-next').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.carousel').carousel('next')
    });
    //this is for navigation using a new tab
    $('.share-btn').click(function (e) {
        var win = window.open('http://google.com', '_blank');
        win.focus();
    });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />

    <div class="carousel carousel-slider center" data-indicators="true">
        <div class="carousel-fixed-item center">
            <a class="btn waves-effect white grey-text darken-text-2 slide-prev">Prev</a>
            <a class="btn waves-effect white grey-text darken-text-2 share-btn" href="http://google.com" target="_blank">Share</a>
            <a class="btn waves-effect white grey-text darken-text-2 slide-next">Next</a>
        </div>
        <div class="carousel-item red white-text" href="#one!">
            <h2>First Panel</h2>
            <p class="white-text">This is your first panel</p>
        </div>
        <div class="carousel-item amber white-text" href="#two!">
            <h2>2 Second Panel</h2>
            <p class="white-text">This is your second panel</p>
        </div>
        <div class="carousel-item green white-text" href="#three!">
            <h2> 3 Third Panel</h2>
            <p class="white-text">This is your third panel</p>
        </div>
        <div class="carousel-item blue white-text" href="#four!">
            <h2> 4 Fourth Panel</h2>
            <p class="white-text">This is your fourth panel</p>
        </div>
    </div>

我该怎么做？

Answer 1

如果您的目标是提供网页浏览，您可以使用为此目的而设计的materialize内置FeatureDiscovery，可在此处找到：http://archives.materializecss.com/0.100.2/feature-discovery.html

它也可能更容易实现。

希望有所帮助。

Answer 2

我找到了解决方案。我修改了materialize js以停止循环itens。

首先，我在名为preventLoop的轮播中添加了一个新参数：

var defaults = { duration: 200, // ms dist: -100, // zoom scale TODO: make this more intuitive as an option shift: 0, // spacing for center image padding: 0, // Padding between non center items fullWidth: false, // Change to full width styles indicators: false, // Toggle indicators noWrap: false, // Don't wrap around and cycle through items. preventLoop: false, // Prevent carousel from looping through the itens like enableTouch: false, // Change to enable touch and dragging onCycleTo: null // Callback for when a new slide is cycled to. };

然后，在旋转木马拖动功能中，我检查preventLoop标志是否设置为True并阻止旋转木马返回第一个项目：

``` function drag(e) {
      var x, delta, deltaY;

      /**
       * Custom iacordo statement to prevent the itens to work like a circular list
       * When user hits the last item thereis no going further
       */
      if (options.preventLoop && isLastItem == count){
        return false;
            ... //More materialize carousel code below
      }```

这对我有用！

禁用物化轮播上的拖动和/或过渡

2 个答案: