如何将上一个和下一个箭头放入物化轮播？

Question

我有第二个旋转木马，通过点击和拖动移动......但我想显示箭头让用户知道这是一个滑块......有没有办法用 materialize 显示它？还是我必须通过其他方式来实现？

Answer 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});

所以像这样？

来源：http://materializecss.com/carousel.html

带按钮：https://codepen.io/Paco_Cervantes/pen/ZLxKpj?q=materialize+carousel&limit=all&type=type-pens

如果您需要以前的特定单词或编辑，请告诉我

Answer 2

希望这会对某人有所帮助；）

当 Materialize.js 版本低于 v0.100 时，试试这个：

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

如果您的 Materialize.js 版本等于或高于 v0.100，请尝试以下操作：

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

我的 HTML 结构：

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

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

Answer 3

这是 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>

打字稿：

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

Answer 4

在幻灯片之后，创建以下 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>

你的初始化：

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

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

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

还有我们的 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;
}

它应该工作。