Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <title>JS Bin</title>
  
  <style>
    body {
      background-color: #222;
    }
​
    .swiper-container {
      opacity: 0;
      transition: opacity .5s;
    }
    
    .swiper-slide .content {
      position: relative;
    }
    
    .swiper-slide .overlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: .7;
    }
    
    .swiper-container.anim .swiper-slide .content {
      transition: transform .25s;
    }
    
    .swiper-container.anim .swiper-slide .overlay {
      transition: opacity .25s;
    }
    
    .swiper-slide-active.zoom .content {
      transform: scale(2);
      transform-origin: center top;
    }
    
    .swiper-slide-active.zoom .overlay {
      opacity: 0
    }
  </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 1">
                <div class="overlay"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 2">
                <div class="overlay"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 3">
                <div class="overlay"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 4">
                <div class="overlay"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 5">
                <div class="overlay"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content">
                <img src="https://media.wired.com/photos/651c76f4574790876e74efc1/1:1/w_1592,h_1592,c_limit/Tik-Tok-EU-Data-Centers-Business-1258278519.jpg" alt="Изображение 6">
                <div class="overlay"></div>
              </div>
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
  
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        class MySwiper extends Swiper {
            _previousActiveIndex
​
            constructor() {
              const swiperContainer = document.querySelector('.swiper-container')
              
              const params = {
                spaceBetween: 20,
                slidesPerView: 5,
                centeredSlides: true,
                centeredSlidesBounds: true,
                loop: true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev'
                },
                on: {
                  init: () => {
                    swiperContainer.style.opacity = 1
                  }
                }
              }
              
              super(swiperContainer, params)
              
              this._initEvents()
              
              this.el.offsetHeight
              this.el.classList.add('anim')
            }
          
            _initEvents() {
              this.on('activeIndexChange', this._activeIndexChange, this)
              
              this._activeIndexChange()
            }
          
            _activeIndexChange() {
                if (this.activeIndex !== this._previousActiveIndex) {
                  const prevSlide = this.slides[this._previousActiveIndex]
                  const activeSlide = this.slides[this.activeIndex]
​
                  if (!prevSlide) {
                    this._zoomActiveSlide()
                  }
                  else {
                    prevSlide.classList.remove('zoom')
                    
                    const switchDelay = 150
                    
                    setTimeout(() => {
                        prevSlide.style.zIndex = ''
                      
                         this._zoomActiveSlide()                     
                    }, switchDelay)
                  }
​
                  this._previousActiveIndex = this.activeIndex
                }
            }
          
          _zoomActiveSlide() {
            const activeSlide = this.slides[this.activeIndex]
​
            activeSlide.style.zIndex = 1
            activeSlide.classList.add('zoom')
          }
        }
      
      const swiper = new MySwiper()
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers