纯JavaScript图片滚动slider插件, 原生JavaScript图片滚动slider插件, 图片滚动slider插件, 无需jquery的图片滚动slider插件, splidejs 用法

$ npm install @splidejs/splide

主要的 JavaScript 文件位于 dist 目录中。使用<script>标签导入文件。

<script src="path-to-the-file/splide.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

文件

您将在dist 目录中看到两个不同的 CSS 文件和主题目录。

如果您想完全自定义滑块外观，请选择splide-core.min.css不包含箭头、分页或进度条样式的样式，这样可以减少不必要的“覆盖”工作。否则，选择splide.min.css或splide-[theme].min.css。访问此页面以查看每个主题的屏幕截图。

链接样式表

将选定的样式表与<style>元素链接。

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- or the one installed in node_modules directory, -->
<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">

<!-- or the reference on CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

如果您使用jsDelivr ，则需要获取最新的 URL 。

编写 HTML

接下来，编写所需的 HTML 以创建滑块。

基本结构

Splide 的基本 HTML 结构是这样的：

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

在.splide__slide元素中插入任何内容，例如图像。您可以使用<div>element 代替<ul>and <li>。

附加 HTML

在某些情况下，您需要更多的 HTML 标记。例如：

要了解更多信息，请参阅箭头、自动播放或结构页面。

应用Splide

最后，将 Splide 应用到 HTML 元素。

使用全局类

Splide 可以全局访问：

<script>
	new Splide( '.splide' ).mount();
</script>

如果您在头上初始化它，请确保加载了目标元素：

<script>
	document.addEventListener( 'DOMContentLoaded', function () {
		new Splide( '.splide' ).mount();
	} );
</script>

import Splide from '@splidejs/splide';

new Splide( '.splide' ).mount();

var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0, len = elms.length; i < len; i++ ) {
	new Splide( elms[ i ] ).mount();
}

实例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

<div id="primary-slider" class="splide">
  <div class="splide__track">
      <ul class="splide__list">
          <li class="splide__slide"> <img src="1.jpg" /></li>
          <li class="splide__slide"> <img src="2.jpg" /></li>
          <li class="splide__slide"> <img src="3.jpg" /></li>     
          <li class="splide__slide"> <img src="4.jpg" /></li>             
          <li class="splide__slide"> <img src="5.jpg" /></li>            
          <li class="splide__slide"> <img src="6.jpg" /></li>             
          <li class="splide__slide"> <img src="7.jpg" /></li>             
      </ul>
  </div>
</div>

<div id="secondary-slider" class="splide">
  <div class="splide__track">
      <ul class="splide__list">         
          <li class="splide__slide">        
            <img src="1_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="2_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="3_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="4_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="5_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="6_thumbnail.jpg" />            
          </li>
          <li class="splide__slide">        
            <img src="7_thumbnail.jpg" />            
          </li>
      </ul>
  </div>
</div>

<script>
	var secondarySlider = new Splide('#secondary-slider', {
		rewind      : true,
		fixedWidth  : 64,
		fixedHeight : 64,
		isNavigation: true,
		gap         : 3,
		focus       : 'center',
		pagination  : false,
		cover       : false,
	  	arrows     : false,
	} ).mount();

	// Create the main slider.
	var primarySlider = new Splide( '#primary-slider', {
		type       : 'fade',
		heightRatio: 1,
		pagination : false,
		arrows     : false,
		cover      : true,
	} );

	// Set the thumbnails slider as a sync target and then call mount.
	primarySlider.sync( secondarySlider ).mount();
</script>

本文：纯JavaScript图片滚动slider插件, 原生JavaScript图片滚动slider插件, 图片滚动slider插件, 无需jquery的图片滚动slider插件, splidejs 用法