Как я могу делать этот slider? [закрывшая]

Добрый день, поскольку я могу делать этот тип slider, который является carrousel, но содержал, что не видится до тех пор, пока он не меняется?? приветствие надеялось, что они могут помогать мне.

introducir la descripción de la imagen aquí

1
задан 21.03.2019, 13:39
1 ответ

Ты можешь использовать plugin JS как slick, descГЎrgalo aquГ-: http://kenwheeler.github.io/slick/#go-get-it

способ, в котором ты нуждаешься, - "Center", ты можешь конфигурировать mГЎs события, если asГ - ты это желаешь. TambiГ©n segГєn, если ты используешь или нет framework CSS, ты можешь давать ему mГЎs или меньше стиль, сходный с cards.

//Playing with Ken Wheeler Slick carousel
$('.slider').slick({
  //dots: true,
  infinite: true,
  centerMode: true,
  centerPadding: '12%',
  slidesToShow: 3,
  speed: 500,
  responsive: [{

    breakpoint: 992,
    settings: {
      slidesToShow: 1
    }

  }]
});


/* $(".slick-center").addClass(
		"switch");
$(".slick-current").prev().addClass(
		"switch");
$('.slider').on('init', function(currentSlide) {
	console.log(currentSlide);
	$(".slick-center").prev().toggleClass("switch"); 
}); */
button {
  z-index: 102;
}

section {
  position: relative;
  background: #FAFAFA;
}

.slick-slide {
  transform: scale(1);
  //opacity: .5;
  transition: .3s ease-in-out all;
}

.slick-slide.slick-center {
  opacity: 1;
  transform: scale(1.08);
}

.switch {
  background: #000;
}

.slider {
  //max-width: 1024px;
  margin: 0 auto;
  ///border: 1px solid;
  position: relative;
  &:after,
  &:before {
    content: "";
    background: #FAFAFA;
    position: absolute;
    top: 0;
    height: 100%;
    width: 12%;
    z-index: 100;
    //opacity: .9;
  }
  &:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  }
  &:before {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

.img-box {
  padding: 0;
  img {
    width: 100%;
  }
}

article {
  border: 1px solid;
  float: left;
  margin: 50px 45px;
  font-size: 0.8vw;
}

h1 {
  font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />

<section>

  <div class="slider">
    <div>
      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>1</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>2</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>3</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>
    </div>
    <div>

      <article>
        <div class="col-xs-5 img-box">
          <img src="http://placehold.it/400x200" alt="" />
        </div>
        <div class="col-xs-7">
          <h1>4</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
        </div>
      </article>

    </div>
  </div>

</section>
6
ответ дан 02.12.2019, 05:21
  • 1
    Woowww большое спасибо! он не ждет такой самый законченный ответ, я иду, быть, если ему даю я стили сейчас оставлять для это, как я хочу, muchí пропасти спасибо @AMCode – Miguel 21.03.2019, 15:44
  • 2
    для этого мы bro – EMCode 21.03.2019, 22:29
  • 3
    ты можешь помогать мне с configuració n @EMCode я пробую делать их má s большой, но если я делаю их я descentran – Miguel 22.03.2019, 13:34
  • 4
    Создай новый вопрос @Miguel и потом ты прикрепляешь ссылку прямо здесь как комментарий она, чтобы идти видеть – EMCode 22.03.2019, 15:28
  • 5
    Пожалуйста избеги отвечать вопросы, которые не показывают mí nimo я усиливаю со стороны OP. Ответь на вопросы, хорошо формулируемые , Как отвечание . – x3k_js 29.06.2019, 22:09

Теги

Похожие вопросы