How can I put the prev and next arrow in materialize carousel?

Question

I have the second carousel that moves with the click and drag... but I want to show the arrows to let the user know that is a slider ... is there a way to show it with materialize ? or do I have to make it from another way ?

Solution 1

  <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">button</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>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>

Javascript

  $('.carousel.carousel-slider').carousel({fullWidth: true});

So something like this ?

source: http://materializecss.com/carousel.html

With button < > : https://codepen.io/Paco_Cervantes/pen/ZLxKpj?q=materialize+carousel&limit=all&type=type-pens

if you need a specific word previous or edit let me know

Solution 2

Hopefully this will help someone ;)

When Materialize.js version is below v0.100 try this:

$('.moveNextCarousel').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $('.carousel').carousel('next');
   });

If your Materialize.js version is equal or above v0.100 try this:

$('#carousel-right').on('touchstart', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#carouselFirst').carousel('next');
});

My HTML Structure:

<div id="carouselFirst" class="carousel carousel-slider">
        <div class="carousel-fixed-item center clearfix">
          <a id="carousel-prev" class="movePrevCarousel btn waves-effect left">button</a>
          <a id="carousel-next" class="moveNextCarousel btn waves-effect right">button</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>Second Panel</h2>
          <p class="white-text">This is your second panel</p>
        </div>
        <div class="carousel-item green white-text" href="#three!">
          <h2>Third Panel</h2>
          <p class="white-text">This is your third panel</p>
        </div>
        <div class="carousel-item blue white-text" href="#four!">
          <h2>Fourth Panel</h2>
          <p class="white-text">This is your fourth panel</p>
        </div>`enter code here`
      </div>

My Javascript:

$('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: false
});

$('#carousel-next').on('touchstart', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#carouselFirst').carousel('next');
});

$('#carousel-prev').on('touchstart', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#carouselFirst').carousel('prev');
});

Solution 3

After your slides, create the following div:

<div class="row slider-center"><i id="next" class="material-icons">chevron_right</i> <i id="prev" class="material-icons">chevron_left</i></div>

Your initialization:

<script>
$('.carousel').carousel({
            fullWidth: true,
            indicators: true
        });

 $('i#prev').click(function() {
    $('.carousel').carousel('prev');
});

$('i#next').click(function() {
    $('.carousel').carousel('next');
});
    </script>

And our CSS:

.row.slider-center {
    position: absolute;
    top:50%;
    width:100%;
}
i#next {
      position: absolute;
    right: 10px;
    color: #fff;
    background: #634e4e99;
    font-size: 35px;
    font-weight: 800;
    border-radius: 50px;
    border: 1px solid;
}
i#prev {
    position: absolute;
    left: 20px;
      color: #fff;
    background: #634e4e99;
    font-size: 35px;
    font-weight: 800;
    border-radius: 50px;
    border: 1px solid;
}

It should work.

Comments

[Deivbid]

Yes It is ok but I want to put the prev and next arrow .... to let the user know easily that he/she can use the slider ok

[danny]

codepen.io/Paco_Cervantes/pen/… Hope that help you out

[Deivbid]

That's it ... thank you a lot :) greetings from venezuela