[kurusu] jquery插件具有高评价,可实现旋转木马

 旋转木马

请求“我想幻灯片就像它旁边的东西!”频繁用于生产项目。

好吧,有几种实现旋转木马的jQuery插件,但这一次专门从事JavaScript的搜索网站javascripting.com我们介绍了高度评估的内容。

参考: [介绍]从jQuery的介绍方法使用它!我们将轻松解释

用旋转木马

旋转木马是一个英文名词,含义,如游乐园旋转马或旋转输送机。 (参见 旋转木马 它还用于移动卷筒纸旋转的部件。

但是,那些不熟悉网络技术的人是那些叫滑块而不是叫旋转木马的人。事实上,基于旋转木马的jQuery插件有很多滑块和名称,并且呼叫方式可能是任何地方。

高度额定转盘jquery插件

sl

 sl

甚至javascripting.com也是最高评级 sl 是。 Slick的字幕是你的最后一个旋转木马’它被编写为LL需要,并提供充满信心的插件。

事实上,您还可以响应响应,以及定期滑动的转盘,以及具有不同宽度的滑动元件。也许在介绍旋转木马时,我认为它将通过光滑进步。

实现很容易。首先,将以下HTML创建到我想要使用Carousel的元素:

<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 slick-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
  });
});

从Slick官方页面可以看到演示和高级文件。

斯莱克官方页面

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();
});

由于有很多方法在日本的基于Web的博客中实施,因此在“BXSLIDER”中陌生英语的人将会欣赏。

演示是在官方网站上引入了许多样本和实施。

BXSLIDER官方网站样本集合

Flexslider 2.

Flexslider.

Flexslider 2.是由Woocommerce提供商提供的旋转木马插件,以EC网站主题为主。旋转木马功能通常用于EC位点,并且可以以不同的设计模式实现缩略图图像的卡桥。

在读取jQuery后,实现是头标记中的以下描述

<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文件中执行以下操作:OK。当然有很多选择。

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

与光滑或BXSLIDER相比,我觉得有点慢,但我认为如果您使用由Woocommerce制成的主题会很好。

演示页面 官方网站 有。

摇动者

 摇动者

摇动者 您可以实现一个可以使用移动设备使用移动设备滑动的旋转木马。还有丰富的可选功能。

它是一个三维幻灯片动画和储存器的嵌套特性。有些人选择Swiper,这可以很容易地实施。

在阅读jQuery后,实现首先读取淋巴百镜(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文件中执行以下操作:OK。

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

我认为这个Swiper插件是略微中间的成员。

你可以从这里看到演示。

摇动者 官方演示页面

jquery lightslider.

LightsLider.

jquery lightslider.是旋转木马插件,是“轻盈”的特征,作为其名称。我们不会拉到其他旋转木塞插件,例如响应支持和可选功能的丰富。

实现是读取jQuery后头标记中的以下描述,

<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 lightslider demo.

在最后

旋转木马函数的jQuery插件似乎是一个强烈的光滑条件,但如果您知道某些类型及其功能,我认为它会进展。尝试至少三个约三个到实施可能是好的。

给这篇文章的人

ケイタ

隐藏在东京的网络工程师。我们做了广泛的生产/操作/数据分析。 応援は@KeitaInginal. 请。