Skip to content

Instantly share code, notes, and snippets.

@catchicktin

catchicktin/Slick Slider animation

Forked from mdsalim/Slick Slider animation
Created June 9, 2023 07:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save catchicktin/907a0446c0c195c96a2358151100ba3c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save catchicktin/907a0446c0c195c96a2358151100ba3c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mdsalim mdsalim revised this gist Apr 3, 2018. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions Slick Slider animation
    View file
    Original file line number Diff line number Diff line change
    @@ -59,9 +59,11 @@
    // dots
    .slider-active .slick-dots {
    text-align: center;
    top: -50px;
    bottom: 30px;
    z-index: 99;
    position: relative;
    position: absolute;
    left: 0;
    right: 0;
    }
    .slider-active .slick-dots li {
    display: inline-block;
  2. @mdsalim mdsalim revised this gist Apr 3, 2018. 1 changed file with 24 additions and 1 deletion.
    25 changes: 24 additions & 1 deletion Slick Slider animation
    View file
    Original file line number Diff line number Diff line change
    @@ -54,4 +54,27 @@
    z-index: 9;
    border-radius:30px
    }
    .slider-active button.slick-next{left: auto;right:30px}
    .slider-active button.slick-next{left: auto;right:30px}

    // dots
    .slider-active .slick-dots {
    text-align: center;
    top: -50px;
    z-index: 99;
    position: relative;
    }
    .slider-active .slick-dots li {
    display: inline-block;
    margin: 0 4px
    }
    .slider-active .slick-dots li button {
    background: no-repeat;
    border: 0;
    height: 10px;
    width: 5px;
    text-indent: -9999px;
    background: #fff;
    transition: .3s;
    padding: 0;
    }
    .slider-active .slick-dots li.slick-active button{height: 15px}
  3. @mdsalim mdsalim revised this gist Apr 3, 2018. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion Slick Slider animation
    View file
    Original file line number Diff line number Diff line change
    @@ -35,4 +35,23 @@
    });
    }
    }
    mainSlider();
    mainSlider();


    // css button
    .slider-active button.slick-arrow {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    background: #fff;
    width: 80px;
    font-size: 27px;
    padding: 0;
    color: #444;
    z-index: 9;
    border-radius:30px
    }
    .slider-active button.slick-next{left: auto;right:30px}
  4. @mdsalim mdsalim created this gist Mar 18, 2018.
    38 changes: 38 additions & 0 deletions Slick Slider animation
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    function mainSlider() {
    var BasicSlider = $('.slider-active');
    BasicSlider.on('init', function(e, slick) {
    var $firstAnimatingElements = $('.single-slider:first-child').find('[data-animation]');
    doAnimations($firstAnimatingElements);
    });
    BasicSlider.on('beforeChange', function(e, slick, currentSlide, nextSlide) {
    var $animatingElements = $('.single-slider[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
    doAnimations($animatingElements);
    });
    BasicSlider.slick({
    autoplay: false,
    autoplaySpeed: 10000,
    dots: false,
    fade: true,
    arrows: false,
    responsive: [
    { breakpoint: 767, settings: { dots: false, arrows: false } }
    ]
    });

    function doAnimations(elements) {
    var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    elements.each(function() {
    var $this = $(this);
    var $animationDelay = $this.data('delay');
    var $animationType = 'animated ' + $this.data('animation');
    $this.css({
    'animation-delay': $animationDelay,
    '-webkit-animation-delay': $animationDelay
    });
    $this.addClass($animationType).one(animationEndEvents, function() {
    $this.removeClass($animationType);
    });
    });
    }
    }
    mainSlider();