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

user_7863435 0
Viewed 13615

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 ?

materialize frameworks css
4 Answers
  <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

user_73225120

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');
});
user_106624580

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.

user_20604510

Here is a solution for Angular:

HTML:

<div id="carouselFirst" class="carousel carousel-slider">
  <div class="carousel-fixed-item center clearfix">
    <a (click)="prevSlide($event)" id="carousel-prev" class="movePrevCarousel carousel-arrow left">Previous</a>
    <a (click)="nextSlide($event)" id="carousel-next" class="moveNextCarousel carousel-arrow right">Next</a>
  </div>
  <a *ngFor="let slide of slides" class="carousel-item" [href]="slide.href"><img [src]="slide.src"></a>
</div>

TypeScript:

declare var $: any;
export class SomethingComponent implements OnInit {

  slides = [
    {
      id: 1,
      href: '#one!',
      src: '...'
    },
    .
    .
    .
  ];

  prevSlide = (e) => {
    e.preventDefault();
    e.stopPropagation();
    $('#carouselFirst').carousel('prev');
  }

  nextSlide = (e) => {
    e.preventDefault();
    e.stopPropagation();
    $('#carouselFirst').carousel('next');
  }

constructor() { }

ngOnInit() {
  this.jquery_code();
}

jquery_code() {
  $(document).ready(() => {
    $('.carousel').carousel({
      fullWidth: true,
      indicators: true
    });
  });
}
user_54584250
Related