swiper slider 3d

html

<div class="swiper-container pagination-bottom" data-show-items="2" data-effect="coverflow" data-centered-slider="true" data-nospace="true" data-stretch="80" data-depth="250">
                            <div class="swiper-wrapper">

                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-1.png" alt="Рабочий стол">
                                </div>
                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-2.png" alt="Список классов">
                                </div>
                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-3.png" alt="Список учеников">
                                </div>
                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-4.png" alt="Профиль ученика">
                                </div>
                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-5.png" alt="Список сотрудников">
                                </div>
                                <div class="swiper-slide">
                                    <img src="/img/pages/edu-screen-6.png" alt="Управление учеником">
                                </div>
                            </div>

                            <!-- If we need pagination -->
                            <div class="swiper-pagination"></div>

                        </div>

js

IQJS.initSwiper = function () {
        var initIterator = 0;

        $('.swiper-container').each(function () {

            var $t = $(this);
            var index = 'swiper-unique-id-' + initIterator;
            var $breakPoints = false;
            $t.addClass('swiper-' + index + ' initialized').attr('id', index);
            $t.closest('.iqclub-module').find('.swiper-pagination').addClass('pagination-' + index);

            var $effect = ($t.data('effect')) ? $t.data('effect') : 'slide',
                $crossfade = ($t.data('crossfade')) ? $t.data('crossfade') : true,
                $loop = ($t.data('loop') == false) ? $t.data('loop') : true,
                $showItems = ($t.data('show-items')) ? $t.data('show-items') : 1,
                $scrollItems = ($t.data('scroll-items')) ? $t.data('scroll-items') : 1,
                $scrollDirection = ($t.data('direction')) ? $t.data('direction') : 'horizontal',
                $mouseScroll = ($t.data('mouse-scroll')) ? $t.data('mouse-scroll') : false,
                $autoplay = ($t.data('autoplay')) ? parseInt($t.data('autoplay'), 10) : 0,
                $autoheight = ($t.hasClass('auto-height')) ? true : false,
                $nospace = ($t.data('nospace')) ? $t.data('nospace') : false,
                $centeredSlider = ($t.data('centered-slider')) ? $t.data('centered-slider') : false,
                $stretch = ($t.data('stretch')) ? $t.data('stretch') : 0,
                $depth = ($t.data('depth')) ? $t.data('depth') : 0,
                $speed = ($t.data('speed')) ? $t.data('speed') : 300,
                $slidesSpace = ($showItems > 1 && true != $nospace ) ? 20 : 0;

            var $slides_per_screen = {};

            if ($t.data('md-slides')) {
                $slides_per_screen['1024'] = {
                    slidesPerView: $t.data('md-slides'),
                    slidesPerGroup: $t.data('md-slides')
                };
            }

            if ($t.data('sm-slides')) {
                $slides_per_screen['768'] = {
                    slidesPerView: $t.data('sm-slides'),
                    slidesPerGroup: $t.data('sm-slides')
                };
            }


            if ($showItems > 1) {
                $breakPoints = {
                    480: {
                        slidesPerView: 1,
                        slidesPerGroup: 1
                    },
                    768: {
                        slidesPerView: 2,
                        slidesPerGroup: 2
                    }
                };

                if (Object.keys($slides_per_screen).length) {
                    $breakPoints = $slides_per_screen;
                }

            }

            swipers['swiper-' + index] = new Swiper('.swiper-' + index, {
                pagination: '.pagination-' + index,
                paginationClickable: true,
                direction: $scrollDirection,
                mousewheelControl: $mouseScroll,
                mousewheelReleaseOnEdges: $mouseScroll,
                slidesPerView: $showItems,
                slidesPerGroup: $scrollItems,
                spaceBetween: $slidesSpace,
                keyboardControl: true,
                setWrapperSize: true,
                preloadImages: true,
                updateOnImagesReady: true,
                centeredSlides: $centeredSlider,
                autoplay: $autoplay,
                autoplayDisableOnInteraction: false,
                autoHeight: $autoheight,
                loop: $loop,
                breakpoints: $breakPoints,
                effect: $effect,
                fade: {
                    crossFade: $crossfade
                },
                speed: $speed,
                parallax: true,
                onImagesReady: function (swiper) {

                },
                coverflow: {
                    stretch: $stretch,
                    rotate: 0,
                    depth: $depth,
                    modifier: 2,
                    slideShadows: false
                },
                onSlideChangeStart: function (swiper) {

                    var $slider_slides = $t.closest('.iqclub-module-slider').find('.slider-slides');
                    if ($slider_slides.length) {
                        $slider_slides.find('.slide-active').removeClass('slide-active');
                        var activeIndex = 1;
                        if (1 === swiper.loopedSlides) {
                            activeIndex = swiper.activeIndex - 1;
                        } else {
                            activeIndex = swiper.activeIndex;
                        }
                        var $slides_item = $slider_slides.find('.slides-item');
                        activeIndex = activeIndex % $slides_item.size();
                        $slides_item.eq(activeIndex).addClass('slide-active');

                    }
                }
            });
            initIterator++;
        });

        //swiper arrows
        $('.btn-prev').on('click', function () {
            var current_id = $(this).closest('.iqclub-module-slider').find('.swiper-container').attr('id');
            swipers['swiper-' + current_id].slidePrev();
        });

        $('.btn-next').on('click', function () {
            var current_id = $(this).closest('.iqclub-module-slider').find('.swiper-container').attr('id');
            swipers['swiper-' + current_id].slideNext();
        });

        //swiper tabs

        $('.slider-slides .slides-item').on('click', function (e) {
            e.preventDefault();
            var current_id = $(this).closest('.iqclub-module-slider').find('.swiper-container').attr('id');
            var mySwiper = swipers['swiper-' + current_id];
            if ($(this).hasClass('slide-active')) return false;
            var activeIndex = $(this).parent().find('.slides-item').index(this);
            var $loop = (mySwiper.container.data('loop') === false) ? mySwiper.container.data('loop') : true;
            if (true === $loop) {
                activeIndex = activeIndex + 1;
            }
            mySwiper.slideTo(activeIndex);
            $(this).parent().find('.slide-active').removeClass('slide-active');
            $(this).addClass('slide-active');
            mySwiper.update();
            return false;
        });
    };