1

Здравствуйте, не получается перейти с первой картинки на последнюю.

$(function () {

  var width = 920;
  var animationSpeed = 1000;
  var pause = 3000;
  var currentSlide = 1;
  var currentminSlide = -1;

  var $slider = $("#slider");
  var $sliderContainer = $slider.find(".slides");
  var $slides = $sliderContainer.find(".image");
  var $butright = $("#next");
  var $butleft = $("#prev");

  var interval;

  function startSlider() {
    interval = setInterval(function () {
      $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
        currentSlide++;
        if (currentSlide == $slides.length) {
          currentSlide = 1;
          $sliderContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }
  function stopSlider() {
    clearInterval(interval);
  }

  //mouse hower 
  $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
  startSlider();

  function slideRight() {            
    $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
      currentSlide++;
      if (currentSlide == $slides.length) {
        currentSlide = 1;
        $sliderContainer.css('margin-left', 0);
      }
    });

    function slideLeft() {
      $sliderContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
        currentSlide--;
        if (currentSlide == $slides.length) {
          currentSlide = -1;                       
        }					
      });             
    }

    //next slide
    $($butright).click(function () {
      stopSlider();
      slideRight();
      startSlider();
    });

    //previous slide
    $($butleft).click(function () {
      stopSlider();
      slideLeft();
      startSlider();
    });    
  });
body, html {
  margin: 0;
  padding: 0;
}

#slider {
  width: 920px;
  height: 500px;
  margin: auto;
  overflow: hidden;
  background: #4b6f8a;
}

#slider .slides {
  display: block;
  width: 7700px;
  height: 700px;
  margin: 0;
  padding: 0;
}

#slider .image {
  float: left;
  list-style-type: none;
  width: 920px;
  height: 500px;
}

img {
  width: 100%;
}
    <div id="slider">
        <ul class="slides">
            <li class="image"><img src="http://srv2.jpg.co.il/7/54fa0685aeab8.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/6350753171_7f697d8014_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/2734222601_93aa7fd06c_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://magdeleine.co/wp-content/uploads/2015/03/2734224007_fa442a0ac1_o-1400x1400.jpg" /></li>
            <li class="image"><img src="http://srv2.jpg.co.il/7/54fa0685aeab8.jpg" /></li>
        </ul>
    </div>
 
    <button id="prev">prev</button>
    <button id="next">next</button>

2 ответа 2

1

Вы забыли закрывающуюся скобку в функции slideRight(). Поправите на код ниже и будет работать. Вот ваш рабочий вариант jsfiddle

function slideRight() {            
        $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
          currentSlide++;
          if (currentSlide == $slides.length) {
            currentSlide = 1;
            $sliderContainer.css('margin-left', 0);
          }
        });
    }
4
  • Ссылки на фиддл не приветствуются как основные. Как дополнение - да ради Бога, но сам код вставляйте тут, через "Фрагмент кода [Ctrl + M]".
    – user31688
    18 апр 2015 в 9:16
  • Ну так я привёл фрагмент, который на который нужно исправить. Фиддл как дополнение, что всё работает. В следующих ответах буду пользовать Ctrl + M
    – ArchDemon
    18 апр 2015 в 9:19
  • Ссылка на фиддл - есть, исполняемого кода в сообщении - нет, кое-то счёл бы это нарушением, так что...
    – user31688
    18 апр 2015 в 9:22
  • Проблема не в slideRight() а в slideLeft() . с первой картинки перейти на последнюю . извиняюсь за ошибку при переписывание !!
    – David Kern
    18 апр 2015 в 9:53
0

Вы пропустили закрывающую скобку в slideRight()

function slideRight() {            
$sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
  currentSlide++;
  if (currentSlide == $slides.length) {
    currentSlide = 1;
    $sliderContainer.css('margin-left', 0);
  }
})};
2
  • извиняюсь за ошибку при переписывание !!
    – David Kern
    18 апр 2015 в 10:04
  • Проблема не в slideRight() а в slideLeft() . с первой картинки перейти на последнюю .
    – David Kern
    18 апр 2015 в 10:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.