Question

我正在尝试制作一些图像的转盘...布局已经完成..不明白如何移动它..我在想一些jquery丢失..尝试了很多代码但没有运气..我不是在寻找任何自动滚动，我试图做一些简单的carousal只有它点击它左移动或侧面..

这是html代码：

<div class="slider slider-category">
    <div class="slider-clip">
        <div class="bx-wrapper" style="max-width: 1248px;">
            <div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 317px;">
                <ul class="slides" style="width: 24215%; position: relative; transition-duration: 0s; transform: translate3d(-845px, 0px, 0px);">

                    <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true">
                        <div class="slide-image">
                            <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"></a>
                        </div>
                        <div class="slide-content">
                            <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
                            <p class="slide-price">€1,650 - €1,700</p>
                            <div class="promo_text"></div>
                        </div>
                    </li>

                    <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true">
                        <div class="slide-image">
                            <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR5754E2400_B101_02_85.jpg" width="225" height="225" alt="Macram&amp;eacute; Pizzo Sheet Set by Frette"></a>
                        </div>
                        <div class="slide-content">
                            <h4 class="slide-title"><a href="#">Macramé Pizzo Sheet Set</a></h4>
                            <p class="slide-price">€1,500 - €1,550</p>
                            <div class="promo_text"></div>
                        </div>
                    </li>

                    <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true">
                        <div class="slide-image">
                            <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR6165E2400_BN17_02_65.jpg" width="225" height="225" alt="Sirmione Sheet Set by Frette"></a>
                        </div>
                        <div class="slide-content">
                            <h4 class="slide-title">
                                <a href="#">Sirmione Sheet Set</a>
                            </h4>
                            <div>
                                <p class="slide-price slide-price-old">€425 - €450</p>
                                <p class="slide-price slide-price-new">€212.50 - €225</p>
                            </div>
                            <div class="promo_text"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bx-controls bx-has-controls-direction">
                <div class="bx-controls-direction">
                    <a class="bx-prev" href="">Prev</a>
                    <a class="bx-next" href="">Next</a>
                </div>
            </div>
        </div>
    </div>
</div>

提前致谢..

Answer 1

我在下面添加了一个带导航的演示。尝试使用代码段

如果要删除文本01-19 08:07:40.973 18478-18478/<package_name> I/<tag>: BLOCKED，请按照这种方式更改代码

prevText:"",  nextText:"",

.cover {
	position:relative;
}
img {
  width:100%;
}
.cover .bx-next {
	width:30px;
	height:30px;
	background:#000;
	position:absolute;
	right:15px;
	top:45%;
	z-index:99;
}
.cover .bx-prev {
	width:30px;
	height:30px;
	background:#000;
	position:absolute;
	left:15px;
	top:45%;
	z-index:99;
}

左/右箭头不移动

1 个答案: