LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.carousel {
  margin: 0 auto;
}
.carousel .slick-slide {
  perspective: 800px;
  position: relative;
  z-index: 0;
}
.carousel .slick-slide img {
  transform: translateX(-50%);
  margin-left: 50%;
  transition: transform .5s, opacity .5s;
  box-shadow: 0 0 4px 4px #AAAAAA;
}
.carousel .slide-prev img {
  transform: translateX(-50%) rotateY(30deg) scale(0.8);
}
.carousel .slide-next img {
  transform: translateX(-50%) rotateY(-30deg) scale(0.8);
}
.carousel .slick-current {
  position: relative;
  z-index: 100;
}
.carousel .slick-current img {
  transform: translateX(-50%);
}
JS
$(function() {
    $('.carousel')
        .slick({
            slidesToShow: 5,
            centerMode: true,
            // focusOnSelect: true,
            // arrows: false,
            // centerPadding: '400px',
        })
        .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            const $slides = $(slick.$slides);
            // If you're actually moving left or right
            if (nextSlide - currentSlide !== 0) {
                // Remove all the next/prev classes
                $slides.add('.slick-cloned').removeClass('slide-prev slide-next').css('z-index', 0);
                $(currentSlide).css('z-index', 10);
                // Calculate how many slides we're changing and whether or not we're looping from one end to the other
                let slidesToMove = Math.abs(nextSlide - currentSlide);
                const loop = slidesToMove > Math.round(slick.options.slidesToShow / 2);
        
                if (!loop) {
                    // Apply next/prev classes to all slides based on the slide you're moving to
                    $slides.eq(nextSlide)
                        .nextAll().addClass('slide-next').end()
                        .prevAll().addClass('slide-prev');
                } else {
                    // Recalculate how many slides we're moving to a relative number
                    slidesToMove = slick.slideCount - slidesToMove;
                    
                    if (nextSlide - currentSlide > 0) { // We're moving left
                        // Apply next/prev classes to all slides, reversing classes on the left end for when we wrap around
                        $slides.eq(nextSlide)
                            .nextAll().add($slides.slice(0,3)).addClass('slide-next').end()
                            .prevAll().not($slides.slice(0,3)).addClass('slide-prev');
                        // Get all the visible cloned slides on the left
                        let $clones = $('.slick-active.slick-cloned.slide-prev');
                        // Mark the clone we're going to (and anything on the way) as current
                        $clones.slice(-slidesToMove).removeClass('slide-next slide-prev');
                        // If we're jumping multiple slides back from the first slide, flip to classes for the clones in between
                        if (slidesToMove > 1 && currentSlide == 0) {
                            $clones.slice(-slidesToMove + 1).addClass('slide-next');
                        }
                    } else if (nextSlide - currentSlide < 0) { // We're moving right
                        // Apply next/prev classes to all slides, reversing classes on the right end for when we wrap around
                        $slides.eq(nextSlide)
                            .nextAll().not($slides.slice(-3)).addClass('slide-next').end()
                            .prevAll().add($slides.slice(-3)).addClass('slide-prev');
                        // Get all the visible cloned slides on the right
                        let $clones = $('.slick-active.slick-cloned.slide-next');
                        // Mark the clone we're going to (and anything on the way) as current
                        $clones.slice(0, slidesToMove).removeClass('slide-next slide-prev');
                        // If we're jumping multiple slides forward from the last slide, flip to classes for the clones in between
                        if (slidesToMove > 1 && currentSlide + 1 == slick.slideCount) {
                            $clones.slice(0, slidesToMove - 1).addClass('slide-prev');
                        }
                    }  
                }
            }
        })
        .on('afterChange', function(event, slick, currentSlide) {
            // $('.slick-slide').not('.slick-active').find('img').css('opacity', 0);
            // $('.slick-active img').css('opacity', 1);
        });
});
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv