小编Mar*_*Mar的帖子

带有YouTube视频的Carousel Slider

是否可以使用JQuery构建YouTube视频滑块?我想展示一些我上传的内容.

找到了一些答案,但是使用特定的框架,如果有可能我想坚持简单的事情.

我发现这段代码非常有用,但我似乎无法使它工作.

的jsfiddle

$('.play-button').on('click', function () {
    $(this).hide();
    $(this).parent().fadeOut();
    $(this).parent().siblings('.slider-video')[0].play();
});

$('.slider-video').on('play', function () {
    $(this).attr('controls', '1');
});

// Additionnal code for the slider
var pos = 0,
    slides = $('.slide'),
    numOfSlides = slides.length;

function nextSlide(){
    stopCurrentVideo();
    slides.eq(pos).animate({left:'-100%'},500);
    pos = pos >= numOfSlides-1 ? 0 : ++pos;
    slides.eq(pos).css({left:'100%'}).animate({left:0},500);
}

function previousSlide(){
    stopCurrentVideo();
    slides.eq(pos).animate({left:'100%'},500);
    pos = pos == 0 ? numOfSlides-1 : --pos;
    slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
}

function stopCurrentVideo(){
    $('.slider-video:eq('+pos+')').load().removeAttr('controls')
    .siblings('.overlay-content').show().find('.play-button').show();
}

$('.left').click(previousSlide);
$('.right').click(nextSlide);
Run Code Online (Sandbox Code Playgroud)

javascript youtube jquery slider carousel

9
推荐指数
1
解决办法
5206
查看次数

SASS - 除了一个属性之外,如何为两个类指定相同的样式?

我有一个 SASS 样式表,我想为两个类(.class 和 .otherclass)分配相同的样式,除了一个属性(之前:),它应该为 .otherclass 具有另一个值。

这是我目前拥有的代码:

.class, .otherclass {

    p { font-family:arial;
         &before: 
              @extend .class-one {}
    }

    ~ .extraclass {}
}
Run Code Online (Sandbox Code Playgroud)

谢谢

css styles sass

0
推荐指数
1
解决办法
4522
查看次数

标签 统计

carousel ×1

css ×1

javascript ×1

jquery ×1

sass ×1

slider ×1

styles ×1

youtube ×1