Question

我正在使用bxslider构建一个漂亮的轮播，一次显示2个项目。这是我的HTML：

<ul class="bxslider clearfix">
            <li>
                <span>Case Study</span>
                <h3>The London Business School</h3>
                <a href="#">+ See Full Case Study</a>
            </li>
            <li>
                <span>Case Study</span>
                <h3>The Terra Santa College</h3>
                <a href="#">+ See Full Case Study</a>
            </li>

            <li>
                <span>Case Study</span>
                <h3>Case Study number 3</h3>
                <a href="#">+ See Full Case Study</a>
            </li>
       </ul>

这是我的JS：

jQuery('#case-studies .bxslider').bxSlider({
  mode: 'horizontal',
  useCSS: false,
  moveSlides: 1,
  pager: false,
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  autoHidePager: true,
  slideMargin: 10
});

效果很好，每次点击显示2个项目。我的问题是每张幻灯片左侧有一个简单线条的背景图片，我试图仅从第一个项目中删除背景。

我原以为我可以像我这样在李项目中使用最后一个孩子：

#case-studies .bxslider li:first-child {
  background: none !important;
}

但是在我检查了网站之后，bxslider循环动画克隆了你创建一个循环所拥有的幻灯片的数量，并且第一个hcild不是你所看到的那个...

无论如何我可以在出现的第一个项目中添加一个类吗？感谢

Answer 1

要删除相应末端的左箭头和右箭头，您必须在初始化脚本中添加另外两个选项。添加最终代码后会看起来像

var slider = $('.bxslider').bxSlider({
    mode: 'horizontal',
    useCSS: false,
    moveSlides: 1,
    pager: false,
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 360,
    autoHidePager: true,
    slideMargin: 10,
    infiniteLoop : false, // Newly added code
    hideControlOnEnd : true, // Newly added code
    onSliderLoad : function(currentIndex){
        $('.bxslider li').removeClass('current');
        $('.bxslider li').eq(currentIndex).addClass('current');
    },
    onSlideAfter : function($element){
        $('.bxslider li').removeClass('current');
        $element.addClass('current');
    }
});

要获取视图中的第一张幻灯片，您必须运行以下脚本

$('.bxslider li').eq(slider.getCurrentSlide())

注意：只有在初始化滑块时已通过infiniteLoop : false和hideControlOnEnd : true，此代码才有效。

提示：如果hideControlOnEnd选项为true，则滑块不会克隆元素。

<强>更新

查看此fiddle

如果您有任何疑问，请发表评论

bxslider loop carousel第一个孩子问题

1 个答案: