Question

我一直试图让John Higgins（http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/）的这个猫头鹰旋转木马与bootstrap合作。

这个主题使光标像'上一页'一样。和＆＃39; next＆＃39;悬停旋转木马图像时的按钮。但似乎当我将html放入一个响应式的bootstrap容器时，它会以某种方式混淆光标。

当浏览器宽度扩展时，您会注意到箭头不会从右向左切换。请看看小提琴。

/* 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示例对您有用。

看起来问题是你的旋转木马的左边缘不是0px（窗口的最左边），它位于屏幕的中间位置。我的例子没有说明这种情况，因为轮播在水平方向填充了视口。

希望这个小提琴可以解决：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：添加resize事件以在调整窗口大小或旋转设备时重新计算左/右位置

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

如何使用旋转光标在引导程序中制作owl-carousel？

1 个答案: