如何在卡片滑块引导程序4中添加幻灯片

时间:2019-07-02 07:48:23

标签: html css bootstrap-4

我在codepen中找到了制作卡片滑杆的教程,但是该教程仅支持5张幻灯片,而我需要10张幻灯片。如何修改?

我认为这是要修改的行。

    --------------------------------------------------------------*/
    /*--------------------------------------------------------------
    2.0 Cards
    --------------------------------------------------------------*/
    .slider__item {
      transition: all 0.3s ease;
      -webkit-transition-timing-function: 
        cubic-bezier(0.4, 0.0, 0.2, 1);
            transition-timing-function: 
         cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    #slide-1:checked ~ .slider__holder .slider__item--1 {
      position: relative;
      z-index: 2;
      transform: translate(0) scale(1);
    }

    #slide-2:checked ~ .slider__holder .slider__item--1 {
      z-index: 1;
      transform: translateX(-100px) scale(0.85);
    }

    @media (max-width: 768px) {
      #slide-2:checked ~ .slider__holder .slider__item--1 {
        opacity: 0.6;
      }
    }
    #slide-3:checked ~ .slider__holder .slider__item--1 {
      z-index: 0;
      transform: translateX(-210px) scale(0.65);
    }

    @media (max-width: 900px) {
      #slide-3:checked ~ .slider__holder .slider__item--1 {
        transform: translateX(-170px) scale(0.65);
      }
    }
... etc

,但是很难对其进行修改。 Link对笔进行编码。提前非常感谢您。

0 个答案:

没有答案