Простой слайдер контента не работает должным образом

Question

Я работаю над простым слайдером контента, чтобы показать отзывы клиентов в трех слайдах. Это код, который у меня есть до сих пор JSFiddle, но каким-то образом он показывает мне, как 3 + слайды (вместо того, чтобы показывать три div, он показывает путь более «пустым»). Поэтому после третьего слайда он должен начинаться с 1-го слайда снова.

Другая проблема, с которой я сталкиваюсь, заключается в том, что она работает на JSfiddle, но когда я копирую и вставляю ее в свой html, это не сработает.

две линии, которые я добавил в моем HTML являются

<script src="Webdesign/NagelsalonHintham/js/functions.js"></script> 
<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 

Пожалуйста, кто-то может мне помочь.

Answer 1

Чтобы ответить на ваш первый вопрос, причина, по которой вы получаете больше слайдов, чем хотите, - это то, что вам нужно быть более конкретным в вашей JS.

Ваши обработчики событий следующей и предыдущей кнопки используют анимацию jQuery для перемещения div 'slidie' - это прекрасно. Однако вам нужно добавить дополнительную логику, чтобы остановить анимацию div еще дальше и дальше, если в этом конкретном направлении больше нет слайдов. Я изменил свои JS, чтобы осуществить то, что я верю, что вы хотели:

var sliderWidth = 300; 
var slider = $('#slidie'); 
var sliderCount = $('div', slider).length; 
slider.width(sliderCount * sliderWidth); 

var currentSlide = 1; 

$('a.prev').click(function() { 
    if (currentSlide > 1) { 
     $('#slidie').animate({ 
      left: '+=' + sliderWidth 
     }, 500); 
     currentSlide -= 1; 
    } 
}); 

$('a.next').click(function() { 
    if (currentSlide < sliderCount) { 
     $('#slidie').animate({ 
      left: '-=' + sliderWidth 
     }, 500); 
     currentSlide += 1; 
    } 
}); 

Все, что я добавил это дополнительная переменная называется currentSlide, которая инициализируется 1. Это необходимо для того, чтобы вы отслеживать, какие слайд в настоящее время отображается пользователю.

Затем в обоих обработчиках событий вы проверяете, есть ли currentSlide, чтобы анимация разрешалась. Вам нужно только, чтобы кнопка prev работала, если текущий слайд > 1, то есть вы не на первом слайде. Аналогично, вы хотите, чтобы следующая кнопка работала, если текущий слайд < sliderCount, то есть вы не находитесь на последнем слайде.

После выполнения анимации вы также должны обязательно изменить currentSlide, чтобы синхронизировать его с тем, что пользователь просматривает. Это делается с помощью строк кода currentSlide -= 1 и currentSlide += 1.

Чтобы ответить на ваш второй вопрос, я полагаю, что проблема заключается в том, что jQuery не закончил загрузку до того, как ваш код будет выполнен. Я бы в первую очередь изменять порядок тегов сценариев в HTML, так что загружается JQuery первым:

<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 
<script src="Webdesign/NagelsalonHintham/js/functions.js"></script> 

Кроме того, по соображениям безопасности, я бы обернуть свой код в готовом случае JQuery DOM. Это в основном означает, что код, который вы пишете, выполняется только после того, как ваш DOM (инфраструктура, позволяющая JS получить доступ к HTML-странице) будет сконструирован вашим браузером. Поэтому, если вы ссылаетесь на любые теги (которые вы делаете), вы знаете, что теги существуют до запуска JS. Это показано ниже:

$(document).ready(function() { 

    // Your code from above goes here 

}); 

Причина, по которой работает в JSFiddle, потому что они делают JQuery в том числе для вас, в том числе ввод кода в нужном месте (по умолчанию). Вы можете изменить это в левой части окна JSFiddle.

Для справки, работая JSFiddle для этого решения здесь: http://jsfiddle.net/EULJd/