CODEWITHSUNDEEP
javascriptjquerymaterialize
Tiago Conceiçao
Tiago Conceiçao

Reputation: 467

Disable dragging and/or transitioning on materialize carousel

I have a carousel and I want to disable transitions (By touch or clicking or whatever) when user is on the last or first item. Currently the carousel has the behavor of a circular list and That's not what I want. I want the carousel to work like a timeline or a page tour component.

Someone has asked a similiar question here but it didn't worked for me: Disable Touch on Materialize Carousel

I have a code pen exemple here: 

$(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>

How can I do this ?

Upvotes: 2

Views: 2345

Answers (2)

Tiago Concei&#231;ao
Tiago Concei&#231;ao

Reputation: 467

I have found a solution. I modified materialize js in order to stop looping through itens.

First, I added a new argument in the carousel called 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. };

Then, on the carousel drag function I check if the preventLoop flag is set to True and prevent the carousel from going back to the first item:

``` 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
      }```

That works for me!

Upvotes: 1

Carvalho
Carvalho

Reputation: 1

If your objective is to provide a page-tour you can probably use materialize's built-in FeatureDiscovery which is designed for this purpose and can be found here: http://archives.materializecss.com/0.100.2/feature-discovery.html

It will probably be easier to implement, too.

Hope that helps.

Upvotes: 0

Related Questions