如何使 owl-带有旋转光标的旋转木马在 bootstrap 中工作？

Question

我一直在尝试让 John Higgins (http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/) 的 owl-carousel 与 bootstrap.

一起使用

此主题使鼠标悬停在旋转木马图像上时像 'prev' 和 'next' 按钮一样。但似乎当我将 html 放入 bootstrap 的响应容器时，它以某种方式弄乱了光标。

当浏览器宽度扩大时，您会注意到箭头不会从右向左切换。请查看 fiddle.

https://jsfiddle.net/ftpptf/c6nw8yzt/

/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
    display: block;
}
}
.js--visible {
display: block;
 }
.cursor__icon {
width:32px;
height:32px;
background-image:               url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw  MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa    W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/

我设置了 .cursor .cursor__icon position = absolute 这似乎有帮助，但它仍然表现得很奇怪。

我尝试了很多不同的设置，但没有任何好的结果！

非常感谢任何帮助 - 提前致谢！

Answer 1

很高兴 Codepen 示例对您有用。

看起来问题是您的旋转木马的左边缘不在 0 像素（window 的最左边），它在屏幕的中间。我的示例没有考虑这种情况，因为旋转木马水平填充了视口。

希望这个 fiddle 解决了这个问题：https://jsfiddle.net/jonjhiggins/z915kbe3/

所做的更改是：

CSS：将轮播和图像设为 100% 宽度而不是 800px（这样它会响应地填充您为其父项设置的宽度）
```
.carousel {
    width: 100%;
    cursor: none;
}
.carousel img {
    width:100%;
}
```

JS：更改 initLayout 以解决轮播不在屏幕最左侧的情况

var _initLayout = function () {
    left = $element.offset().left;
    right = left + ($element.width() / 2);
};

JS：添加调整大小事件以在 window 调整大小或设备旋转时重新计算 left/right 位置

var _initEvents = function () {
    $element.on('mousemove', _mousemove)
        .on('click', _click);
    $(window).on('resize', _initLayout);
};

如何使 owl-带有旋转光标的旋转木马在 bootstrap 中工作？

How to make owl-carousel with rotating cursor work in bootstrap?

twitter-bootstrap-3

navigation

owl-carousel