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 lang="en">
​
<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
​
<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
​
      <div class="swiper-slide">
        <img class="slide-img" src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg" alt="">
      </div>
      
      <div class="swiper-slide">
        <img class="slide-img" src="https://th.bing.com/th/id/OIG.gq_uOPPdJc81e_v0XAei" alt="">
      </div>
      
      <div class="swiper-slide">
        <img class="slide-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvi7hCG81V1BSAym7CqlvRIF_sbPo7IV7zHQ&usqp=CAU" alt="">
      </div>
      
      <div class="swiper-slide">
        <img class="slide-img" src="https://img.freepik.com/premium-photo/whimsical-garden-with-glowing-translucent-glass-flowers-generative-ai_862745-225.jpg" alt="">
      </div>
      
      <div class="swiper-slide">
        <img class="slide-img" src="https://imgv3.fotor.com/images/slider-image/A-clear-image-of-a-woman-wearing-red-sharpened-by-Fotors-image-sharpener.jpg" alt="">
      </div>
      
      <div class="swiper-slide empty-slide"></div>
​
    </div>
    
    <div class="info-block">
      <div class="label">Дополнительные опции</div>
      <div class="next btn">→</div>
      <div class="prev btn">←</div>
    </div>
  </div>
​
  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
​
  <!-- Initialize Swiper -->
  <script>
    const swiperConfig = {
      slidesGap: 10,
      slidesPerView: 4,
      showInfoBlock: true,
      breakpoints: {
        600: {
           showInfoBlock: false,
           slideWidth: 300
        }
      }
    }
​
class MySwiper extends Swiper {
  #infoBlock = null
  
  #config = null
​
    constructor( config ) {
        super('.mySwiper', { slidesPerView: 'auto' })
    
    this.#config = config
    
    this._initInfoBlock()
​
    this.on('resize', () => this._onChange())
    this.on('slideChange', () => this._onChange())
    
    this._onChange()
​
    setTimeout(() => this.el.classList.add('ready'))
    }
  
  _initInfoBlock() {
    this.#infoBlock = document.querySelector('.info-block')
    
    const prevBtn = this.#infoBlock.querySelector('.prev')
    const nextBtn = this.#infoBlock.querySelector('.next')
    
    prevBtn.addEventListener('click', () => this.slidePrev())
    nextBtn.addEventListener('click', () => this.slideNext())
  }
​
   _getConfig() {
     const breakpoints = Object.keys(this.#config.breakpoints)
     let config = Object.assign({}, this.#config)
​
     for (const width of breakpoints) {
       if (window.innerWidth <= width) {
         config = Object.assign(config, this.#config.breakpoints[width])
          
         break
       }
     }
     
     return config
   }
  
    _onChange() {
    const config = this._getConfig()
    const { slidesGap, slidesPerView, showInfoBlock } = config
    
    // Ширина слайда
    const slideWidth = config.slideWidth || (this.el.offsetWidth / slidesPerView)
​
    if (showInfoBlock) {
      this.#infoBlock.style.display = ''
      this.#infoBlock.style.width = `${ slideWidth }px`
      this.#infoBlock.style.transform = `translateX(${ slideWidth * 2 }px)`
      
      this.el.classList.remove('noInfoBlock')
    }
    else {
      this.#infoBlock.style.display = 'none'
      
      this.el.classList.add('noInfoBlock')
    }
​
    // Смещение слайдов после слайда secondSlideIndex
    const secondSlideIndex = this.activeIndex + 1
​
    this.slides.forEach((item, index) => {
      if (index <= secondSlideIndex || !showInfoBlock) {
        item.style.transform = ''
      }
      else {
        const leftOffset = (slideWidth + slidesGap) * 1
​
        item.style.transform = `translateX(${ leftOffset }px)`
      }
​
      item.style.width = `${ slideWidth }px`
      item.style.paddingRight = `${ slidesGap }px`
    })
​
    this.slideTo(this.activeIndex)
    this.updateSlides()
  }
}
​
new MySwiper(swiperConfig)
  </script>
</body>
​
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers