天給大家分享一個(gè)功能超贊的Vue區(qū)間滑塊組件VueSliderComponent。

vue-slider 一款強(qiáng)大到令人窒息的滑塊選擇器組件。順滑般拖到效果，擁有多種主題樣式（默認(rèn)|antd|material），可以支持SSR、Typescript及更多滑塊。

安裝

$ npm i vue-slider-component -S

插件使用

<template>
  <div>
    <vue-slider
      v-model="value"
      :adsorb="true"
      :drag-on-click="true"
      :interval="10"
    >
    </vue-slider>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      value: [0, 5000]
    }
  }
}
</script>

提供各種豐富示例及API文檔

附上演示示例及倉(cāng)庫(kù)鏈接

# 文檔/演示地址
https://nightcatsama.github.io/vue-slider-component/

# github地址
https://github.com/NightCatSama/vue-slider-component

好了，就介紹到這里。如果小伙伴們有其他Vue區(qū)塊選擇器，歡迎留言一起交流討論。

{
 path: '/slider',
 name: 'slider',
 component: ()=> import('./views/Slider.vue')
 }

<a href="javascript：void(0)" @click="$router.push('/slider')">
 <van-col span="6" class="marb20">
 <van-icon name="gift" />
 <div>Slider 滑塊</div>
 </van-col>
</a>

<van-slider
 v-model="value"
 @change="onChange"
/>
data() {
 return {
 value: 30,
 }
},
methods: {
 onChange(value) {
 console.log(value)
 }, 
}

<van-slider
 v-model="value"
 :min="50"
 :max="80"
 @change="onChange"
 />

<van-slider
 v-model="value"
 :step="20"
 bar-height="6px"
 @change="onChange"
/>

網(wǎng)頁(yè)設(shè)計(jì)中，內(nèi)容滑塊（Content Slider）是一個(gè)非常有用的工具，它可以突出顯示圖像、傳遞信息、用動(dòng)畫元素吸引用戶。在網(wǎng)頁(yè)主頁(yè)上，內(nèi)容滑塊可以在有限的空間內(nèi)傳遞大量信息。

下文是用于顯示圖像、視頻或HTML內(nèi)容的滑塊工具清單。有一些標(biāo)準(zhǔn)的內(nèi)容滑塊工具可以自定義主題、動(dòng)畫和樣式元素,還有一些可選的滑塊工具能夠以有趣的方式顯示圖像。所有這些內(nèi)容滑塊都是免費(fèi)的，但也有一些提供升級(jí)的付費(fèi)版本。

1、Zoom Slider（縮放滑塊）

Zoom Slider是具有縮放功能的簡(jiǎn)單內(nèi)容滑塊。每張幻燈片都有一個(gè)預(yù)定義的縮放區(qū)域，用于計(jì)算全屏幕填充的適當(dāng)縮放值。單擊縮放圖標(biāo)后，縮放區(qū)域和頁(yè)面將被縮放，從而產(chǎn)生查看者正在接近該項(xiàng)目的錯(cuò)覺(jué)。

2、Elastic Content Slider（彈性內(nèi)容滑塊）

Elastic Content Slider是一個(gè)簡(jiǎn)單且響應(yīng)迅速的jQuery內(nèi)容滑塊。它有一個(gè)用于內(nèi)容的滑塊區(qū)域，底部有一個(gè)類似于標(biāo)簽的導(dǎo)航。每個(gè)列表項(xiàng)都是一張幻燈片，在導(dǎo)航中具有相應(yīng)的鏈接元素。

3、Turntable

Turntable是一個(gè)響應(yīng)式的jQuery滑塊，當(dāng)你的鼠標(biāo)或手指滑過(guò)時(shí)它可以在一系列圖像中旋轉(zhuǎn)，類似于用JavaScript制作的數(shù)字翻頁(yè)本。你所需要的只是一組圖像和jQuery。

4、Nivo Slider

Nivo Slider是一個(gè)受歡迎的內(nèi)容滑塊，有超過(guò)120萬(wàn)個(gè)網(wǎng)站使用。它具有獨(dú)立的jQuery版本和WordPress插件。Nivo Slider提供了一系列現(xiàn)成的主題和圖像過(guò)渡效果。你可以自定義要在單個(gè)幻燈片上展示的內(nèi)容。

5、FlexSlider

FlexSlider是WooCommerce的響應(yīng)式j(luò)Query滑塊工具包。支持所有主流瀏覽器，它提供水平和垂直幻燈片、淡入淡出動(dòng)畫、自定義導(dǎo)航選項(xiàng)、支持觸摸滑塊。

