Reputation: 338

Dragging pictures in a slideshow

I've googled around for a while but can't find an answer for this. I have a slideshow type div on my site, where you can use the scrollbar to look through the images.

<div id="container" style="overflow-x: scroll; overflow-y: hidden; width: 700px; height: 300px;">
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/1.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/2.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/3.png')"></div>
</div>

just so you get the idea.. What I'd like to do is have the user able to use their mouse on the picture itself and swipe the divs, instead of using the scroll bar. Im assuming this would use jquery with drag and drop. honestly I don't really know where to start, any ideas?

Upvotes: 1

Answers (4)

baptx

Reputation: 3906

Here is a solution in pure JavaScript (no framework): https://www.cssscript.com/draggable-touch-slider-carousel/

We can see it live on the website above or on this other link they provided: https://codepen.io/cconceicao/pen/PBQawy

Quoting the website:

Create the html for the slider.

<div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide">Slide 1</span>
      <span class="slide">Slide 2</span>
      <span class="slide">Slide 3</span>
      <span class="slide">Slide 4</span>
      <span class="slide">Slide 5</span>
      ...
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

The necessary CSS styles for the slider.

.slider {
  width: 300px;
  height: 200px;
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}

#items {
  width: 10000px;
  position: relative;
  top: 0;
  left: -300px;
}

#items.shifting {
  transition: left .2s ease-out;
}

.slide {
  width: 300px;
  height: 200px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
}

Style the navigation controls.

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(ChevronLeft.png);
  left: -20px;
}

.next {
  background-image: url(ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

The necessary JavaScript to activate the slider.

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

function slide(wrapper, items, prev, next) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');
  
  // Mouse and Touch events
  items.onmousedown = dragStart;
  
  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);
  
  // Click events
  prev.addEventListener('click', function () { shiftSlide(-1) });
  next.addEventListener('click', function () { shiftSlide(1) });
  
  // Transition events
  items.addEventListener('transitionend', checkIndex);
  
  function dragStart (e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;
    
    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction (e) {
    e = e || window.event;
    
    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }
  
  function dragEnd (e) {
    posFinal = items.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }
  
  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }
}

Upvotes: 0

almost a beginner

Reputation: 1632

You can use JQuery's "Dragger" function, it allows the user to drag elements. The issue is, it is not compatible with Touch, but there are hacks that allows it to work with touchscreen, for example "jQuery UI Touch Punch". This works perfect, unless your whole screen is filled with elements that are effected with "Touch Punch", in that case, you will not be able to scroll up and down in your phone.

If you are not filling the whole page with elements that are effect with Touch Punch, this it is the best solution for you. Give it a try.

http://touchpunch.furf.com/

An example dragger function, this takes all the elements within ul, inside watchlist class, and allows it to be dragged left or right with the mouse, or with touch in your phone.

$(function() {
  var slides = $('#something').children().length;
  var slideWidth = $('#something').width();
  var min = 0;
  var max = -((slides - 1) * slideWidth);

  $("#something").width(slides * slideWidth).draggable({
    axis: 'x',
    drag: function(event, ui) {
      if (ui.position.left > min) ui.position.left = min;
      if (ui.position.left < max) ui.position.left = max;
    }
  });


});

Upvotes: 1