要疯了,谁能帮帮我,前端 swiper 轮播图(三张图总是排成一列轮播),附源 html 及渲染后的 HTML!

2018-09-01 17:09:15 +08:00
 elsagong

大家周末愉快!!冒昧打扰,真的要疯了,折腾了几天,依然不知道是哪里出了问题😖😖,求前端大神指点迷津!我在成都,请吃火锅💐🍻

js 的加载肯定是没有问题,因为轮播是有效的,是 css 的原因吗?但是我把一些格式删除后,还是不能正常的轮播,总是三张图一起出来或消失,但我的设定明明是一张接着一张的出现,渲染后的 HTML 也没看出点异常,console 也没有报错😖😖,以下是原 home.html 部分内容:

<div class="home">
	<div class="row swiper-container">
  	<div class="swiper-wrapper">
    	{% for page_block in blocks_carousel %}
          	<div class="swiper-slide home--square--container {{ page_block.html_classes }}">
            	<div class="home--square"
                	style="background-image: url('{{ page_block.cover_url }}')">
              	<div class="home--content">
                	<div class="home--content-wrapper">
                  	<div class="home--content-inner">
                    	<div class="swiper-text home--content-inner--padded">
                        	<h2>{{ page_block.title }}</h2>
                        	{% if page_block.subtitle %}
                          	<h3>{{ page_block.subtitle }}</h3>
                        	{% endif %}
                        	<a class="btn btn-secondary home__button" href="{{ page_block.url }}">
                          	{{ page_block.primary_button }}
                        	</a>
                    	</div>
                  	</div>
                	</div>
              	</div>
            	</div>
          	</div>
    	{% endfor %}
  	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
	</div>

以下是我渲染后的 HTML 部分内容:

          <div class="swiper-slide home--square--container col-sm-12">
            <div class="home--square"
                style="background-image: url('/media/__sized__/homepage_blocks/code-1076536_1280_MnEmmXI-thumbnail-1080x720-70.jpg')">
              <div class="home--content">
                <div class="home--content-wrapper">
                  <div class="home--content-inner">
                    <div class="swiper-text home--content-inner--padded">
                        <h2>Test</h2>
                        
                        <a class="btn btn-secondary home__button" href="/en/products/category/books-6/">
                          Shop now
                        </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    
          <div class="swiper-slide home--square--container col-sm-12">
            <div class="home--square"
                style="background-image: url('/media/__sized__/homepage_blocks/code-820275_1280_J7H4lS1-thumbnail-1080x720-70.jpg')">
              <div class="home--content">
                <div class="home--content-wrapper">
                  <div class="home--content-inner">
                    <div class="swiper-text home--content-inner--padded">
                        <h2>oooo</h2>
                        
                        <a class="btn btn-secondary home__button" href="/en/products/category/accessories-2/">
                          Shop now
                        </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    
          <div class="swiper-slide home--square--container col-sm-12">
            <div class="home--square"
                style="background-image: url('/media/__sized__/homepage_blocks/36188702_2328277200522796_1423077812268433408_n_7deOCbc-thumbnail-1080x720.png')">
              <div class="home--content">
                <div class="home--content-wrapper">
                  <div class="home--content-inner">
                    <div class="swiper-text home--content-inner--padded">
                        <h2>ooooo</h2>
                        
                        <a class="btn btn-secondary home__button" href="/en/products/category/groceries-3/">
                          Shop now
                        </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    
  </div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
4941 次点击
所在节点    程序员
24 条回复
elsagong
2018-09-02 13:35:55 +08:00
@lanmingyan 可以加下你的微信或 QQ 吗?如果方便的话,可以请你帮忙用 TeamViewer 远程看一下吗?😖😖😖万分感谢
elsagong
2018-09-02 13:39:57 +08:00
@lanmingyan 您好,蓝童鞋,刚刚冒昧加了您的 QQ,嘿嘿嘿,٩(๑>◡<๑)۶😋🍻
815979670
2018-09-02 17:35:54 +08:00
我上一次出现这个问题 是因为引入了 js 没引入 css 导致的
elsagong
2018-09-03 09:13:05 +08:00
@815979670 我的问题也解决了,也是 css 引入的方式不对造成的,😖😖 蠢死我算了😂😂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/485217

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX