点击“下一幅图像正在跳跃”,左下角的交换问题
这似乎是因为在单击时添加了类,然后调用了css
还有其他解决方法吗?
2。上一个按钮在加载时应隐藏,单击下一个按钮时必须启用它。 -**固定**
如果所有图像都向左交换,则必须隐藏“下一步”按钮-“固定” **
感谢您的帮助!
一些JS代码供参考:
$(function () {
var docWidth, docHeight, winWidth, winHeight;
var screenXs = 325;
var screenSm = 600;
var screenMd = 1040;
var screenLg = 1280;
var screenXLg = 1800;
function createFilmStrip() {
var filmSlides = 1;
var centerModeFlag = false;
$(".filmstrip-carousel").each(function () {
if ($(this).find(".slider").hasClass("slick-slider")) {
$(this).find(".slider").find(".slick-slide").removeClass("slick-left slick-right slick-normal slick-middle slick-active slick-cloned");
$(this).find(".slider").slick("unslick");
}
$(this).find(".slider").slick({
dots: false,
infinite: false,
speed: 200,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: false,
centerPadding: '10px',
adaptiveHeight: false,
arrows: true
});
});
}
createFilmStrip();
function updateSlideScales(slick, currentSlide, nextSlide) {
/* if (winWidth > screenSm) { */
console.log(nextSlide)
$.each(slick.$slideTrack[0].children, function (key, value) {
$(this).removeClass("slick-left slick-right slick-middle slick-normal");
var thisIndex = $(this).data("slick-index");
if (thisIndex == nextSlide - 1) {
//debugger;
shiftCard(this, "slick-left")
}
else {
if (thisIndex == nextSlide + 1) {
shiftCard(this, "slick-right")
}
else {
if (thisIndex == nextSlide) {
shiftCard(this, "slick-middle");
}
else {
shiftCard(this, "slick-normal");
}
}
}
/* } */
})
}
function shiftCard(clip, position) {
$(clip);
$(clip).addClass(position);
}
$(".filmstrip-carousel .slider")
.on('afterChange init', function (event, slick, direction) {
console.log('afterChange/init', event, slick, slick.$slides);
// remove all prev/next
slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
for (var i = 0; i < slick.$slides.length; i++) {
var $slide = $(slick.$slides[i]);
if ($slide.hasClass('slick-current')) {
$slide.prev().prev().addClass('prevdiv');
$slide.next().addClass('nextdiv');
break;
}
}
}
)
.on("beforeChange ", function (event, slick, currentSlide, nextSlide, prevSlide) {
if (!$(this).hasClass("non-overlapping")) updateSlideScales(slick, currentSlide, nextSlide);
for (var i = 0; i < slick.$slides.length; i++) {
var $slide = $(slick.$slides[i]);
if ($slide.hasClass('slick-current')) {
$slide.prev().prev().addClass('prevdiv');
$slide.next().addClass('nextdiv');
break;
}
}
slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
});
$(".filmstrip-carousel .slider").slick("slickGoTo", 0);
/* $('.slick-slider .slick-arrow.slick-next').on('click', function () {
//alert('hi')
$(this).parents().find('.slick-prev').css('display', 'block !important');
}) */
})