前端 - 如何修改轮播图样式？

Question

    <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>

Answer 1

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

Answer 2

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

1. 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>

2. 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; /* 第一个位置时的宽度 */}

3. 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 模块的属性，它们用于创建平滑的滚动效果，确保图片在滚动时对齐。
• 你可能需要根据实际情况调整图片的宽度、过渡效果等参数。
• 如果你的页面结构或需求更复杂，可能还需要考虑其他因素，如性能优化、浏览器兼容性等。

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