项目不工作
我有我的HTML代码中的问题滑块,问题是,我想如果它叫什么,在我的情况我有9个项目我想只显示可能的5,创建一个项目滑块他们当有人点击矩形就会向左滑动,并让他在3个离开品牌,但每次我试图做的,没有什么发生,更多的解释,请查看我的代码:项目不工作
<div id="tf-clients" class="text-center">
<div class="overlay">
<div class="container">
<div class="section-title center">
<h2>Some of <strong>our Clients</strong></h2>
<div class="line">
<hr>
</div>
</div>
<div id="clients" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 121px;"><div class="owl-wrapper" style="width: 3192px; left: 0px; display: block;"><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/01.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/02.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/03.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/04.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/05.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/06.png">
</div></div><div class="owl-item" style="width: 228px;"><div class="item">
<img src="img/client/07.png">
</div></div></div></div>
<div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>
</div>
</div>
</div>
为u可以看到这是我的代码,它有9个图像,我已经创建了一个span标签,所以创建一个矩形,所以当我点击span时,它会向左滑动它们显示其他隐藏图像,但它似乎不工作我做错了事,请给我一只手,它会感谢提前感谢。
我最近刚刚与自己相似的东西练习。这是我想出了,看看是否有帮助:
HTML:
<div class="slider-wrapper">
<div class="arrows">
<div class="left"><i class="fa fa-chevron-left fa-lg"></i></div>
<div class="right"><i class="fa fa-chevron-right fa-lg"></i></div>
</div>
<ul class="slides">
<li class="slide one"></li>
<li class="slide two"></li>
<li class="slide three"></li>
<li class="slide one"></li>
</ul>
</div>
CSS:
.slider-wrapper {
margin: auto;
margin-top: 50px;
width: 720px;
height: 400px;
overflow: hidden;
background-color: black;
}
.slider-wrapper > .slides {
list-style: none;
margin: 0;
padding: 0;
width: 2880px; /* 720*4(pictures) */
height: 400px;
}
.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: red; }
.slider-wrapper > .slides .slide {
width: 720px; /* 720px */
height: 400px; /* 400px */
float: left;
}
.slider-wrapper > .arrows {
margin: 170px 0; /* (400-60[height of arrow container])/2 */
position: absolute;
width: 720px;
}
.slider-wrapper > .arrows > .left, .slider-wrapper > .arrows > .right {
height: 60px;
width: 50px;
background-color: gray;
padding: 20px 0; /* (60-20[height of arrow])/2 */
color: white;
text-align: center;
}
.slider-wrapper > .arrows > .left:hover, .slider-wrapper > .arrows > .right:hover {
background-color: black;
cursor: pointer;
}
.slider-wrapper > .arrows > .left { float: left; }
.slider-wrapper > .arrows > .right { float: right; }
JS:
// Set quantified variables
var width = 720;
var animationSpeed = 1000;
var slideCount = 1;
// Set variables to cache the DOM tree parts that are needed (makes performance faster since the program doesn't have to go through the entire tree everytime)
var $leftArrow = $('.arrows > .left');
var $rightArrow = $('.arrows > .right');
var $slider = $('.slider-wrapper > .slides');
var $slides = $slider.find('.slide');
// Runs when the left arrow is clicked
$leftArrow.click(function() {
$slider.animate({'margin-left':'-='+width}, animationSpeed, function() {
// After the animation ends, increase counter and check to see if its on the last image
slideCount++;
if (slideCount == $slides.length) {
slideCount = 1;
$slider.css('margin-left','0');
}
// console.log("Left: " + slideCount);
});
});
// Runs when the right arrow is clicked
$rightArrow.click(function() {
// Check to see if slider is on the first image (which it is initially)
// If it is, change the left margin of the slider to (number of images - 1) * width * -1 (i.e. margin-left of the last image)
var firstImageCheck = function() {
if (slideCount == 1) {
slideCount = $slides.length;
lastPicMargin = width * ($slides.length-1) * -1;
$slider.css('margin-left', lastPicMargin);
}
}
firstImageCheck();
$slider.animate({'margin-left':'+='+width}, animationSpeed, function() {
// After the animation ends, decrease counter and check to see if its on the first image
slideCount--;
firstImageCheck();
// console.log("Right: " + slideCount);
});
});
感谢你就像帮助Bazinga,但我猜ü让我错了什么,我试图做的是想在这个模板https://w3layouts.com/preview/?l=/spirit-8-corporate-multipurpose-flat-bootstrap-responsive-web-template/向下滚动到“我们的一些客户”,你可以看到一些品牌展示,当你点击橙色的矩形,它会滑动其他品牌检查图像更多的解释谢谢http://www6.0zz0.com/2015/08/15/15/974918548.jpg –
好吧我做了一些小的编辑原来和希望现在它符合你的目的:http://jsfiddle.net/v3kLwh0o/2/ – Bazinga
非常感谢你非常感谢你工作非常感谢 –
什么库你在为图书馆使用吗? ÿ? –
我不知道你的意思是什么,但我只是遵循了一个使用相同事物的模板,而我正在处理它,但它似乎不工作https://w3layouts.com/preview/?l=/spirit -8-公司 - 多用途平的自举响应,网页模板/这是模板我们的一些客户是我有只橙色矩形不fonctioning以感谢改用其他品牌 –
我不相同的结果理解这个问题,不好意思..看起来像是自我推销。确保JS文件包含以及'jQuery.js' – SuperVeetz