Swiper prev按钮放在外面
web 其他 2023-11-09 107 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

4748703 2552 38
最新评论
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
:weixiao:
评 留言
文章标签更多
ThinkPHP (247)
Mysql (55)
DedeCms (33)
jQuery (60)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

Swiper prev按钮放在外面

方法:将按钮放在外面只需要将 <div class="swiper-button-prev"></div> 和 <div class="swiper-button-next"></div> 提取到 div class="swiper">...</div>外面,与其平级即可实现

from clipboard

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@6/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
     .list_bd{
  position: relative;
}
.swiper-wrapper{
  background: pink;
}
.list_bd .swiper {
  width: 90%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}
.list_bd .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list_bd .price{
  color: var(--font-red);
  font-weight: bold;
  margin-top: 2px;
}
.list_bd img {  
  width: 120px;
  height: 120px;
}
  </style>
</head>

<body>
  <div class="list_bd">
    <div class="swiper swiper_goods_1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#" target="_blank">
            <img src="123.jpg" title="标题">
            <div class="price">
              <span>¥</span>1200
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" target="_blank">
            <img src="123.jpg" title="标题">
            <div class="price">
              <span>¥</span>1200
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" target="_blank">
            <img src="123.jpg" title="标题">
            <div class="price">
              <span>¥</span>1200
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" target="_blank">
            <img src="123.jpg" title="标题">
            <div class="price">
              <span>¥</span>1200
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev prev_1"></div>
    <div class="swiper-button-next next_1"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper@6/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".swiper_goods_1", {
      slidesPerView: 3,
      spaceBetween: 30,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>

版权声明:本篇文章来源于网络。 来源链接

相关推荐
钉钉怎样设置快捷键?钉钉系统设置在哪
其他 | 2019-03-20 20543
钉钉怎样设置快捷键? 1,打开电脑端钉钉面板,点击右上角自己的头像,下拉菜单中点击系统设置 2,进入系统设置面板,下拉滚动条,找到快捷键设置
virtualbox安装增强功能时点击没反应
其他 | 2017-06-24 13685
利用virtualbox虚拟机装了一个windows2003的系统,但是虚拟机到主机之间的双向复制粘贴不能用,所以就想到了virtualbox菜单里的“设备>安装增强功能”,但是点击没反应,经网上搜索解决: 进入“我的电脑”,在“cd驱动器”上点击右键选择“弹出”,然后就可以安装增强功能了,如图:
评论:0条
评论加载中...
发表评论