是否可以像 Bootstrap Carousel 允许的那样，仅使用 HTML 为 Slick Slider 创建自定义分页点。
Bootstrap 分页示例
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
我知道您可以像这样创建自定义点；
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
}
但是这种方法对我想要实现的目标不起作用。这是我希望能够用作我的分页导航的内容。
jQuery(document).ready(function($){
$('.step').click(function(){
var elem = $(this);
var pointer = $('#pointer');
if( elem.hasClass('one') ){
pointer.css('left', '0');
}else if( elem.hasClass('two') ){
pointer.css('left', '20%');
}else if( elem.hasClass('three') ){
pointer.css('left', '40%');
}else if( elem.hasClass('four') ){
pointer.css('left', '60%');
}else{
pointer.css('left', '80%');
}
$('.step').removeClass('active');
elem.addClass('active');
});
});.steps {
position: relative;
margin-top: 4rem;
padding-top: 14rem;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.steps #pointer {
position: absolute;
top: 0;
left: 0;
width: 20%;
text-align: center;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;
}
.steps #pointer svg {
width: 10rem;
height: auto;
}
.steps .step {
width: 20%;
text-align: center;
}
.steps .step svg circle {
fill: blue;
-webkit-transition: fill 0.3s ease;
-o-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.steps .step p {
font-size: 1.8rem;
font-weight: 600;
color: blue;
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0s, opacity 0.3s ease;
-o-transition: max-height 0s, opacity 0.3s ease;
transition: max-height 0s, opacity 0.3s ease;
}
.steps .step.active svg circle {
fill: lightblue;
}
.steps .step.active p {
opacity: 1;
max-height: unset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>slider here</div>
<div class="steps">
<div id="pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68.01 81.14"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M56.73,56a33.13,33.13,0,0,1-2.33,2.41Z" style="fill: #2daae2;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #2daae2;"/><path d="M32.52,0C14.56,0,0,15,0,33.56A34.07,34.07,0,0,0,8.27,55.92l0,0,2.33,2.41,0,0L32.52,81.14,54.38,58.4l0,0L56.73,56l0,0A34.07,34.07,0,0,0,65,33.56C65,15,50.48,0,32.52,0Zm0,60.16C18.25,60.16,6.69,48.22,6.69,33.5S18.25,6.83,32.52,6.83,58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16Z" style="fill: #2daae2;"/><path d="M57.71,55.92l-.05,0,.05,0Z" style="fill: #2daae2;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #fff;"/><path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill:#8dd2f3;"/><path class="cls-4" d="M32.52,54.17c-11.06,0-20-9.26-20-20.67s9-20.68,20-20.68,20,9.26,20,20.68S43.59,54.17,32.52,54.17Z" style="fill: none;"/><path class="cls-4" d="M0,0V81.14H68V0ZM6.69,33.5c0-14.73,11.56-26.67,25.83-26.67S58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16,6.69,48.22,6.69,33.5Z" style="fill: none;"/></g></g></svg>
</div>
<div class="step one active">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step two">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step three">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step four">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
<div class="step five">
<svg height="40" width="40"><circle cx="50%" cy="50%" r="50%"/></svg>
<p>Sign up</p>
</div>
</div>
最佳答案
您可以使用纯 CSS/HTML 来做到这一点。 Slick-slider 在事件幻灯片上使用 slick-active。在 CSS 中使用指针 pseudoe element ::before 和 Sign up with ::after。
.slick-dots {
padding-top: 100px;
}
.slick-dots .slick-active {
position:relative;
}
.slick-dots .slick-active::before {
content: "";
/* use the ppointer instead of this link */
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png) top center no-repeat;
position:absolute;
top: -70px;
left: -25px;
width: 50px;
height: 50px;
border: 1px solid red;
}
.slick-dots .slick-active::after {
content: "Sign Up ";
position:absolute;
top: 30px;
left: -50px;
width: 100px;
border: 1px solid red;
}
$().ready(function(){
$('.slick-carousel').slick({
arrows: true,
centerPadding: "0px",
dots: true,
slidesToShow: 1,
infinite: false
});
});body {
background: #333;
font-family: sans-serif;
margin: 0;
padding: 0;
}
body .slick-slide .slide-content {
margin: 0 10%;
padding: 50px 100px;
background: #fff;
}
body .slick-list {
margin: 20px 0px;
}
body .slick-prev,
body .slick-next {
position: absolute;
right: 10%;
background: #777;
border: none;
color: transparent;
width: 30px;
height: 30px;
}
body .slick-prev:before,
body .slick-next:before {
content: ">";
color: #fff;
font-size: 25px;
}
body .slick-prev {
left: 10%;
}
body .slick-prev:before {
content: "<";
}
body .slick-dots {
list-style: none;
margin: 0 auto;
text-align: center;
}
body .slick-dots li {
display: inline-block;
}
body .slick-dots li button {
transition: 0.2s background-color ease-in-out 0s;
border: none;
padding: 0;
color: transparent;
width: 10px;
height: 10px;
background-color: #777;
margin-right: 10px;
border-radius: 50%;
}
body .slick-dots li.slick-active button {
background-color: #fff;
}
.slick-dots {
padding-top: 100px;
}
.slick-dots .slick-active {
position: relative;
}
.slick-dots .slick-active::before {
content: "";
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png)
top center no-repeat;
position: absolute;
top: -70px;
left: -25px;
width: 50px;
height: 50px;
border: 1px solid red;
}
.slick-dots .slick-active::after {
content: "Sign Up ";
position: absolute;
top: 30px;
left: -50px;
width: 100px;
border: 1px solid red;
}<link href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="slick-carousel">
<div><div class="slide-content">1 your content</div></div>
<div><div class="slide-content">2 your content</div></div>
<div><div class="slide-content">3 your content</div></div>
<div><div class="slide-content">4 your content</div></div>
<div><div class="slide-content">5 your content</div></div>
<div><div class="slide-content">6 your content</div></div>
<div><div class="slide-content">7 your content</div></div>
<div><div class="slide-content">8 your content</div></div>
<div><div class="slide-content">9 your content</div></div>
<div><div class="slide-content">10 your content</div></div>
</div>
将 SVG 指针用作外部文件。
这是一个代码笔。
使用这些。如果它们不起作用，请在私有(private)/隐身窗口中打开。并且您不应该使用 AdBlocker。
请记住，您需要调整 ::before 和 ::after 元素的位置和大小。
关于jquery - Slick Slider 自定义 HTML 分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55026650/
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>