只需旋转2个幻灯片即可实现Carousel的旋转

发布时间:2020-07-06 15:39

仅对2个幻灯片进行材质化旋转木马就可以通过向右滑动而不是向左移动来向后循环。

截屏: https://drive.google.com/file/d/1OH5QrBH2mI9WMee54R--H1j-AYucH_Vp/view?usp=sharing

有没有办法让它像我有3张幻灯片时那样沿一个方向移动?谢谢!

$('.carousel.carousel-slider.rcma-slider').carousel({
  fullWidth: true,
  indicators: true,
  arrows: false,
  dist: 0,
  padding: 20,
  duration: 400,
  dragged: true
});

// move prev carousel
$('.movePrevCarousel').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.carousel').carousel('prev');
});

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

autoplay();
function autoplay() {
    $('.carousel').carousel('next');
    setTimeout(autoplay, 8500);
}
<div class="carousel-item rcma-slider__item row" style="z-index: -1; opacity: 1; visibility: visible; transform: translateX(0px) translateX(-1024px) translateZ(0px);">
    <div class="rcma-slider__image col s12 m12 l4"> <img class="responsive-img"
            src="//localhost:3000/wp-content/uploads/2020/03/community-photo-424x400.jpg" alt="RCMA Photo"> </div>
    <!-- rcma-slider__image -->
    <div class="rcma-slider__text-wrapper  col s12 m12 l8">
        <div class="rcma-slider__text-container">
            <h2 class="rcma-slider__heading white-txt">The Kids</h2>
            <div class="rcma-slider__sub-title"></div>
            <div class="rcma-slider__quote">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, fuga sequi accusantium soluta, similique quidem odio asperiores esse modi error quaerat alias in deleniti.</div>
        </div>
    </div>
</div><!-- carousel-item -->

<div class="carousel-item rcma-slider__item row active"
    style="transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px); z-index: 0; opacity: 1; visibility: visible;">
    <div class="rcma-slider__image col s12 m12 l4"> <img class="responsive-img"
            src="//localhost:3000/wp-content/uploads/2020/04/Alumni-Fernando-Rodriguez-424x400.jpg"
            alt="RCMA Photo"> </div><!-- rcma-slider__image -->
    <div class="rcma-slider__text-wrapper  col s12 m12 l8">
        <div class="rcma-slider__text-container">
            <h2 class="rcma-slider__heading white-txt">Eaque deserunt quia</h2>
            <div class="rcma-slider__sub-title"></div>
            <div class="rcma-slider__quote">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque deserunt quia vero ad enim officia quos, numquam ut amet </div>
        </div>
    </div>
</div><!-- carousel-item -->

<div class="carousel-fixed-item">
    <div class="rcma-slider__nav">
        <a href="PreviousSlide" class="movePrevCarousel middle-indicator-text content-indicator"><i class="material-icons left middle-indicator-text">chevron_left</i></a>
        <a href="NextSlide" class="moveNextCarousel middle-indicator-text content-indicator"><i class="material-icons left middle-indicator-text">chevron_right</i></a>
    </div>
    <ul class="indicators">
        <li class="indicator-item"></li>
        <li class="indicator-item active"></li>
    </ul>
</div>
回答1