图像滑块 - 幻灯片动画 - jQuery

Question

Ok, i'm stuck. I need to implement animation on my slider over the jQuery. So far i done arrows (navigation) functionality but, can't figure it out how to add sliding effect (1, 2 seconds) after clicking the "next" and "prev" buttons. Anyone have idea?

 $(document).ready(function() { $('.next').on('click', function() { var currentImg = $('.current'); var nextImg = currentImg.next(); if(nextImg.length == 0) { nextImg = $('.slider-secondary img').first(); } currentImg.removeClass('current'); nextImg.addClass('current'); }); $('.previous').on('click', function() { var currentImg = $('.current'); var prevImg = currentImg.prev(); if(prevImg.length == 0) { prevImg = $('.slider-secondary img').last(); } currentImg.removeClass('current'); prevImg.addClass('current'); }); });

 <div class="container"> <div class="slider-primary"> <img src="Assets/arrow-blue-left.png" class="previous" alt="Prev"> <div class="slider-secondary"> <img src="Assets/slider-image-1.jpg" class="current"> <img src="Assets/slider-image-2.jpg"> <img src="Assets/slider-image-3.jpg"> <img src="Assets/slider-image-4.jpg"> <img src="Assets/slider-image-5.jpg"> <img src="Assets/slider-image-6.jpg"> <img src="Assets/slider-image-7.jpg"> <img src="Assets/slider-image-8.jpg"> <img src="Assets/slider-image-9.jpg"> </div> <img src="Assets/arrow-blue-right.png" class="next" alt="Next"> </div> </div>

Thanks a lot guys for your help and references. I appreciate it. Slider must not be automatic, it can work only on arrows(navigation) click, which are (and must be) images/icons. Also it's not alowed to use any existing scripts, plugins, etc.. so i tried to implement some further logic having in mind and considering all of the conditions above. It's actually one part of the code test. And must be in jQuery in which i don't flow so well obviously.

Here is the css part also

 *{ margin: 0; padding: 0; } .container, .slider-primary{ width:100%; margin:auto; overflow: hidden; position: relative; } .slider-secondary{ width:100%; height:600px; position:relative; overflow:hidden; float:left; } .slider-secondary img{ display:none; width:100%; height:100%; } .slider-secondary img.current{ display:inline-block; } .previous, .next{ float:left; cursor: pointer; position: absolute; top: 45%; width: 30px; height: 40px; } .previous{ margin-left:35px; z-index:100; } .next{ margin-left:-65px; z-index:100; }

Answer 1

You can use jQuery animate() Method. Here is the link to the documentation .

But I would suggest using any jQuery lightweight library for the same.

You can go for Responsive and Flexible Mobile Touch Slider - Swiper

Demo of the same!

Answer 2

Here is one working example. Hope it'll help you. for the full reference visit codepen

 $('.slider').each(function() {
      var $this = $(this);
      var $group = $this.find('.slide_group');
      var $slides = $this.find('.slide');
      var bulletArray = [];
      var currentIndex = 0;
      var timeout;

      function move(newIndex) {
        var animateLeft, slideLeft;

        advance();

        if ($group.is(':animated') || currentIndex === newIndex) {
          return;
        }

        bulletArray[currentIndex].removeClass('active');
        bulletArray[newIndex].addClass('active');

        if (newIndex > currentIndex) {
          slideLeft = '100%';
          animateLeft = '-100%';
        } else {
          slideLeft = '-100%';
          animateLeft = '100%';
        }

        $slides.eq(newIndex).css({
          display: 'block',
          left: slideLeft
        });
        $group.animate({
          left: animateLeft
        }, function() {
          $slides.eq(currentIndex).css({
            display: 'none'
          });
          $slides.eq(newIndex).css({
            left: 0
          });
          $group.css({
            left: 0
          });
          currentIndex = newIndex;
        });
      }

      function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          if (currentIndex < ($slides.length - 1)) {
            move(currentIndex + 1);
          } else {
            move(0);
          }
        }, 4000);
      }

      $('.next_btn').on('click', function() {
        if (currentIndex < ($slides.length - 1)) {
          move(currentIndex + 1);
        } else {
          move(0);
        }
      });

      $('.previous_btn').on('click', function() {
        if (currentIndex !== 0) {
          move(currentIndex - 1);
        } else {
          move(3);
        }
      });

      $.each($slides, function(index) {
        var $button = $('<a class="slide_btn">&bull;</a>');

        if (index === currentIndex) {
          $button.addClass('active');
        }
        $button.on('click', function() {
          move(index);
        }).appendTo('.slide_buttons');
        bulletArray.push($button);
      });

      advance();
    });

Answer 3

Try below way. I have created a demo for you.

Please Find below code:

Html:

<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 

Css:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

Js:

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

I hope this will help you. Let me know if you have any query.

Thank you.