Question

我正在尝试使我的CSS Snap Point轮播与一些jQuery生成的导航点一起使用。

我的目标是使用户能够单击圆点以在圆盘上滑动或简单擦拭圆盘卡，圆点会自动更新，以向用户显示圆盘正在滑动。

这是我的代码：

               (function($) {
                    $.fn.has_scrollbar = function() {
                          var divnode = this.get(0);
                          if(divnode.scrollHeight > divnode.clientHeight) {
                              return true;
                          }
                          if(divnode.scrollWidth > divnode.clientWidth) {
                              return true;
                          }
                   }
                })(jQuery);

                $(window).on('load resize', function() {
                    if($('.team-players').has_scrollbar()) { 
                       $('.team-players').addClass('overflow-detected');   
                    } else {
                       $('.team-players').removeClass('overflow-detected');   
                    }
                });


var elements = $('.team-players .team-member');
var dotsContainer = $('.css-snap-dots');


$(elements).each(function(i){
     var count = i;
     var dot =  document.createElement('span');
     dot.innerHTML = "&bull;"
     dot.setAttribute("data-id", count);
     dotsContainer.append(dot);
});

$('.css-snap-dots span:first-of-type').addClass('active');

.team-players {
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.team-players .team-member {
    width: 285px;
    /*min-width: 285px;*/
    min-width: 260px;
    background: white;
    text-align: center;
    margin: 0 30px 0 0;
    scroll-snap-align: center;
    /*padding:0 10px;*/
}

.team-players .carousel-stage {
     display: flex;
}
.team-players .team-member:last-of-type {
    margin-right: 0;
}

.team-players .team-member img {
    width: 100%;
}
.team-players .team-member span {
    display: block;
}
.team-players.overflow-detected {
    justify-content: left;
}

.css-snap-dots {
    text-align: center;
    font-size: 40px;
}
.css-snap-dots span {
    display: inline-block;
    margin: 0 10px 0;
}
.css-snap-dots span.active {
    color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: #f5f5f5; padding: 70px 30px; max-width: 320px">
    <div class="who-we-are-today team-players">
    <div class="carousel-stage">
        <div class="team-member">
            <img src="/on/demandware.static/-/Library-Sites-FigleavesSharedLibrary/default/images/aboutus/Tori@2x.jpg" alt="Tori">
            <div class="member-details">
                <span class="member-name">Tori Shelton</span>
                <span class="member-job">Garment Technologist</span>
                <div class="member-quote">“Lipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.”</div>
            </div>
        </div>
        <div class="team-member">
            <img src="/on/demandware.static/-/Library-Sites-FigleavesSharedLibrary/default/images/aboutus/Daniella@2x.jpg" alt="Daniella">
            <div class="member-details">
                <span class="member-name">Daniella Stern</span>
                <span class="member-job">Buyers Admin Assistant</span>
                <div class="member-quote">“Lipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.”</div>
            </div>
        </div>
        <div class="team-member">
            <img src="/on/demandware.static/-/Library-Sites-FigleavesSharedLibrary/default/images/aboutus/Lucy@2x.jpg" alt="Lucy">
            <div class="member-details">
                <span class="member-name">Lucy Caw</span>
                <span class="member-job">Junior Buyer</span>
                <div class="member-quote">“Lipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.”</div>
            </div>
        </div>
    </div>
    </div>
    <div class="css-snap-dots">
          
    </div>
</div>

任何帮助将不胜感激。

谢谢

Answer 1

您可以做的是为其设置一个全局变量和值，例如，如果希望它在单击dot1时向右滚动300，请执行globalVar = -300px并将此wih模板文字添加到滑块包装中，例如transfrom：{{ 1}}，在点2上，globalVar = -600px，将globalVar初始设置为0；

https://github.com/naveenkash/ride-share/blob/master/src/components/how-it-work-slider.vue

如何为CSS捕捉点轮播创建可点击的轮播点？

1 个答案: