Fatal编程技术网
  • javascript/
  • Javascript Swiper JS-显示下一张幻灯片的一部分

Javascript Swiper JS-显示下一张幻灯片的一部分

javascript

Javascript Swiper JS-显示下一张幻灯片的一部分,javascript,swiper,swiper.js,Javascript,Swiper,Swiper.js,我想在视图中显示第二张幻灯片的一部分。大约20-30%。 我已将SlideService设置为2.1（在移动设备上！），以显示下一张幻灯片的部分内容。 但是，当滚动浏览幻灯片时，它不会捕捉到容器的开头，这会导致在滚动浏览滑水器时，部分幻灯片不在视图内 我曾尝试将幻灯片的高度设置为70%，但这也带来了同样的问题。我还一直在摆弄slideOffsetAfter参数，但运气不好 幻灯片放映显示整个图像的容器开头的快照 下一张幻灯片应该部分可见 要查看项目的当前状态，请执行以下操作： 您可以在水平刷

我想在视图中显示第二张幻灯片的一部分。大约20-30%。 我已将SlideService设置为2.1（在移动设备上！），以显示下一张幻灯片的部分内容。 但是，当滚动浏览幻灯片时，它不会捕捉到容器的开头，这会导致在滚动浏览滑水器时，部分幻灯片不在视图内

我曾尝试将幻灯片的高度设置为70%，但这也带来了同样的问题。我还一直在摆弄slideOffsetAfter参数，但运气不好

  • 幻灯片放映显示整个图像的容器开头的快照
  • 下一张幻灯片应该部分可见
要查看项目的当前状态，请执行以下操作：

您可以在水平刷子的桌面和垂直刷子的平板电脑视图中看到问题

CSS

<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<style>
@media screen and (max-width: 1079px){
.swiper-section {
    justify-content: flex-start;
    margin-top: 194px;
}
}

