主页 / user-466857

Ev Tr's questions

Martin Hope
Ev Tr
Asked: 2024-11-09 04:26:05 +0000 UTC
  • 5

你需要制作一个旋转木马，中间有一张大图片，两侧有小图片，如图所示：

在此输入图像描述

我决定使用 Slick 滑块。 Slick 有一个相应的配置centerMode: true用于类似的目的，有相当多的使用示例。使用 CSS 属性放大中心图像：transform: scale();

scale();但是......可以设置的最大值1.5是当超过该阈值并进一步增加时 - 中心图片与相邻图片重叠，并且在大尺寸时完全覆盖它们。使用 CSS 属性强制放大具有中心图像的容器width会导致中心图像从中心移至侧面 - 尺寸和居中由 Slick 脚本计算并根据图像的统一大小进行定制。

我如何使用 Slick 解决此问题，或者您可以推荐另一个库脚本来完成此任务吗？

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '0px',
    nextArrow: '.project__next',
    slidesToShow: 5
  });
});
.slick-center img {
  opacity: 1;
  transform: scale(1.5);
}

.slick-slide img {
  width: 80px;
  height: 80px;
}

.slick-slide {
  padding-top: 20px;
}

.slick-center {
  padding-top: 0;
}

.project__next img{
  width:50px;
  height:20px;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />

<div class="slider">      
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">

  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
<div>
    <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
  </div>
</div>
<div class="project__next">
    <span>Next</span><img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg">
  </div>

javascript
Martin Hope
Ev Tr
Asked: 2022-04-06 22:10:50 +0000 UTC
  • 0

有来自用户的重复消息。推测的原因是表单处理程序工作了很长时间，在此期间用户多次拉动提交按钮。我自己无法重现这种情况 - 我点击重新发送按钮不，但可能有浏览器可以使用。很明显，您需要治疗“疾病的原因”，而不是症状 - 处理那些挂在表单回调上并导致抑制的事件，但现在您需要放置一个临时补丁。我试图使按钮在按钮单击或表单提交事件时处于非活动状态。但是 disabled 属性不会添加到标记中。可能是因为提交表单后页面被重新加载并且此时的标记不能被Javascript更改？（或没有？）是否可以在页面重新加载期间更改客户端标记中的某些内容？客户端可以在重新加载期间再次拉按钮吗？这可能在哪些浏览器上？按钮代码：

<input type="submit" accesskey="s" tabindex="6" name="post" value="Отправить" class="button1 default-submit-action">

表格标题：

<form id="postform" method="post" action="./posting.php?mode=post&amp;f=33" enctype="multipart/form-data">

我尝试过但不起作用的方法：

$('input[name="post"]').on('click', function() {                        
                        $('input[name="post"]').prop('disabled', true);
                    });

更多的：

$(this).find('input[type="submit"]').attr('disabled','disabled');

$('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });
javascript