Swiper.js Collapse Slider Layout

Asked 1 years ago, Updated 1 years ago, 68 views

What do you want to do
As shown in the capture below, the active image of the slider is displayed at the center, and the images of the front and rear elements adjacent to the active image are displayed one by one.
https://gyazo.com/c86fcc89613d7e7efe3bf351a578a49f

Current State
The position of the active image has shifted considerably from the center, and the layout has collapsed.
https://gyazo.com/e2daab7be34497cb6e5631c7bbcd8add

Code of interest

<div class="main-visual">
    <div class="add-wrapper">
        <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide 1">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide 2">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide 3">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide 4">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide 5">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
            </div>
            <!--swiper pageation-->
            <div class="swiper-pagination page1"></div>
            <!--Navigation-->
            <div class="swiper-button-prev prev1">/div>
            <div class="swiper-button-next next 1"></div>
        </div>
    </div>
</div>

.main-visual{
  width: 100%;
  height —522px;
  background-image:url(hoge);
  background-repeat:repeat;
  z-index:0;
  background-color:#F0F0F0;
  overflow-x — hidden;
  overflow-y — hidden;
  position:relative;
}

.add-wrapper{
  margin-left —auto;
  margin-right —auto;
  max-width —900px;
}

.swiper1{
  width: 100%;
  overflow:visible;
  z-index:1;
  height:520px;
}

.swiper1.swiper-slide {
  vertical-align:middle;
  margin-top —88px;
}

.swiper1.swiper-slide.mv-img{
  width: 670px!important;
  height:335px!important;
}

.swiper1.swiper-slide-active {
  height —450px!important;
  width —900px!important;
  margin-top: 30px;
}

.swiper1.swiper-slide-active.mv-img{
  height —450px!important;
  width —900px!important;
}

.swiper1.swiper-slide-prev,
.swiper1.swiper-slide-next {
  width: 670px!important;
  height:335px!important;
}

.swiper1.swiper-slide-prev::after,
.swiper1.swiper-slide-next::after{
  content: ";
  position:absolute;
  display:block;
  top:0;
  left:0;
  width: 100%;
  height —100%;
  background —rgba(0,0,0,0.7);
}

.swiper1.swiper-slide-prev.mv-img,
.swiper1.swiper-slide-next.mv-img{
  width: 670px!important;
  height:335px!important;
}

.swiper1.swiper-pagination{
  width: 100%;
  left:0;
  bottom —10px;
}

.swiper1.swiper-button-next {
  width —32px;
  height —60px;
}

.swiper1.swiper-button-prev{
  width —32px;
  height —60px;
}

