I'm working on a parallax slick carousel. I am trying to find out how you can go about activating the parallax during a drag. I think its activating during a slide when you click on the arrows.

/

// On before slide change
 $('.data').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    console.log("beforeChange");
     //console.log(nextSlide);
     parallaxAnimate(this, currentSlide, nextSlide);
 });

I'm working on a parallax slick carousel. I am trying to find out how you can go about activating the parallax during a drag. I think its activating during a slide when you click on the arrows.

http://jsfiddle/ayve1nmf/27/

// On before slide change
 $('.data').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    console.log("beforeChange");
     //console.log(nextSlide);
     parallaxAnimate(this, currentSlide, nextSlide);
 });

• javascript
• jquery

• here is a new jsfiddle with the drag properties in place. jsfiddle/ayve1nmf/173 – The Old County Commented Feb 29, 2016 at 12:04

2 Answers 2

You'll need to apply your own dragstart or dragging event(s). It's pretty easy, the basics of it would be something like this

// Event to initiate drag, include touchstart events
$('.data').on('mousedown', function(e){

 // Drag start logic
 // ...

 // Event to end drag, may want to include touchend events
 $(this).one('mouseup', function(e){

  $(this).off('mousemove');
  // Drag stop logic
  // ...

 }).on('mousemove', function(e){

  // Logic for dragging, can get mouse position
  // will probably want to throttle
  // possibly include touchmove events also
  console.log(e.pageX);

 });

});

Complete Example

 $(document).ready(function () {

//

     
     $('.data').slick();


     /*
    startDragPosition = event.pageX;
    $mover.bind(
        'mousemove',
        function( e ) {
            $mover.css({
                'marginLeft': -(300 + startDragPosition - e.pageX)
            });
        }
    );*/
       
    
    var parallaxAnimate = function(el, currentSlide, nextSlide){
        console.log("parallax animate");

        var increment = "+";

         if (currentSlide > nextSlide) {
             increment = "-";
         }

         $(el).find(".parallaxback img:visible").animate({
             left: increment + "=15"
         }, 400, function () {
             // Animation plete.
         });       
    };



     // On edge hit
     $('.data').on('mousemove', function (e) {
        //console.log('mousemove', e);
     });


     // On breakpoint event
     $('.data').on('breakpoint', function (event, slick, breakpoint) {
         console.log("breakpoint", breakpoint);         
     });

     // On swipe event
     $('.data').on('swipe', function (event, slick, direction) {
         console.log(direction);
         
     });

     // On edge hit
     $('.data').on('edge', function (event, slick, direction) {
        // console.log('edge was hit')
     });




     // On after slide change
     $('.data').on('afterChange', function (event, slick, currentSlide) {
         console.log("afterChange");
         //parallaxAnimate(this, currentSlide, nextSlide);
     });

     // On before slide change
     $('.data').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        console.log("beforeChange");
         //console.log(nextSlide);
         parallaxAnimate(this, currentSlide, nextSlide);
     });
     
    // Fiddle me this...
    // Event to initiate drag, include touchstart events
    $('.data').on('mousedown', function(e){

     // Drag start logic
     // ...
     console.log('drag has started');

     // Event to end drag, may want to include touchend events
     $(this).one('mouseup', function(e){

      $(this).off('mousemove');
      // Drag stop logic
      // ...
      
      console.log('drag has stopped');

     }).on('mousemove', function(e){

      // Logic for dragging, can get mouse position
      // will probably want to throttle
      // possibly include touchmove events also
      console.log('drag move', e.pageX);

     });

    });

            

 });

.container{
    height: 400px;
    width: 500px;
    border: 1px solid black;
}

.block {
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
    background: #fff;
    height: 170px;
    color: #3498db;
    font-size: 22px;
    margin: 10px;
    position: relative;
    text-align: center;
    overflow: hidden;
}
body {
    background: grey;
}
.parallaxback {
    position: absolute;
    top: 0;
    left: 0;
}
.parallaxback img {
    width: 350px;
    position: relative;
    left:-50px;
}
.slick-arrow {
    position: absolute;
    top:-20px;
}
.slick-prev {
    left:0;
}
.slick-next {
    right:0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" />
 <h2>Carosuel</h2>

<div class="container">

<div class="data" data-slick='{ "infinite": false, "slidesToShow": 4, "slidesToScroll": 2}'>
    <div class="block">
         <h3>1</h3>

        <div class="parallaxback">
            <img src="http://www.mrgraymedia.co.uk/gcsemedia/images/ics/captainamerica.jpg">
        </div>
    </div>
    <div class="block">
         <h3>2</h3>

        <div class="parallaxback">
            <img src="http://static.icvine./uploads/scale_super/6/67663/3439485-03c.jpg">
        </div>
    </div>
    <div class="block">
         <h3>3</h3>

        <div class="parallaxback">
            <img src="http://blog.1979semifinalist./wp-content/uploads/2009/07/093-john-byrne.jpg">
        </div>
    </div>
    <div class="block">
         <h3>4</h3>

        <div class="parallaxback">
            <img src="http://static.icvine./uploads/scale_super/6/66303/3481801-detective+01.jpg">
        </div>
    </div>
    <div class="block">
         <h3>5</h3>

        <div class="parallaxback">
            <img src="https://superherogeorge.files.wordpress./2015/03/iron-man-peel-and-stick-ic-book-cover-900x1288.jpg">
        </div>
    </div>
    <div class="block">
         <h3>6</h3>

        <div class="parallaxback">
            <img src="http://www.wired./images_blogs/underwire/2009/12/1982-wolverine-1-4.jpg">
        </div>
    </div>
    <div class="block">
         <h3>7</h3>

        <div class="parallaxback">
            <img src="http://41.media.tumblr./tumblr_m7hijdSwXT1qdyv2wo1_1280.jpg">
        </div>
    </div>
    <div class="block">
         <h3>8</h3>

        <div class="parallaxback">
            <img src="http://melleum./data/uploads/11/299782-ic-book.jpg">
        </div>
    </div>
    <div class="block">
         <h3>9</h3>

        <div class="parallaxback">
            <img src="http://www.mrgraymedia.co.uk/gcsemedia/images/ics/hulk.jpg">
        </div>
    </div>
</div>
        
        </div>

</html>

$('body').on('swipe', '.slick-slider', function(event, slick, direction){
    event.stopPropagation();
});