需要jquery & litte html css改进Owl Slideshow导航(分页)
需要jquery & litte html css改进Owl Slideshow导航(分页)
提问于 2016-03-31 17:02:58
我只是做了一个skelenton &化妆猫头鹰幻灯片与标签导航。我需要jquery来旋转幻灯片和文本导航。任何人都可以在这方面提供帮助，这是可行的。
参考演示：http://www.suprafootwear.com/
这就是我使用本地服务器以html和css结尾的内容。
我也希望在代码上有一些可移植性，比如更少的div，以及位置和溢出问题。
我在引用演示中显示的全宽幻灯片有点混乱，所以建议我并用更好的解决方案纠正我，这样我就可以申请到我的计算机并以自豪的方式运行：)
jQuery('.owl-carousel').owlCarousel({
items: 1,
center: true,
margin: 0,
callbacks: false,
autoplayHoverPause: true,
loop: true,
autoplay: true,
autoplayTimeout: timer,
URLhashListener: false,
startPosition: 0,
responsiveClass:true,
responsive:{
0:{
dots: true,
stopOnHover: true,
},
770:{
nav: false,
dots: false,
onChange: selectTab,
}
}
});body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #fff;
font-weight: 300;
font-size: 15px;
color: #333;
}
.container
{
width:100%;
max-width:1024px;
position:relative;
background-color:#f39c12;
height:auto;
}
section{
display:block;
}
.c-slider #tab-container {
position:relative;
width:100%;
max-width:960px;
height:auto;
}
.c-slider #tab-container span {
display: block;
float: left;
width: 22.9995%;
margin-bottom:10px;
padding:10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
margin:5px;
}
.c-slider #tab-container a:nth-of-type(4) span
{
border-right: 0;
}
.c-slider #tab-container a, .c-slider #tab-container a:hover, .c-slider #tab-container a:active, .c-slider #tab-container a:visited
{
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
.c-slider #tab-container span:hover
{
color: #fff;
background: #444;
}
.c-slider #tab-container span.active
{
color: #fff;
background: #444;
opacity:0.5;
}
.c-slider #tab-container a span.active, .c-slider #tab-container a:hover span.active, .c-slider #tab-container a:active span.active, .c-slider #tab-container a:visited span.active
{
color: #fff;
}
.c-slider #slider_time {
display: none;
}
.demo-6 .ow-slider-wrapper {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.demo-6 .bg-img {
padding: 200px;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
.owl-carousel .owl-item img {
display: block;
width:100%;
height:auto;
}<!DOCTYPE html>
<html>
<head>
<title>FullWidthOwl Slider</title>
<link rel="stylesheet" type="text/css" href="http://www.suprafootwear.com/skin/frontend/rwd/supra/css/owl/owl.carousel.min.css">
</head>
<body>
<div class="container demo-6">
<div id="slider" class="ow-slider-wrapper">
<div class="owl-carousel owl-loaded owl-drag">
<div class="owl-item">
<div class="item">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="">
</div>
</div>
<div class="owl-item">
<div class="item">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
</div>
</div>
<div class="owl-item">
<div class="item">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
</div>
</div>
<div class="owl-item">
<div class="item">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots disabled"></div>
</div>
</div>
</div>
</div>
**<section class="c-slider">
<div id="tab-container">
<a><span class="">TextOne</span></a>
<a><span class="">TextTwo</span></a>
<a><span class="">TextThree</span></a>
<a><span class="">TextFour</span></a>
</div>
<span id="slider_time">5000</span>
<div style="clear:both"></div>
</section>**
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://www.suprafootwear.com/skin/frontend/rwd/supra/js/owl/owl.carousel.min.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-31 17:12:04
尝试像这样更改选项卡并添加js代码https://jsfiddle.net/jorge182/7zhmd3ju/1/
<a><span id="1" class="">TextOne</span></a>
<a><span id="2" class="">TextTwo</span></a>
<a><span id="3" class="">TextThree</span></a>
<a><span id="4" class="">TextFour</span></a>
$('span').on('click', function(){
var element = this.id;
$('.owl-carousel').trigger("to.owl.carousel",element);
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36339484
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号