JSFiddle - React, Tailwind, and code Playground
HTML
<div id="multiSlider">
</div>
CSS
* {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.slider {
background-size: cover;
}
.slider div {
display: inline-block;
height: 100%;
}
.indicator div {
vertical-align: top;
display: inline-block;
height: 100%;
}
.descriptor {
box-shadow: inset 0px 0px 12px rgba(0,0,0,.5);
text-shadow: 0px 0px 2px rgba(0,0,0,.3);
color: #525252;
top: 0;
left: 0;
text-align: center;
font-size: 18px;
}
JavaScript
(function($){
jQuery.fn.multiSlider = function(options){
options = $.extend({
multiSliderID : 'multiSlider', // Название слайдера (ID)
bgStart : 'url(http://media.lpgenerator.ru/images/122140/', // Начало ссылки.
bgName : ['1_jffcxof', '2_lM7Bcry', '3_GqkG95Y', '4_cf6Rbun'], // Имена ссылок (уникальная часть).
bgEnd : '.jpg)', // Конец ссылки.
name : ['Auto1', 'Auto2', 'Auto3'], // Название.
text : ['text1', 'text2', 'text3', 'text4'], // Описание.
descriptor : false, // Вкл/Откл описание.
indicator : true, // Вкл/Откл индикатор.
slideHover : true, // Подсветка слайда.
mainWidth : '600', // Ширина слайдера.
mainHeight : '400', // Высота слайдера.
mainTransition : '200ms', // Скорость анимации.
indHeight : '2', // Высота подчёркивания.
indBg : '#123', // Цвет подчёркивания.
descHeight : '38px', // Высота подписи.
slideHoverBg : 'rgba(255,255,255,.2)', // Цвет подсветки слайда.
}, options);
var make = function(){
// Настройки
var multiSliderName = '#' + options.multiSliderID, // Название слайдера (ID)
bgStart = options.bgStart, // Начало ссылки.
bgName = options.bgName, // Имена ссылок (уникальная часть).
bgEnd = options.bgEnd, // Конец ссылки.
name = options.name, // Название.
text = options.text, // Описание.
descriptor = options.descriptor, // Вкл/Откл описание.
indicator = options.indicator, // Вкл/Откл индикатор.
slideHover = options.slideHover, // Подсветка слайда.
mainWidth = options.mainWidth, // Ширина слайдера.
mainHeight = options.mainHeight, // Высота слайдера.
mainTransition = options.mainTransition, // Скорость анимации.
indHeight = options.indHeight, // Высота подчёркивания.
indBg = options.indBg, // Цвет подчёркивания.
descHeight = options.descHeight, // Высота подписи.
slideHoverBg = options.slideHoverBg, // Цвет...