Вот мой scss
.customer-reviews{
background: linear-gradient(
304deg,
rgba(18, 104, 94, 1) 28%,
rgba(113, 53, 194, 1) 100%
);
color:white;
width:100%;
text-align:center;
.container{
padding-top:80px;
padding-bottom:80px;
margin: 0 auto;
overflow: hidden;
width:800px;
}
.carousel{
display:flex;
flex-direction:row;
align-items:center;
margin:40px;
transition: transform 0.3s ease;
gap:15%;
}
.carousel-slide{
flex: 0 0 100%;
width:650px;
}
.control{
position:absolute;
display:inline-block;
text-align:center;
align-content:center;
width:48px;
height:48px;
font-size:24px;
background-color:white;
color:#12685E;
border-radius:5px;
}
.prev{
left:5%;
}
.next{
right:5%;
}
.carousel{
display:flex;
flex-direction:column;
align-items:center;
margin:40px;
}
.carousel-item{
width:60%;
}
#carousel {
position: relative;
overflow: hidden;
display: flex;
flex-direction: row;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}
a{
text-decoration: none;
color:white;
}
ul li {
list-style-type: none;
}
ul {
padding: 0;
margin: 0;
}
}
Вот мой HTML:
What our customers have to say
- {% if site.data.customer-reviews %}
{% assign cr = site.data.customer-reviews %}
{% for entry in cr %}
{% assign key = entry | first %} -
{{ cr[key].review }}
{{ cr[key].title }}
{{ cr[key].description }}
{% endfor %}
{% endif %}
вот мой JavaScript:
jquery(document).ready(function($) {
let slideCount = $('#carousel ul li').length;
let slideWidth = $('#carousel ul li').outerWidth();
let slideHeight = $('#carousel ul li').height();
let sliderUlWidth = slideCount * slideWidth;
$('#carousel').css({ width: slideWidth, height: slideHeight });
$('#carousel ul').css({ width: sliderUlWidth, marginLeft: -slideWidth });
$('#carousel ul li:last-child').prependTo('#carousel ul');
function moveLeft() {
$('#carousel').animate({
left: + slideWidth
}, 200, function() {
$('#carousel ul li:last-child').prependTo('#carousel ul');
$('#carousel ul').css('left', '');
});
}
function moveRight() {
$('#carousel').animate({
left: -slideWidth
}, 200, function() {
$('#carousel ul li:first-child').appendTo('#carousel ul');
$('#carousel ul').css('left', '');
});
}
$('a.prev').on('click', function(event) {
event.preventDefault();
moveLeft();
});
$('a.next').on('click', function(event) {
event.preventDefault();
moveRight();
});
});
Подробнее здесь: https://stackoverflow.com/questions/791 ... f-the-page
Мобильная версия