Почему моя карусель не работает, а переводит меня в начало страницы?Jquery

Программирование на jquery
Ответить
Anonymous
 Почему моя карусель не работает, а переводит меня в начало страницы?

Сообщение Anonymous »

У меня проблемы с кодом. Я пытался создать карусель для своего веб-сайта, и есть две проблемы: первая — кнопки карусели не работают, они просто переносят меня в начало страницы. страница, которую я пытался противодействовать с помощью JS, во-вторых, карусель не работает, слайды не меняются должным образом.
Вот мой 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»