$(document).ready(function ()
{
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
const condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").hide();
$(".rightLst").show();
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).show();
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).hide();
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).show();
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).hide();
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
我制作了一个滑块，但它没有响应，并且还想在CSS中进行一些更改以改善UI。
我想要下一个和上一个按钮，就像第二张图片一样。 第一张图片显示了我为网站制作的滑块，但我希望滑块与第二张图片完全一样。
请帮助我使其具有响应性，并在图像之外添加按钮。
.MultiCarousel
{
float: left;
overflow: hidden;
padding:1px 0px 1px 10px;
width:100%;
position:relative;
}
.MultiCarousel .MultiCarousel-inner
{
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item
{
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div
{
text-align:left;
/*padding:5px;
margin:10px; */
/*background:#f1f1f1; */
color:#666;
}
.MultiCarousel .MultiCarousel-inner .item .pad15 a
{
text-decoration: none;
color:#333333;
}
.MultiCarousel .MultiCarousel-inner .item .pad15 a > img
{
height:170px;
width:282px;
border-radius:10px;
}
.MultiCarousel .leftLst, .MultiCarousel .rightLst
{
/*content:'\f000';*/
position:absolute;
border-radius:50%;
top:calc(50% - 45px);
}
.MultiCarousel .leftLst
{
left:0;
height:50px;
width:50px;
font-size:20px;
}
.MultiCarousel .rightLst
{
right:0;
height:50px;
width:50px;
font-size:20px;
}<section class="text-center">
<h1 class="panel-heading">Repair Service</h1>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="4" id="MultiCarousel" data-interval="5000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/ac_service_and_repair">
<img src="<?php echo base_url();?>assets/images/banner.jpg">
<p class="lead">AC service & repair</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/carpenter_service">
<img src="<?php echo base_url();?>assets/images/service/carpentry.png">
<p class="lead">Carpenter service</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/electrical_work_service">
<img src="<?php echo base_url();?>assets/images/service/cleaning.png">
<p class="lead">Electrical Service</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/geyser_repair">
<img src="<?php echo base_url();?>assets/images/service/electrical.png">
<p class="lead">Geyser Repair</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/plumber_service">
<img src="<?php echo base_url();?>assets/images/service/geyser.png">
<p class="lead">Plumber Service</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/refrigerator_repair">
<img src="<?php echo base_url();?>assets/images/service/painting.png">
<p class="lead">Refrigerator Repair</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/ro_and_water_purifier">
<img src="<?php echo base_url();?>assets/images/service/pest.png">
<p class="lead">RO and Water Purifier</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/tv_repair">
<img src="<?php echo base_url();?>assets/images/service/plumbing.png">
<p class="lead">TV repair</p>
</a>
</div>
</div>
<div class="item">
<div class="pad15">
<a href="<?php echo base_url();?>User_controller/washing_machine_repair">
<img src="<?php echo base_url();?>assets/images/service/vehicle.png">
<p class="lead">Washing Machine Repair</p>
</a>
</div>
</div>
</div>
<button class="btn btn-dark leftLst"><span class="fa fa-angle-left"></span></button>
<button class="btn btn-dark rightLst"><span class="fa fa-angle-right"></span></button>
</div>
</div>
</div>
</section>
