RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1098360
Accepted
Александр
Александр
Asked:2020-03-23 13:22:12 +0000 UTC2020-03-23 13:22:12 +0000 UTC 2020-03-23 13:22:12 +0000 UTC

滑块光滑 nextSlider + 1

  • 772

我想让滑块看起来像屏幕截图中的那样,即 nextSlide + 1 在顶部,我在代码中投入了。但我仍然不明白该怎么做。我想为 nextSlide 之后的元素分配一个类(在屏幕截图中它是第三个),并在它离开时将其删除。我希望我解释清楚,我附上截图。

在此处输入图像描述

    <div class="main-arrow-container">
        <div class="flex-f-slide">
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>01</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>02</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>03</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>04</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
.flex-f-slide{
.slick-slider {
  margin-left: -12%;
  margin-right: -12%;
}

.slick-list {
  padding-top: 10%!important;
  padding-bottom: 10%!important;
  padding-left: 15%!important;
  padding-right: 15%!important;
}


.slick-track {
  max-width: 100%!important;
  transform: translate3d(0, 0, 0)!important;
  perspective: 100px;
}

.slick-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  width: 100%!important;
  transform: translate3d(0, 0, 0);
  transition: transform 1s, opacity 1s;
}

.slick-snext,
.slick-sprev {
  display: block;
}

.slick-current {
  opacity: 1;
  position: relative;
  display: block;
  transform: translate3d(0, 0, -10px);
  z-index: 2;
}

.slick-snext {
  opacity: 0.6;
  transform: translate3d(30%, 0, 0px);
  z-index: 1;
}

.slick-sprev {
  opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.class_name{
      opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.test {
  display: block;
  width: 100%;
  height: 300px;
  background: #c00;
  box-shadow: inset 0px 0px 0px 3px #000
}

.slide-img{
    img{
        width: 306px;
        height: 247px;
        border-radius: 10px;
    }
}

.slide-flex{
    display: flex;
    max-width: 615px;
    margin: 0 auto;
    border: 10px solid #1fbcde;
    border-radius: 20px;
}

.title-slide{
    font-family: @play;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
}

.title-descr{
    line-height: 21px;
    letter-spacing: 0.1em;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
}

.slide-flex-item2{
    padding-left: 48px;
    padding-top: 20px;
    background: #fff;
}

.flex-f-slide{
    margin-top: 35px;
}

.main-arrow-container{
    position: relative;
}

.prev-main-sl,
.next-main-sl {
    position: absolute;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
}

.prev-main-sl{
    right: 41%;
}

.next-main-sl{
    right: 36%;
}
}


var rev = $('.flex-f-slide');
rev.on('init', function(event, slick, currentSlide) {
  var
    cur = $(slick.$slides[slick.currentSlide]),
    next = cur.next(),
    prev = cur.prev();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  cur.removeClass('slick-snext').removeClass('slick-sprev');
  slick.$prev = prev;
  slick.$next = next;
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  //console.log('beforeChange');
  var
    cur = $(slick.$slides[nextSlide]);
  //console.log(slick.$prev, slick.$next);
  slick.$prev.removeClass('slick-sprev');
  slick.$next.removeClass('slick-snext');
  next = cur.next(),
    prev = cur.prev();
  prev.prev();
  prev.next();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  slick.$prev = prev;
  slick.$next = next;
  cur.removeClass('slick-next').removeClass('slick-sprev');
});

rev.slick({
  speed: 1000,
  arrows: true,
  dots: false,
  focusOnSelect: true,
  prevArrow: '<svg class="prev-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" width="46" height="46" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><path d="M11.983 22.293a1 1 0 000 1.414l6.364 6.364a1 1 0 001.414-1.414L14.104 23l5.657-5.657a1 1 0 00-1.414-1.414l-6.364 6.364zM33.31 22H12.69v2h20.62v-2z" fill="#fff"/></svg>',
  nextArrow: '<svg class="next-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" x="46" y="46" width="46" height="46" rx="2" transform="rotate(-180 46 46)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><path d="M34.017 23.707a1 1 0 000-1.414l-6.364-6.364a1 1 0 00-1.414 1.414L31.896 23l-5.657 5.657a1 1 0 101.414 1.414l6.364-6.364zM12.69 24H33.31v-2H12.69v2z" fill="#fff"/></svg>',
  infinite: true,
  centerMode: true,
  slidesPerRow: 1,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: '0',
  swipe: true,
  customPaging: function(slider, i) {
    return '';
  },
  /*infinite: false,*/
});
jquery
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Best Answer
    Август
    2020-03-29T02:14:57Z2020-03-29T02:14:57Z
    • 在一个干净的js
    • 没有第一个html(图像数据作为数组传递给滑块渲染函数
    • 您甚至可以使滑块适应数组中的图像数量,但那是稍后(根据车辆的要求)

    const picturesArr = [ // наш масисив данных о слайдах
      "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
      "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
      "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
      "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"
    ];
    
    function createSlider(container, pictures) { // рендерим слайды
      pictures.forEach((pict, n) => {
        const slide = `
          <div class="slide-item" id="slide-${n}">
            <img src="${pict}" alt="">
            <div class="slide-descr">
                <div class='title-slide'>${n}</div>
                <div class='title-descr'>lorem ipsum dolor</div>
            </div>
          </div>
        `;
        container.innerHTML += slide;
      });
      
      [...Array(2)].forEach((i, n) => { // рендерим стрелки
        const arrow = `
          <button class="arrow arrow-${n ? 'left' : 'right'}" data-arrow="${n ? -1 : 1}">
            ${n ? 'назад' : 'туды' }
          </button>
        `;
        container.innerHTML += arrow;
      });
      
      [...document.querySelectorAll('.arrow')].forEach(i => // события по клику стрелок
          i.addEventListener('click', function() {
              const dataArrow = +this.getAttribute('data-arrow');
              
              [ ...document.querySelectorAll('.slide-item') ].forEach(i => {
                  const currentPosition = Number(i.getAttribute('id')[6]);
                  let nextPosition = currentPosition + dataArrow;
                  if (nextPosition < 0) nextPosition = pictures.length - 1;
                  if (nextPosition >= pictures.length) nextPosition = 0;
                  
                  i.setAttribute('id', `slide-${nextPosition}`);
                  i.style.zIndex = -nextPosition;
              });
          })
      );
    }
    
    createSlider(document.querySelector('.main-arrow-container'), picturesArr);
    .main-arrow-container {
      min-height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .arrow {
      position: absolute;
    }
    
    .arrow-left{
      left: 0;
    }
    
    .arrow-right {
      right: 0;
    }
    
    .slide-item {
      position: absolute;
      width: 300px;
      height: 150px;
      display: flex;
      border: 5px solid #56bcde;
      border-radius: 15px;
      background-color: white;
      transition: transform .5s;
    }
    
    .slide-item img {
      width: 50%;
      object-fit: cover;
      border-radius: 10px;
    }
    
    .slide-descr {
      display: flex;
      flex-flow: column;
      justify-content: space-evenly;
      padding: 10px;
    }
    
    .title-slide {
      font-weight: bold;
    }
    
    /* здесь с помощью Sass надо сделать цикл, но в другой жизни  */ 
    .slide-item#slide-0 {
      z-index: 1;
    }
    
    .slide-item#slide-1 {
      transform: translate(150px, -50px) scale(.7);
    }
    
    .slide-item#slide-2 {
      transform: translate(0, -80px) scale(.6);
    }
    
    .slide-item#slide-3 {
      transform: translate(-150px, -50px) scale(.7);
    }
    <div class="main-arrow-container"></div>

    • 5
  2. Andrew
    2020-03-29T00:15:34Z2020-03-29T00:15:34Z

    即使没有slick.js库的解决方案。最好在全屏模式下观看。

    var carousel = $(".carousel"),
        items = $(".item"),
        currdeg  = 0;
    
    $(".next").on("click", { d: "n" }, rotate);
    $(".prev").on("click", { d: "p" }, rotate);
    
    function rotate(e){
      if(e.data.d=="n"){
        currdeg = currdeg - 90;
      }
      if(e.data.d=="p"){
        currdeg = currdeg + 90;
      }
      carousel.css({
        "-webkit-transform": "rotateY("+currdeg+"deg)",
        "-moz-transform": "rotateY("+currdeg+"deg)",
        "-o-transform": "rotateY("+currdeg+"deg)",
        "transform": "rotateY("+currdeg+"deg)"
      });
        items.css({
        "-webkit-transform": "rotateY("+(-currdeg)+"deg)",
        "-moz-transform": "rotateY("+(-currdeg)+"deg)",
        "-o-transform": "rotateY("+(-currdeg)+"deg)",
        "transform": "rotateY("+(-currdeg)+"deg)"
      });
    }
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');
    
    
    body {
        padding: 70px 0;
    }
    
    .container {
        margin: 0 auto;
        width: 400px;
        height: 200px;
        position: relative;
        perspective: 1000px;
    }
    
    .carousel {
        height: 100%;
        width: 100%;
        position: absolute;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    
    .carousel div {
        transform-style: preserve-3d;
    }
    
    .item {
        position: absolute;
        background: #fff;
        border: 10px solid #1FBCDE;
        width: 400px;
        height: 200px;
        border-radius: 10px;
        transition: transform 1s;
        color: #000;
        font-family: Roboto;
    }
    
    .cover {
            width: 20px;
            height: 100%;
            background-color: #1FBCDE;
            position: relative;
        }
    
        .img {
            height: 100%;
            width: 55%;
            border-radius: 10px;
            float: left;
            position: absolute;
            top: 0;
    
            background-image: url(https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg);
            background-size: cover;
        }
    
        .item_num {
            position: absolute;
            left: 235px;
            top: 0px;
            font-weight: 600;
        }
    
        .item_text {
            font-weight: 400;
            position: absolute;
            left: 235px;
            top: 35px;
            width: 150px;
            height: 135px;
        }
    
    .a {
        transform: rotateY(0deg) translateZ(150px);
    }
    
    .b {
        transform: rotateY(90deg) translateZ(150px) rotateY(-90deg);
    }
    
    .c {
        transform: rotateY(180deg) translateZ(150px) rotateY(-180deg);
    }
    
    .d {
        transform: rotateY(270deg) translateZ(150px) rotateY(-270deg);
    }
    
    .next,
    .prev {
        position: absolute;
        top: 100px;
        padding: 20px;
        cursor: pointer;
        background: #CCC;
        border-radius: 5px;
        border-top: 1px solid #FFF;
    }
    
    .next {
        right: 5em;
    }
    
    .prev {
        left: 5em;
        transform: rotate(180deg);
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="carousel">
              <div class="a">
                <div class="item">
                  <div class="cover"></div>
                  <div class="img"></div>
                  <p class="item_num">01</p>
                  <p class="item_text">Lorem ipsum</p>
                </div>
              </div>
              <div class="b">
                <div class="item">
                  <div class="cover"></div>
                  <div class="img"></div>
                  <p class="item_num">02</p>
                  <p class="item_text">Lorem tipsum</p>
                </div>
              </div>
              <div class="c">
                <div class="item">
                  <div class="cover"></div>
                  <div class="img"></div>
                  <p class="item_num">03</p>
                  <p class="item_text">Lorem wipsum</p>
                </div>
              </div>
              <div class="d">
                <div class="item">
                  <div class="cover"></div>
                  <div class="img"></div>
                  <p class="item_num">04</p>
                  <p class="item_text">Lorem mipsum</p>
                </div>
              </div>
            </div>
          </div>
          <div class="next">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
          </div>
          <div class="prev">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
          </div>
    
        <script src="script.js"></script>
    </body>
    </html>

    • 3

相关问题

  • jquery选择器+获取值

  • JQ Masked Input电话号码填写时如何避免输入数字7和8?

  • 如何获取相邻父级 jQuery 的元素?

  • 如何解析收到的json响应

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5