@media screen and (max-width: 1079px){
.main-navigation {
  left: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.sub-navigation {
  right: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.swiper-container {
    height: 965px;
}
}

.swiper-slide {
padding-bottom: 45px;
}

@media screen and (max-width: 1079px) {
.swiper-slide {
padding-bottom: 0px;
}
}

.swiper-slide:nth-child(even) {
 height: 75%;
 width: 45vw !important;
}

.swiper-slide:nth-child(odd) {
 height: 100%;
  width: 55vw !important;
}

@media screen and (max-width: 1079px) {
.swiper-div {
margin: 0px 45px 0px 45px;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(even) {
     height: 100%!important;
     width: 100% !important;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(odd) {
 height: 100%!important;
 width: 100% !important;
}
}


.swiper-slide>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
  width: 175px;
  margin-left: 65px;
  border-radius: 50px;
  }

.swiper-pagination-progressbar {
  margin-top: 733px;
  background: #bababa;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #888888;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
height: 12px;
}

.swiper-container-vertical>.swiper-pagination-progressbar {
display: none;
}

</style>

<!-- swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
     mousewheel: {
    invert: true,
    },
    keyboard: {
    enabled: true,
    onlyInViewport: false,
    },
    scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2.1,
        spaceBetween: 30,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      1279: { /* when window >= 988px - webflow desktop */
        slidesPerView: 2,
        spaceBetween: 20,
        slidesOffsetBefore: 0,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>


@媒体屏幕和屏幕（最大宽度：1079px）{
.游泳区{
调整内容：灵活启动；
边缘顶端：194px；
}
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.主导航{
左：45像素；
顶部：45px；
}
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.潜艇航行{
右：45px；
顶部：45px；
}
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.swiper容器{
高度：965px；
}
}
.滑梯{
填充底部：45px；
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.滑梯{
垫底：0px；
}
}
.swiper幻灯片：第n个孩子（偶数）{
身高：75%；
宽度：45vw！重要；
}
.swiper幻灯片：第n个孩子（奇数）{
身高：100%；
宽度：55vw！重要；
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.swiper分区{
利润率：0px 45px 0px 45px；
}
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.swiper幻灯片：第n个孩子（偶数）{
身高：100%！重要；
宽度：100%！重要；
}
}
@媒体屏幕和屏幕（最大宽度：1079px）{
.swiper幻灯片：第n个孩子（奇数）{
身高：100%！重要；
宽度：100%！重要；
}
}
.swiper幻灯片>img{
对象匹配：覆盖；
宽度：100%；
身高：100%；
}
.swiper按钮prev，
.下一步按swiper按钮{
显示：无；
}
.swiper容器水平>.swiper分页进度条{
宽度：175px；
左边距：65px；
边界半径：50px；
}
.swiper分页进度条{
利润上限：733px；
背景：巴巴巴；
}
.swiper分页进度条。swiper分页进度条填充{
背景:#888888；
}
.swiper容器水平>.swiper分页进度条{
高度：12px；
}
.swiper container vertical>.swiper分页进度条{
显示：无；
}
JS

<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<style>
@media screen and (max-width: 1079px){
.swiper-section {
    justify-content: flex-start;
    margin-top: 194px;
}
}

@media screen and (max-width: 1079px){
.main-navigation {
  left: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.sub-navigation {
  right: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.swiper-container {
    height: 965px;
}
}

.swiper-slide {
padding-bottom: 45px;
}

@media screen and (max-width: 1079px) {
.swiper-slide {
padding-bottom: 0px;
}
}

.swiper-slide:nth-child(even) {
 height: 75%;
 width: 45vw !important;
}

.swiper-slide:nth-child(odd) {
 height: 100%;
  width: 55vw !important;
}

@media screen and (max-width: 1079px) {
.swiper-div {
margin: 0px 45px 0px 45px;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(even) {
     height: 100%!important;
     width: 100% !important;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(odd) {
 height: 100%!important;
 width: 100% !important;
}
}


.swiper-slide>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
  width: 175px;
  margin-left: 65px;
  border-radius: 50px;
  }

.swiper-pagination-progressbar {
  margin-top: 733px;
  background: #bababa;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #888888;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
height: 12px;
}

.swiper-container-vertical>.swiper-pagination-progressbar {
display: none;
}

</style>

<!-- swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
     mousewheel: {
    invert: true,
    },
    keyboard: {
    enabled: true,
    onlyInViewport: false,
    },
    scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2.1,
        spaceBetween: 30,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      1279: { /* when window >= 988px - webflow desktop */
        slidesPerView: 2,
        spaceBetween: 20,
        slidesOffsetBefore: 0,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>


var swiperNodes=“”；
变量分页=“”；
var next_prev_按钮=“”；
var滚动条=“”；
var swiperNodes=swiperNodes.concat（分页，下一个/上一个按钮）；
/*循环将所有刷子扔到页面上*/
$（'.swiper container'）。每个（函数（索引）{
$（this）.append（swiperNodes）；
});
var mySwiper=new Swiper（“.Swiper container”{
//可选参数
幻灯片视图：1，
空间期:30,，
freeMode:false，
循环：对，
中心幻灯片：错误，
//启用延迟加载
懒惰：是的，
鼠标滚轮：{
颠倒：是的，
},
键盘：{
启用：对，
onlynViewport:false，
},
滚动条：{
el:“.swiper滚动条”，
真的，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
分页：{
el:“.swiper分页”，
键入：“progressbar”，
},
键盘：{
启用：对，
},
断点：{
0:{/*当窗口>=0px时-webflow移动环境/portriat*/
幻灯片视图：1，
间隔时间：10，
SlideOffSetBefore:0，
方向：'垂直'，
},
767:{/*当窗口>=767px时-webflow tablet*/
SlideService视图：2.1，
空间期:30,，
SlideOffSetBefore:0，
方向：'垂直'，
},
1279:{/*当窗口>=988px时-webflow桌面*/
幻灯片视图：2，
间隔时间：20，
SlideOffSetBefore:0，
}
},
/*如果需要自动播放滑块，请取消注释
自动播放：{
延误：3000，
},
*/
/*如果需要滚动条，请取消注释
滚动条：{
el:“.swiper滚动条”，
隐藏：是的，
},
*/
})
这张幻灯片将显示下一张和上一张幻灯片的局部视图。在我的例子中，它是一个全宽旋转木马，所以我在CSS中使用了
vw
，但是你可以使用像素或%

const swiper = new Swiper( selector, {
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            slidesPerGroup: 1,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );
和CSS：

.swiper-slide {
    width: 80vw;
  }
这张幻灯片将显示下一张和上一张幻灯片的局部视图。在我的例子中，它是一个全宽旋转木马，所以我在CSS中使用了
vw
，但是你可以使用像素或%

const swiper = new Swiper( selector, {
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            slidesPerGroup: 1,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );
和CSS：

.swiper-slide {
    width: 80vw;
  }
我已经设法只显示了下一张幻灯片的一部分，并且在
div.swiper-container
外部创建了
div
，并在内部
div
中添加了
填充物，这可以创建想要的效果

如果您只想显示下一个的预览，请仅设置右填充或左填充的样式，这样您就可以开始了


应用的填充物应考虑容器之间的空间。在我的例子中，
spaceBetween
是10，所以我使用20px作为填充

下面是一些伪代码：



const swiper=新swiper（“.my class”{
幻灯片视图：2，
间隔时间：10，
幻灯片组：2，
中心幻灯片：错误，
循环：对，
paginationClickable:true，
分页：{
el:“.swiper分页”，
可点击：正确，
},
} );
.全宽{
利润率：0计算（-100vw/2+100%/2）！重要；
宽度：100vw；
}
.我的班级{
填充：20px；
}
...

我只展示了下一张幻灯片的一部分，在
div.swiper-container
外部创建了一个
div
，并使用
填充设置了内部
div
的样式，这可以产生想要的效果

如果只想显示下一个的预览，请仅设置填充样式-