[Kurukuru] 5个高度评价的jQuery插件,可以实现轮播

轮播

在生产项目中经常会出现诸如“我想添加一个可以横向滑动的功能!”之类的请求。

嗯,有许多实现轮播的jQuery插件,但这一次它是一个专门研究JavaScript的搜索网站。Javascripting.com我将介绍那些被高度评价的。

参考:[简介]从如何安装jQuery到如何使用它!我将以一种易于理解的方式进行解释

什么是轮播?

轮播是一种英语术语,意为游乐园旋转马和旋转输送机。 (参考轮播)它也用于像在网上旋转一样运动的零件。

但是,对于那些不熟悉Web技术的人,将其称为“滑块”比将其称为“轮播”会更好。实际上,许多基于轮播的jQuery插件都被称为滑块,您可以用两种方式来称呼它们。

高度评价的轮播jQuery插件

圆滑的

圆滑的

Javascripting.com也获得最高评分圆滑的是。光滑的字幕是您最后的轮播’它说将永远需要,并且它是一个充满信心的插件。

实际上,它可以像普通的圆盘传送带一样灵敏地进行滑动,并且可以滑动具有不同宽度的元素。引入轮播时,最好先提到光滑。

易于实现。首先,为您要使用轮播的元素创建以下HTML。

<ul class="your-class">
  <li>your content</li>
  <li>your content</li>
  <li>your content</li>
</ul>

然后在头上阅读jQuery

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new 圆滑的-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

在主体关闭标签之前加载以下脚本。 (在此描述之前完成了jQuery的加载。)

<script type="text/javascript" src="slick/slick.min.js"></script>

最后,您可以通过在JavaScript文件中编写以下代码来安装slick。

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

演示和详细文档可在官方的光滑页面上找到。

光滑的官方页面

Bxslider

bxslider

光滑的旁边被评估Bxslider是。它已定期更新,现在似乎是版本4。

Bxslider默认情况下是响应式的。还丰富选项准备好了,我认为它可以灵活地应用于任何产品。

该实现首先加载jQuery,然后将下面的描述写在头部。

<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

然后,在转盘部分中,例如,编写如下。

<div class="bxslider-wrap">
  <ul class="bxslider">
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic2.jpg" /></li>
    <li><img src="/images/pic3.jpg" /></li>
    <li><img src="/images/pic4.jpg" /></li>
  </ul>
</div>

在官方文档中,它没有包含在div中,但是如果您未将其包含在div中,则它可能不会显示在智能手机上,因此我写了这个。

您所需要做的就是用JavaScript编写以下内容,然后就可以完成。

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

日语网络博客上介绍了许多实现方法,因此,如果您不熟悉英语,请尝试使用“ Bxslider”搜索google。

该演示在官方网站上有很多示例和实现方法。

Bxslider官方网站样本收藏

FlexSlider 2

flexslider

Flexslider 2是WooCommerce提供商提供的轮播插件,以EC网站主题而闻名。由于轮播功能经常在EC网站上使用,因此可以使用各种设计模式来实现缩略图的轮播。

为了实现,在加载jQuery之后,将以下内容写在head标签中。

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

例如,创建一个这样的列表

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

之后,如果在JavaScript文件中编写以下内容,则可以。当然,有很多可用的选项。

  $(window).load(function() {
    $('.flexslider').flexslider();
  });

加载似乎比slick和bxslider慢一点,但是我认为如果您使用的是WooCommerce制作的主题,效果会很好。

演示页面是官方网站在里面

刷牙

轻扫

刷牙可用于实现可在移动设备上滑动的轮播。还有许多可选功能。

滑动器具有三维幻灯片动画和嵌套功能。我认为有些人决定选择Swiper,因为它易于实现。

该实现首先加载jQuery之后将Sewiper加载到头部(将3.x.x更改为下载的版本。我很高兴可以用CDN加载它。)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>

例如,让我们制作一个这样的旋转木马。

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
    <div class="swiper-pagination"></div> 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>   
    <div class="swiper-scrollbar"></div>
</div>

之后,如果在JavaScript文件中编写以下内容,则可以。

  $(document).ready(function () {
    var mySwiper = new 刷牙 ('.swiper-container', {
      direction: 'vertical',
      loop: true
    })        
  });

我认为该Swiper插件适用于中级用户。

您可以在此处查看演示。

刷卡器官方演示页面

jQuery lightSlider

光滑块

jQuery lightSlider是一种轮播插件,其名称具有“轻便”的特征。它可与其他轮播插件相媲美,例如响应式支持和丰富的可选功能。

实现是在加载jQuery之后将以下内容写在head标签中,

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />  
<script src="js/lightslider.js"></script>
<ul class="lightSlider">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
</ul>

将以下内容写入JavaScript文件即可完成。

 $(document).ready(function() {
    $(".lightSlider").lightSlider(); 
  });

这次的实现可能是最容易理解的。

请从官方页面查看演示。

jQuery light Slider演示

最后

目前,实现轮播功能的jQuery插件似乎是最强大的功能,但是我认为,如果您了解某些类型及其特征,效果会更好。您可能要尝试至少三个实现。

撰写本文的人

ケイタ

潜伏在东京的一位网络工程师。我做各种各样的事情,例如生产/运营/数据分析。 応援は@keitaoriginal请从。