Question

如何在侧面的滑块顶部获得上一个和下一个按钮？就像这样：http://soledad.pencidesign.com/soledad-hipster/

这就是我现在http://testar.kashmaizat.se/的样子

我正在使用Owl Carousel滑块...

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
	  center:true, 
	  items:2, 
	  loop:true, 
	  nav:true, 
	  margin:10, 
	  stagePadding: 20});
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

<html>
<head>

<link href="http://testar.kashmaizat.se/wp-content/themes/ett/css/owl.theme.default.min.css" rel="stylesheet"/>
<link href="http://testar.kashmaizat.se/wp-content/themes/ett/css/owl.carousel.min.css" rel="stylesheet"/>
<link href="http://testar.kashmaizat.se/wp-content/themes/ett/css/owl.carousel.css" rel="stylesheet"/>

<script src="http://testar.kashmaizat.se/wp-content/themes/ett/js/owl.carousel.js"></script>
<script src="http://testar.kashmaizat.se/wp-content/themes/ett/js/jquery.min.js"></script>
<script src="http://testar.kashmaizat.se/wp-content/themes/ett/js/owl.carousel.min.js"></script>
<script src="http://testar.kashmaizat.se/wp-content/themes/ett/js/jquery.mousewheel.min.js"></script>
<script src="http://testar.kashmaizat.se/wp-content/themes/ett/js/jquery.mousewheel.js"></script>



</head>
<body>

<div class="owl-carousel">
  <div>  
	  <img src="http://kashmaizat.se/other/images/johannaflex.jpg" />
  </div>
  
  <div> 
	  <img src="http://kashmaizat.se/other/images/flexsliderimg.jpg" /> 
  </div>
  
  <div> 
    <img src="http://kashmaizat.se/other/images/flexsliderimgtwo.jpg" /> 
  </div>

</div>

</body>
</html>

Answer 1

一种解决方法是设置位置：相对于主幻灯片容器（包含所有幻灯片元素）的相对位置。然后，将.owl-prev和.owl-next位置设置为：absolute;并从那里定义参数。因此，例如，您需要将.owl-prev保留为：0; .owl-next是正确的：0：然后，对每个属性的top属性使用负值。

您需要设置position：相对于主容器，以便相对于其在DOM中的正常位置。然后，包含在主容器内的元素的绝对位置对该容器是绝对的，这使您可以更具体地放置它们。

总结：

    .your-slideshow-container-class {
      position:relative;
    }

    .owl-prev, .owl-next {
        position:absolute;
     }

    .owl-prev {
        left:0;
        top: 200px;
     }

     .owl-next {
        right:0;
        top:200px;
     }

我希望这会有所帮助！：）

Answer 2

您可以使用Wix，它们具有内置的滑块和非常好的初学者友好的前端。

侧面的猫头鹰轮播导航箭头

2 个答案: