如何修改轮播图样式？

Question

如何修改轮播图样式？

发布于
2024-05-22 上海

更新于
2024-05-22

    <div class="lyIdx_Pro acn_b">
        <div class="layout">
            <div class="can_Power_title">
                <span>Hot Products</span>
                <p>Our Crousher Parts has been perfected over the past 20 years to ensure<br /> they are reliable and
                    efficient on
                    site.</p>
            </div>
            <div class="pro_swiper">
                <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
                    <div class="swiper-wrapper"
                        style="transition-duration: 0ms; transform: translate3d(-1048px, 0px, 0px);">
                        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7">
                            Slide 8
                        </div>
                        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8">
                            Slide 9
                        </div>
                        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="9">
                            Slide 10
                        </div>
                        <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1">
                            <img src="./img/pro/1093954.jpg" />
                        </div>
                        <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="2">
                            <img src="./img/pro/4023.jpg" />
                        </div>
                        <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="3">
                            Slide 4
                        </div>
                        <div class="swiper-slide" data-swiper-slide-index="0">
                            Slide 1
                        </div>

                        <div class="swiper-slide" data-swiper-slide-index="4">
                            Slide 5</div>
                        <div class="swiper-slide" data-swiper-slide-index="5">
                            Slide 6</div>
                        <div class="swiper-slide" data-swiper-slide-index="6">
                            Slide 7</div>
                        <div class="swiper-slide" data-swiper-slide-index="7">
                            Slide 8</div>
                        <div class="swiper-slide" data-swiper-slide-index="8">
                            Slide 9</div>
                        <div class="swiper-slide" data-swiper-slide-index="9">
                            Slide 10</div>
                        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0">Slide 1</div>
                        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev"
                            data-swiper-slide-index="1">Slide 2</div>
                        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
                            data-swiper-slide-index="2">Slide 3</div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span
                            class="swiper-pagination-bullet" tabindex="0" role="button"
                            aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0"
                            role="button" aria-label="Go to slide 2"></span><span
                            class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                            aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0"
                            role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet"
                            tabindex="0" role="button" aria-label="Go to slide 5"></span><span
                            class="swiper-pagination-bullet" tabindex="0" role="button"
                            aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0"
                            role="button" aria-label="Go to slide 7"></span><span class="swiper-pagination-bullet"
                            tabindex="0" role="button" aria-label="Go to slide 8"></span><span
                            class="swiper-pagination-bullet" tabindex="0" role="button"
                            aria-label="Go to slide 9"></span><span class="swiper-pagination-bullet" tabindex="0"
                            role="button" aria-label="Go to slide 10"></span></div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
            </div>
        </div>
    </div>

.lyIdx_Pro {
    position: relative;
}
.lyIdx_Pro .pro_swiper {
        width: 100%;
        position: relative;
        top: 80px;
        height: 600px;
    }
.lyIdx_Pro .pro_swiper .swiper-container {
     width: 100%;
     height: 100%;
 }

.lyIdx_Pro .pro_swiper .swiper-slide {
    width: 326px !important;
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    /* transform: scale(0.8); */
 }
 .lyIdx_Pro .pro_swiper .swiper-slide img {
    width: 100%;
 }
.lyIdx_Pro .pro_swiper .swiper-slide-active,
.lyIdx_Pro .pro_swiper .swiper-slide-duplicate-active {
    width: 692px !important;
    /* transform: scale(1); */
 }

    <script type="text/javascript">
        var swiper = new Swiper('.lyIdx_Pro .pro_swiper .swiper-container', {
            slidesPerView: 3,
            spaceBetween: 20,
            centeredSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>

图片.png

css swiper.js 前端

html5 css3

阅读 1.3k

AI BotBETA

要实现页面滚动时图片宽度变化的效果，你可以结合 JavaScript（或 jQuery）的滚动事件监听和 CSS 样式变化来实现。以下是一个简单的实现思路：

HTML 结构：确保你的图片有一个可以操作的 DOM 结构。

<div class="image-container">
    <img src="path-to-image-1.png" class="scrollable-image" />
    <img src="path-to-image-2.png" class="scrollable-image" />
    <img src="path-to-image-3.png" class="scrollable-image" />
</div>

CSS 样式：为图片和容器设置基础样式，并为宽度变化定义一个过渡效果。

.image-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.scrollable-image {
    flex: 0 0 auto;
    width: 100%; /* 初始宽度 */
    transition: width 0.3s ease-in-out; /* 宽度变化过渡效果 */
    scroll-snap-align: start;
}

.scrollable-image.active {
    width: 200px; /* 第一个位置时的宽度 */
}

JavaScript 监听滚动事件：当页面滚动时，判断哪个图片滚动到了第一个位置，并为其添加 active 类来改变宽度。

document.addEventListener('scroll', function() {
    const images = document.querySelectorAll('.scrollable-image');
    const container = document.querySelector('.image-container');
    const scrollLeft = container.scrollLeft;
    const itemWidth = images[0].offsetWidth;

    // 清除所有图片的 active 类
    images.forEach(image => image.classList.remove('active'));

    // 找到当前第一个显示的图片，并为其添加 active 类
    const firstVisibleIndex = Math.floor(scrollLeft / itemWidth);
    if (firstVisibleIndex >= 0 && firstVisibleIndex < images.length) {
        images[firstVisibleIndex].classList.add('active');
    }
});

注意：

这里的 scroll-snap-type 和 scroll-snap-align 是 CSS Scroll Snap 模块的属性，它们用于创建平滑的滚动效果，确保图片在滚动时对齐。
你可能需要根据实际情况调整图片的宽度、过渡效果等参数。
如果你的页面结构或需求更复杂，可能还需要考虑其他因素，如性能优化、浏览器兼容性等。

以上是一个简单的实现思路，具体实现时可能需要根据你的具体需求和页面结构进行调整。

1 个回答

得票最新

汝何不上九霄

4.8k61947

发布于
2024-05-22 北京

你可以参考一下这个swiper的这个demo
https://www.swiper.com.cn/demo/slides-scale.html