Question

我使用此代码：http://codepen.io/andytran/pen/xweoPN/来创建信息卡滑块，但我认为代码<div class="card">在放入模态时遇到了一些问题。

我已使用当前代码创建了一支笔，请仔细阅读并建议更改以在点击模式时删除该空白卡片。 https://codepen.io/anon/pen/bWmYxN

在第一张卡片中有一张空白卡片，上面有文字说明它是如何工作的，如何删除那张空白卡？

Answer 1

我对你在这里使用的库不太熟悉。但无论如何，如果没有别的办法，这样的事情可以解决你的问题。

$("#modalBtn").click(function() {
  setTimeout(
    function(){
      $("#next").click();
    }, 250
  );
});

编辑：很抱歉，我忘了你应该为你的按钮添加一个ID来调用模态。

<button id="modalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

Answer 2

您只需将此代码仅放在$（document）.ready

中

window.setTimeout(function() {
   $('#myModal.products').height(283);
   },200);

所以你的jquery代码将是

$(document).ready(function() {

   window.setTimeout(function() {
   $('#myModal.products').height(283);
   },200);
          var getProductHeight =   $('.product.active').height();

  $('.products').css({
    height: getProductHeight
  });


  function calcProductHeight() {
    getProductHeight = $('.product.active').height();

    $('.products').css({
      height: getProductHeight
    });
  }

  function animateContentColor() {
    var getProductColor = $('.product.active').attr('product-color');

    $('body').css({
      background: getProductColor
    });

    $('.title').css({
      color: getProductColor
    });

    $('.btn').css({
      color: getProductColor
    });
  }

  var productItem = $('.product'),
    productCurrentItem = productItem.filter('.active');

  $('#next').on('click', function(e) {
    e.preventDefault();

    var nextItem = productCurrentItem.next();

    productCurrentItem.removeClass('active');

    if (nextItem.length) {

      productCurrentItem = nextItem.addClass('active');
    } else {
      productCurrentItem = productItem.first().addClass('active');
    }

    calcProductHeight();
    animateContentColor();
  });

  $('#prev').on('click', function(e) {
    e.preventDefault();

    var prevItem = productCurrentItem.prev();

    productCurrentItem.removeClass('active');

    if (prevItem.length) {
      productCurrentItem = prevItem.addClass('active');
    } else {
      productCurrentItem = productItem.last().addClass('active');
    }

    calcProductHeight();
    animateContentColor();
  });

  // Ripple
  $('[ripple]').on('click', function(e) {
    var rippleDiv = $('<div class="ripple" />'),
      rippleSize = 60,
      rippleOffset = $(this).offset(),
      rippleY = e.pageY - rippleOffset.top,
      rippleX = e.pageX - rippleOffset.left,
      ripple = $('.ripple');

    rippleDiv.css({
      top: rippleY - (rippleSize / 2),
      left: rippleX - (rippleSize / 2),
      background: $(this).attr("ripple-color")
    }).appendTo($(this));

    window.setTimeout(function() {
      rippleDiv.remove();
    }, 1900);
  });
});

多数民众赞成

希望这有帮助

Answer 3

问题是我忘了将活动类分配给产品类

<div class="product-active">

这将使第一个屏幕出现，如果没有活动课程，那么它将显示一个空白屏幕，因为它不知道要显示什么。一个小错字让我步履蹒跚。无论如何，如果有人犯这样一个愚蠢的错误，这是为了将来参考。

感谢。

放入模态时的空白卡

3 个答案: