Я новичок в JQuery и пытаюсь создать слайдер продукта для своего веб-сайта. У меня были некоторые проблемы, поэтому я сделал базовую c версию в этом вопросе. По какой-то причине мне не удалось заставить его работать, и я понятия не имею, почему.
Три коробки с продуктами будут анимироваться как секция, а не по отдельности, как на этой https://smartslider3.com/product-carousel/. Анимация будет go справа налево при нажатии предыдущей кнопки и слева направо при нажатии следующей кнопки, но в данный момент я оставил ее как слайд вверх и вниз, потому что я не знаю правильный код для анимация. Также было бы неплохо иметь поддержку сенсорного пролистывания.
$( document ).ready(function() {
$("#slider-next-button").click(function(){
var currentSlider = $(".active");
var nextSlide = currentSlider.next();
currentSlider.slideDown(2000);
currentSlider.removeClass(active);
nextSlide.slideUp(2000);
nextSlide.slideUp(2000);
})
});
;
.content{
width: 80%;
margin: auto;
}
.slider-section{
background-color: lightgrey;
height: 600px;
padding: 50px 0px 0px 0px;
}
.slider-container{
display: grid;
grid-template-columns: 1fr 12fr 1fr;
grid-column-gap: 20px;
}
.slider-previous-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-next-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-items{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.slider-items.active{
display: grid;
}
.slider-item{
background-color: blue;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="css/slidertest.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div class="slider-section">
<div class="content">
<div class="slider-container">
<div class="slider-previous-button"><p></p></div>
<div class="slider-items active">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="slider-next-button"><p></p></div>
<div class="slider-items">
<div class="slider-item">4</div>
<div class="slider-item">5</div>
<div class="slider-item">6</div>
</div>
<div class="slider-items">
<div class="slider-item">7</div>
<div class="slider-item">8</div>
<div class="slider-item">9</div>
</div>
</div>
</div>
</div>
</body>
</html>