6、Glide

Glide是JavaScript ES6滑塊。它輕量、靈活、快速且可滑動(dòng)。插入模塊時(shí)可以獲取附加功能。

7、bxSlider

bxSlider是一個(gè)響應(yīng)式j(luò)Query內(nèi)容滑塊。它具有水平、垂直、淡入淡出模式以及許多配置選項(xiàng)。幻燈片可以包含圖像、視頻或HTML內(nèi)容。

8、Owl Carousel

Owl Carousel是支持觸摸的jQuery插件，它可以為移動(dòng)瀏覽創(chuàng)建響應(yīng)式的輪播滑塊。具有60多種自定義選項(xiàng)，各種用戶都適用。Owl Carousel支持模塊化插件結(jié)構(gòu)，可刪除不必要的插件或創(chuàng)建新的插件。

9、ajSlider

ajSlider是一個(gè)幻燈片jQuery插件，適合作為網(wǎng)頁(yè)或圖庫(kù)的主橫幅。根據(jù)你的需要設(shè)置滑塊的高度和寬度，讓它根據(jù)圖像自動(dòng)計(jì)算尺寸。另外，你還可啟用或禁用自動(dòng)幻燈片放映操作。

10、jcSlider

jcSlider是一個(gè)響應(yīng)式滑塊jQuery插件，帶有CSS動(dòng)畫(而不是jQuery)，可以最大限度地提高性能。它反應(yīng)靈敏，具有60多種效果。

11、Unslider

Unslider是一個(gè)輕量級(jí)、響應(yīng)迅速的jQuery滑塊。可以根據(jù)需要更改、添加和刪除每個(gè)幻燈片中的CSS。Unslider是輕量級(jí)的滑塊，但它提供了一系列的選項(xiàng)，如動(dòng)畫速度和延遲。

12.Tiny Circleslider

Tiny Circleslider是一種輕便的圓形輪播滑塊。它為開(kāi)發(fā)人員提供了標(biāo)準(zhǔn)輪播的獨(dú)特替代方案。可以將間隔設(shè)置為自動(dòng)滑塊。

13、Smart Slider

Smart Slider是WordPress和Joomla的免費(fèi)插件。創(chuàng)建精美的滑塊和內(nèi)容時(shí)無(wú)需任何代碼，你可從空白滑塊開(kāi)始，或者從各種模板中選擇。使用圖層可增強(qiáng)滑塊。

通過(guò)選擇標(biāo)題、文本、圖像、按鈕或視頻并應(yīng)用自定義選項(xiàng)，可以進(jìn)行編輯。只需單擊幾下，即可添加YouTube和Vimeo視頻為圖層。

14、RoyalSlider

RoyalSlider是圖片庫(kù)和內(nèi)容滑塊插件，具有jQuery和WordPress版本。每個(gè)滑塊模板都具有響應(yīng)性和觸摸友好性。它提供了50多個(gè)可定制選項(xiàng)、4個(gè)皮膚、9個(gè)模板、視頻支持等等。RoyalSlider經(jīng)常被應(yīng)用在流行的品牌和組織網(wǎng)站上，如Diesel、Peugeot、Audi、Twitch、Ralph Lauren和NYC.gov。

15.Jssor

Jssor是具有200多種幻燈片效果的觸摸滑塊式圖像輪播。Jssor Slider響應(yīng)迅速并針對(duì)移動(dòng)瀏覽器進(jìn)行了優(yōu)化。它提供jQuery和無(wú)jQuery版本，并具有幻燈片和字幕幻燈片動(dòng)畫。另外，它還有一個(gè)收費(fèi)版本，每年15美元。

16、Master Slider

Master Slider是WordPress的免費(fèi)插件，響應(yīng)式圖像和視頻滑塊。它支持觸摸導(dǎo)航，帶有8個(gè)入門模板、6個(gè)交互轉(zhuǎn)換、定時(shí)器和用戶界面控件、循環(huán)和線性滑塊等等。

（編譯/雨果網(wǎng) 呂曉琳）

【特別聲明】未經(jīng)許可同意，任何個(gè)人或組織不得復(fù)制、轉(zhuǎn)載、或以其他方式使用本網(wǎng)站內(nèi)容。轉(zhuǎn)載請(qǐng)聯(lián)系：editor@cifnews.com

上雨果網(wǎng)搜索“跨境資料庫(kù)”,領(lǐng)取歐美/東南亞各國(guó)市場(chǎng)商機(jī)、各大平臺(tái)熱銷品報(bào)告、跨境電商營(yíng)銷白皮書！