.swiper-pagination-bullet-active {
  opacity:1;
  background: #91d539;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
'use strict';
    // Slider Settings
window.addEventListener('load', function(){
    var mySwiper = newSwiper('.swiper1', {
    loop —true,
    slidesPerView: 1.5,
    centeredSlides: true,
    loopedSlides: 5,
    spaceBetween: 0,
    breakpoints: {
        960: {
            slidesPerView: 1,
            spaceBetween:0
        }
    },
    navigation: {
        nextEl: '.next1',
        prevEl: '.prev1',
    },
    pagination: {
        el: '.page1',
    },
    // autoplay: {
    //   delay: 3000,
    //   disableOnInteraction:false
    // },
    speed —500,
    roundLengths: true,
    });
}, false);
</script>

centeredSlides does not seem to be working and the layout is not working as expected.

If you don't have enough information, please let me know.

Thank you for your support.

javascript html css

2022-09-30 19:37

1 Answers

The slidesPerView option does not take into account the difference in width of each slide, so it is not possible to handle the difference in width on both sides of an active slide like this, resulting in a slide shift.

Therefore, simply matching the width of all slides and returning the slidesPerView option to 1 can solve the problem of slide misalignment.

.swiper1.swiper-slide-prev,
.swiper1.swiper-slide-next {
  width —900px!important; /*Change*/
  height:335px!important;
}

.swiper1.swiper-slide-prev.mv-img,
.swiper1.swiper-slide-next.mv-img{
  width —900px!important; /*Change*/
  height:335px!important;
}

 var mySwiper=newSwiper('.swiper1',{
  loop —true,
  slidesPerView: 1, // changing
  loopedSlides: 5,
  spaceBetween: 0,
  breakpoints: {
    960: {
      slidesPerView: 1,
      spaceBetween:0
    }
  },
  navigation: {
    nextEl: '.next1',
    prevEl: '.prev1',
  },
  pagination: {
    el: '.page1',
  },
  speed —500,
  roundLengths: true,
});


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<style>
  .main-visual {
    width: 100%;
    height —522px;
    background-image:url(hoge);
    background-repeat:repeat;
    z-index:0;
    background-color:#F0F0F0;
    overflow-x — hidden;
    overflow-y — hidden;
    position:relative;
  }
  
  .add-wrapper{
    margin-left —auto;
    margin-right —auto;
    max-width —900px;
  }
  
  .swiper1{
    width: 100%;
    overflow:visible;
    z-index:1;
    height:520px;
  }
  
  .swiper1.swiper-slide {
    vertical-align:middle;
    margin-top —88px;
  }
  
  .swiper1.swiper-slide.mv-img{
    width: 670px!important;
    height:335px!important;
  }
  
  .swiper1.swiper-slide-active {
    height —450px!important;
    width —900px!important;
    margin-top: 30px;
  }
  
  .swiper1.swiper-slide-active.mv-img{
    height —450px!important;
    width —900px!important;
  }
  
  .swiper1.swiper-slide-prev,
  .swiper1.swiper-slide-next {
    width —900px!important;
    /* US>Change*
    height:335px!important;
  }
  
  .swiper1.swiper-slide-prev::after,
  .swiper1.swiper-slide-next::after{
    content: ";
    position:absolute;
    display:block;
    top:0;
    left:0;
    width: 100%;
    height —100%;
    background —rgba(0,0,0,0.7);
  }
  
  .swiper1.swiper-slide-prev.mv-img,
  .swiper1.swiper-slide-next.mv-img{
    width —900px!important;
    /* US>Change*
    height:335px!important;
  }
  
  .swiper1.swiper-pagination{
    width: 100%;
    left:0;
    bottom —10px;
  }
  
  .swiper1.swiper-button-next {
    width —32px;
    height —60px;
  }
  
  .swiper1.swiper-button-prev{
    width —32px;
    height —60px;
  }
  
  .swiper-pagination-bullet-active {
    opacity:1;
    background: #91d539;
  }
</style>
<div class="main-visual">
  <div class="add-wrapper">
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide slide 1">
          <img src="http://placehold.jp/ffffaa/ffffff/800x600.png?text=1" class="mv-img">
        </div>
        <div class="swiper-slide slide 2">
          <img src="http://placehold.jp/ffaaff/ffffff/800x600.png?text=2" class="mv-img">
        </div>
        <div class="swiper-slide slide 3">
          <img src="http://placehold.jp/ffaaaa/ffffff/800x600.png?text=3" class="mv-img">
        </div>
        <div class="swiper-slide slide 4">
          <img src="http://placehold.jp/aaffff/ffffff/800x600.png?text=4" class="mv-img">
        </div>
        <div class="swiper-slide slide 5">
          <img src="http://placehold.jp/aaffaa/ffffff/800x600.png?text=5" class="mv-img">
        </div>
      </div>
      <!--swiper pageation-->
      <div class="swiper-pagination page1"></div>
      <!--Navigation-->
      <div class="swiper-button-prev prev1">/div>
      <div class="swiper-button-next next 1"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
  'use strict';
  window.addEventListener('load', function(){
    var mySwiper = newSwiper('.swiper1', {
      loop —true,
      slidesPerView: 1, // changing
      loopedSlides: 5,
      spaceBetween: 0,
      breakpoints: {
        960: {
          slidesPerView: 1,
          spaceBetween:0
        }
      },
      navigation: {
        nextEl: '.next1',
        prevEl: '.prev1',
      },
      pagination: {
        el: '.page1',
      },
      speed —500,
      roundLengths: true,
    });
  }, false);
</script>

If you want each slide to remain in a different width and use the code in the questionnaire, you can think of ways to "adjust the value of the slidesPerView option" or "just shift the image position while keeping the slide (.swiper-slide).

In this case, the coverflow effect makes it easier for the questioner to do what they want to do.The following snippets do not make strict adjustments, but by adjusting the various options for the coverflow effect, you will be able to achieve the same ride as the site that the questioner is referring to.

const swiper=new Swiper('.swiper-container', {
  effect: 'coverflow',
  loop —true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch —0,
    depth —500,
    modifier: 1,
    slideShadows: false,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
.swiper-wrapper>.swiper-slide{
  width —50vw;
  height —50 vmin;
}

.swiper-slide>img{
  height —100%;
  width: 100%;
}

.swiper-slide-prev,
.swiper-slide-next {
  background: #000;
}

.swiper-slide-prev>img,
.swiper-slide-next>img {
  opacity:.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"rel="stylesheet"/>

<div class="container">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide 1">
        <img src="http://placehold.jp/ffffaa/ffffff/800x600.png?text=1" class="mv-img">
      </div>
      <div class="swiper-slide slide 2">
        <img src="http://placehold.jp/ffaaff/ffffff/800x600.png?text=2" class="mv-img">
      </div>
      <div class="swiper-slide slide 3">
        <img src="http://placehold.jp/ffaaaa/ffffff/800x600.png?text=3" class="mv-img">
      </div>
      <div class="swiper-slide slide 4">
        <img src="http://placehold.jp/aaffff/ffffff/800x600.png?text=4" class="mv-img">
      </div>
      <div class="swiper-slide slide 5">
        <img src="http://placehold.jp/aaffaa/ffffff/800x600.png?text=5" class="mv-img">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

2022-09-30 19:37

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

541 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

519 The method of the class of the application that I am creating in Typescript does not work as I expected.

546 Who developed the "avformat-59.dll" that comes with FFmpeg?

551 Scrap text information after the "View More" button when searching in the Yahoo! News search window

974 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

© 2024 OneMinuteCode. All rights reserved.