README

1. 简介

一个轮播滑动小部件。

2. 安装

使用Composer非常简单，运行

composer require tu9/tu9-slider

在视图页面显示滑动器

<x-tu9-slider :eleSlider="$eleSlider" :numberItemDisplay="$numberItemDisplay"  />

3. 使用方法

声明需要的变量

$numberItemDisplay 是你想要显示的滑动器项目数量。

	$numberItemDisplay = 5;
    

$eleSlider 是你想要作为滑动器显示的内容。它可以包括图片、文本或产品信息等。

示例

<?php
$eleSlider = [];
foreach ($array as $value) {
   $info = "<div id=" . $value->id . ">" . $value->name . "</div>";
   $eleSlider[] = $info;
} 
?>

在以下情况中

$eleSlider 是一个包含你想要显示的元素的数组。

$info 是元素的显示。

4. 自定义滑动器

$infinite 是连续滚动的功能。

$infinite = "true";//to turn on
$infinite = "false";//to turn off

$styleSlider 自定义滑动器部分的显示。

$styleSlide = "width: 100%;
    height: auto;
    position: relative;
    justify-items: center;
    display: flex;";

$stylePrev：自定义上一个按钮的显示。

$stylePrev = "color: #fff;
    background: rgb(59 130 246);
    border: none;
    padding: 8px;
    border-radius: 10%;
    outline: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    display: flex;

$styleNext：自定义下一个按钮的显示。

$styleNext = "color: #fff;
    background: rgb(59 130 246);
    border: none;
    padding: 8px;
    border-radius: 10%;
    outline: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    display: flex;";

$iconPrev 是上一个按钮的图标显示

$iconPrev = "<img src="urlImage">";

$iconNext 是下一个按钮的图标显示

$iconNext = "<img src="urlImage">";

$styleListItemBox 自定义列表项的显示

$styleListItemBox = "width: 100%;
    overflow: auto;
    scroll-behavior: smooth;";