问题描述
希望你一切都好。
我是带着挑战来到这里的（至少对我来说已经证明这是一个棘手的挑战）。 我正在尝试使用“猫头鹰轮播”来创建一个不错的导航，看起来猫头鹰点的行为符合预期，并将我带到了我需要的轮播部分。但是，我的问题出现在轮播的第一部分，我在其中添加了“a”标签，旨在帮助我导航到特定部分。请看视觉： Owl carousel visual explained
我需要添加一个额外的导航层，因为我需要在第一个猫头鹰项目（红点）上确定 4 个特定区域以在轮播中导航。
请记住，我的 HTML 中没有完整的 Owl carousel 代码，因为它自动来自库。这就是为什么我必须使用 :before,add(Class),attr('id') 才能进行操作。
下面的代码不会显示正确的输出，但请在此处找到 DOM 的外观：DOM next to visual
我一直在尝试通过简单的 Js 将特定的 id 添加到 owl 项目，以便我可以操作和使用锚标记。 Connecting owl items with HTML 然而，生活并没有那么容易，代码允许我转到第二个选项卡，但不允许我返回。第二个标签开始表现得像 N.1。
显然，我的第一个元素并没有停止“活动”，尽管锚标签可以将我带到我想要的地方，但它会占据第一个位置并完全忽略我的轮播的第一部分：Anchor tag. Final image. Promise!
我希望这是有道理的。也希望有人能救我。
感谢您的时间
戴安娜 x
< script >
$(document).ready(function() {
function myFunction(x) {
x.classList.toggle("change");
}
$('.tutorial.owl-carousel').owlCarousel({
loop: false,margin: 0,nav: true,navText: ["⟨⟨","⟩⟩"],autoplay: false,responsive: {
0: {
items: 1
},500: {
items: 1
},768: {
items: 2
},992: {
items: 2
},}
})
});
</script>
<!-- Adding class to owl item so I can manipulate -->
<script>
$(document).ready(function(){
$(".tutorial.owl-carousel.owl-theme .owl-stage div:nth-child(2) .Category-Crosslinks").addClass("RP-to-Beauty-studio");
$('.RP-to-Beauty-studio').attr('id','RP-to-Beauty-studio');
});
</script><style type="text/css">.spa-background {
position: relative;
z-index: 0;
}
/*THUMBNAILS--------------------------*/
.tutorial.owl-carousel.owl-theme .owl-dots div:nth-child(1) span {
background-colour: #ddd;
width: 10px;
height: 10px;
}
.tutorial.owl-carousel.owl-theme .owl-dots div:nth-child(2) span {
background-colour: #ddd;
width: 10px;
height: 10px;
}
.tutorial.owl-carousel.owl-theme .owl-dots div:nth-child(3) span {
background-colour: #ddd;
width: 10px;
height: 10px;
}
/* CAROUSEL NAV LEFT/RIGHT------------------------------------------------------------*/
.tutorial.owl-theme .owl-dots .owl-dot {
background: #f8f8f8;
margin: 2px 4px 4px 2px;
border-radius: 10px;
}
.tutorial.owl-theme .owl-dots .owl-dot.active {
background: #994a92;
color: #fff;
}
.tutorial.owl-theme .owl-dots .owl-dot span {
width: 70px;
height: 70px;
margin: 5px 7px 60px;
}
.tutorial.owl-theme.owl-theme .owl-nav [class*=owl-] {
padding: 30px 15px;
}
.tutorial.owl-theme .owl-next,.tutorial.owl-theme .owl-prev {
top: 40%;
}
.tutorial.owl-theme .owl-prev {
-webkit-border-radius: 0px 70px 70px 0px !important;
-moz-border-radius: 0px 70px 70px 0px !important;
border-radius: 0px 70px 70px 0px !important;
}
.tutorial.owl-theme .owl-next {
-webkit-border-radius: 70px 0px 0px 70px !important;
-moz-border-radius: 70px 0px 0px 70px !important;
border-radius: 70px 0px 0px 70px !important;
}
/*HOTSPOT------------------------------------------ */
.hotspot {
width: 15px;
height: 15px;
background-color: #ff354f;
border-radius: 50%;
/*position: absolute;*/
/*z-index: 2;*/
animation: wave 1s infinite;
cursor: pointer;
}
.sdg-wrapper .hotspot-links a {
display: block;
/*width: 15px;
height: 15px;*/
position: absolute;
z-index: 3;
padding: 30px;
}
@keyframes wave {
from {
Box-shadow: 0 0 0 0 #eb008b;
}
to {
Box-shadow: 0 0 0 10px #9acd3210;
}
}
.hotspot::before {
content: attr(text);
width: max-content;
position: absolute;
background-color: #ff354f;
color: #fff;
left: 50%;
transform: translateX(-50%);
top: -16px;
padding: 8px 16px;
font-size: 13px;
border-radius: 3px;
display: none;
}
.hotspot::after {
content: "";
border-color: transparent transparent #ff354f;
border-width: 0 8px 6px;
border-style: solid;
position: absolute;
top: 19.5px;
left: 40%;
transform: rotate(180deg);
display: none;
}
.hotspot:hover::before,.hotspot:hover::after {
display: block;
}
/*RECEPTION HOTSPOTS ------------------------------*/
.beauty-salon {
left: 42%;
top: 28%;
}
/*BEAUTY STUdio HOTSPOTS ------------------------------*/
.nail-bar {
left: 42%;
top: 28%;
}
.brow-and-lash {
right: 7%;
bottom: 48%;
}
.makeover {
left: 1%;
top: 32%;
}
.beauty-studio-blog {
right: 30%;
bottom: 14%;
}
/*HAIR EMPORIUM HOTSPOTS-----------------------------------*/
.hair-colourants {
left: 34%;
top: 15%;
}
.Styling {
right: 8%;
bottom: 54%;
}
.hair-wash {
left: 5%;
bottom: 24%;
}
.hair-emporium-blog {
right: 37%;
bottom: 16%;
}
</style></div><div class="tutorial owl-carousel owl-theme">
<div class="Category-Crosslinks">
<img class="spa-background" alt="" src="" />
<!-- 1rst section of the carousel -->
<div class="hotspot-links">
<!-- anchor linking to 2nd section of the carousel -->
<a class="beauty-salon" href="#RP-to-Beauty-studio">
<div class="hotspot" text="Nail Bar"></div>
</a>
<!-- anchor linking to 3rd section of the carousel -->
<a class="hair-emporium" href="">
<div class="hotspot" text="hair-emporium"></div>
</a>
<!-- anchor linking to 4th section of the carousel -->
<a class="pamper-time" href="">
<div class="hotspot" text="pamper-time"></div>
</a>
<!-- anchor linking to 5th section of the carousel -->
<a class="baber-shop" href="">
<div class="hotspot" text="baber-shop"></div>
</a>
</div>
</div>
<!-- 2nd section of the carousel 'Beauty Studio' -->
<div class="Category-Crosslinks">
<img class="spa-background" alt="" src="" />
<div class="hotspot-links">
<a class="nail-bar" href="external-link">
<div class="hotspot" text="Nail Bar"></div>
</a>
<a class="brow-and-lash" href="external-link">
<div class="hotspot" text="Eyelashes & brows"></div>
</a>
<a class="makeover" href="external-link">
<div class="hotspot" text="Makeover"></div>
</a>
<a class="beauty-studio-blog" href="external-link">
<div class="hotspot" text="How to"></div>
</a>
</div>
</div>
<!-- 3rd section of the carousel 'Hair Emporium' -->
<div class="Category-Crosslinks">
<img class="spa-background" alt="" src="" />
<div class="hotspot-links">
<a class="hair-colourants" href="external-link">
<div class="hotspot" text="Colourants"></div>
</a>
<a class="Styling" href="external-link">
<div class="hotspot" text="Styling"></div>
</a>
<a class="hair-wash" href="external-link">
<div class="hotspot" text="Hair treatment"></div>
</a>
<a class="hair-emporium-blog" href="external-link">
<div class="hotspot" text="How to"></div>
</a>
</div>
</div>
</div>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）