基于Layui轮播组件设计的滑块样式

分享 未结 6 589
Featwork
Featwork 2019-7-17
悬赏:20飞吻
话不多说,直接上演示地址: http://demo.ostui.com/layui/001/index.html



css:
.tpt-carousel {background: rgba(0,0,0,0);margin: 0 auto;padding: 0 80px;}
.tpt-carousel>[carousel-item]>* {background: rgba(0,0,0,0);}
.tpt-carousel>[carousel-item]:before {width: 0;}
.tpt-carousel .layui-carousel-ind li {background: #e2e2e2;width: 40px;height: 5px;margin: 0 3px;border-radius: 0;}
.tpt-carousel .layui-carousel-ind li.layui-this {background: #1e9fff;}
.tpt-carousel[lay-indicator=outside] .layui-carousel-ind ul {background-color: rgba(0,0,0,0);}
.tpt-carousel .tpt-li {width: 33.333%;float: left;}
.tpt-carousel .tpt-a{margin: 15px;background: #fff;}
.tpt-carousel .tpt-a img{width: 100%;}
.tpt-carousel .tpt-b{padding: 30px;background: #f4f4f4;}
.tpt-carousel .tpt-b h3{font-size: 18px;color: #000;margin-bottom: 10px;font-weight: 700;}
.tpt-carousel .tpt-b p{font-size: 14px;color: #333;line-height: 22px;}
html:
<div style="margin-top: 200px">
<div class="tpt-carousel layui-carousel" id="test1" lay-filter="test1">
<div carousel-item>
<div>
<div class="tpt-li">
<div class="tpt-a">
<img src="1.jpg">
<div class="tpt-b">
<h3>你说什么垃圾?</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="2.jpg">
<div class="tpt-b">
<h3>垃圾分类,举手之劳!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="3.jpg">
<div class="tpt-b">
<h3>垃圾分类,绿色生活!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
</div>
<div>
<div class="tpt-li">
<div class="tpt-a">
<img src="1.jpg">
<div class="tpt-b">
<h3>你说什么垃圾?</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="2.jpg">
<div class="tpt-b">
<h3>垃圾分类,举手之劳!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="3.jpg">
<div class="tpt-b">
<h3>垃圾分类,绿色生活!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
</div>
<div>
<div class="tpt-li">
<div class="tpt-a">
<img src="1.jpg">
<div class="tpt-b">
<h3>你说什么垃圾?</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="2.jpg">
<div class="tpt-b">
<h3>垃圾分类,举手之劳!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
<div class="tpt-li">
<div class="tpt-a">
<img src="3.jpg">
<div class="tpt-b">
<h3>垃圾分类,绿色生活!</h3>
<p>它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,简洁而不失强劲,灵活而优雅。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js:
layui.use('carousel', function(){
var carousel = layui.carousel;
carousel.render({
elem: '#test1',
width: '1200',
height: '350',
indicator: 'outside',
arrow: 'always'

});
});
回帖