Question

由于我没有找到任何关于此的话题，我决定创建它。我试图做到这一点时挣扎着：我有一个滑块和手风琴标签。关键是当用户点击手风琴选项卡时，滑块应该随着标签内容的相同而改变。如果我单击tab1，滑块应跳转到滑块1，如果tab2-＆gt; slider2，依此类推。

我设法做了什么＆＃39;是随着标签内容的变化同时移动滑块（左/右），但这不是我需要做的......

Codepen与我迄今取得的成就：https://codepen.io/anon/pen/owRxwK

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
setInterval(function () {
    moveRight();
}, 3000);

});


var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});


if($(window).width() > 768){



// Hide all but first tab content on larger viewports
$('.accordion__content:not(:first)').hide();

// Activate first tab
$('.accordion__title:first-child').addClass('active');

} else {

$('.accordion__content').hide();
};


$( ".accordion__content" ).wrapInner( "<div class='overflow-scrolling'>        
</div>" );
$('.accordion__title').on('click', function() {
$('.accordion__content').hide();
moveRight();

提前致谢。

同时激活滑块和手风琴选项卡内容

0 个答案: