Рендеринг следующего изображения при нажатии на следующее изображение? - PullRequest
Новая
       41

Рендеринг следующего изображения при нажатии на следующее изображение?

0 голосов
/ 11 ноября 2019

Когда пользователь нажимает на следующее изображение, я хочу, чтобы следующее изображение заняло место текущего изображения в карусели. Есть ли способ сделать это?

Моя конфигурация для jCarouselLite выглядит следующим образом: 

   var carousalConfig = {
            btnNext: '.corousal-nav .right-arrow',
            btnPrev: '.corousal-nav .left-arrow',
            btnGo:[],
            vertical: false,
            visible: 2,
                        start: 0,
            afterEnd: function(a) {
                             a.next().css({opacity:.35});
                             a.prev().css({opacity:1});
                       }


 $('.carousal-coontainer').jCarouselLite(carousalConfig);

html для того же 

<div class="carousal-coontainer">
    <ul>
        <li><img src="image/1.jpg"></li>
        <li><img src="image/2.jpg"></li>
        <li><img src="image/3.jpg"></li>
    </ul>
</div>
<div>
    <div class="carousal_left_arrow"> <span class="left-arrow"> </span></div>
    <div class="carousal_right_arrow"> <span class="right-arrow"></span> </div>
</div>

1 Ответ

0 голосов
/ 12 ноября 2019

jCarouselLite имеет событие под названием «go», где вы можете указать слайд, на который хотите перейти, или (если используется без номера) перейти к следующему слайду. В опциях слайдера мы можем добавить класс к элементам, которые должны получать события click, а затем прикрепить событие click к элементам li после инициализации.

В качестве примечания: jCarouselLite старый и не может работать с jQuery 3.0+. Существует множество бесплатных альтернатив, обеспечивающих такую ​​же функциональность

  • Slick - плагин jQuery
  • Glide.js - без зависимостей
  • Flickty - плагин jQuery или без зависимостей 

var carousalConfig = {
  btnNext: ".default .next",
  btnPrev: ".default .prev",
  btnGo: [],
  visible: 2,
  start: 0,
  afterEnd: function(a) {
  // add a class to next element so we can attach click events
    a.next().css({
      opacity: .50
    }).addClass("blurred");
    
    // remove class to remove event attachment
    a.prev().css({
      opacity: 1
    }).removeClass("blurred");
  }
};

$(document).ready(function() {
  let carousel = $('.custom-container');
  carousel.jCarouselLite(carousalConfig);
  // Carousel is initatied so attach click event handler to `.blurred` class
  carousel.on("click", ".blurred", function() {
    carousel.trigger('go');
  })
});
#jcl-demo .carousel {
  border: 1px solid #bababa;
  border-radius: 10px;
  background-color: ghostwhite;
  float: left;
  padding-left: 10px;
  max-width: 100%;
  overflow: hidden;
  /* Needed for rendering without flicker */
  /* position: relative;
  visibility: hidden;
  left: -5000px;*/
}


/* Styling for image based carousel content. Only width and height are mandatory */

#jcl-demo .carousel>ul>li>img {
  width: 150px;
  height: 118px;
  vertical-align: middle;
  /* optional */
  margin: 10px 10px 10px 0;
  border-radius: 5px;
}


/* Styling for text based carousel content. Only width and height are mandatory */

#jcl-demo .carousel>ul>li>p {
  width: 130px;
  height: 98px;
  margin: 10px 10px 10px 0;
  border: 1px solid #808080;
  border-radius: 5px;
  line-height: normal;
  background-color: #fff;
  padding: 10px;
}


/* Styles for PREV and NEXT anchor buttons */

#jcl-demo a.prev,
#jcl-demo a.next,
#jcl-demo a.go {
  display: block;
  width: 26px;
  height: 30px;
  line-height: 1;
  background-color: #333333;
  color: ghostwhite;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 25px;
  border-radius: 8px;
  float: left;
}

#jcl-demo a.prev.disabled,
#jcl-demo a.next.disabled,
#jcl-demo a.prev.disabled:hover,
#jcl-demo a.next.disabled:hover {
  background-color: #8d8d8d;
  cursor: default;
}

#jcl-demo a.go.highlight {
  background-color: #dedede;
  color: #000;
}

#jcl-demo a.prev {
  margin: 10px 0px 0 0;
  text-indent: 7px;
}

#jcl-demo a.next {
  margin: 10px 0 0 0;
  text-indent: 10px;
}

#jcl-demo a.prev:hover,
#jcl-demo a.next:hover,
#jcl-demo a.go:hover {
  background-color: #666666;
}


/* Additional carousel styles for external controls, slider, widget, mid etc. */

#jcl-demo .externalControl button,
#jcl-demo .imageSliderExt button {
  margin: 5px 5px 0 0;
}

#jcl-demo .externalControl a.next,
#jcl-demo .externalControl a.prev,
#jcl-demo .externalControl a.go,
#jcl-demo .imageSliderExt a.next,
#jcl-demo .imageSliderExt a.prev,
#jcl-demo .imageSliderExt a.go {
  margin: 0 5px 0 0;
  padding: 7px 5px 0 5px;
  font-size: 15px;
  text-align: center;
  border-radius: 3px;
}

#jcl-demo .widget img {
  cursor: pointer;
}

#jcl-demo .mid {
  margin-left: 50px;
  width: 400px;
  height: 300px;
}

#jcl-demo .vertical {
  margin-left: 170px;
}

#jcl-demo .imageSlider .carousel>ul>li>img,
#jcl-demo .imageSliderExt .carousel>ul>li>img {
  width: 400px;
  height: 300px;
}

#jcl-demo .imageSlider .carousel>ul>li>p,
#jcl-demo .imageSliderExt .carousel>ul>li>p {
  width: 380px;
  height: 280px;
}


/* Other common styles */

.clear {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousellite@1.9.2/jcarousellite.min.js"></script>
<div id='jcl-demo'>
  <div class="custom-container default">
    <div class="carousel">
      <ul>

        <li><img src="https://images.unsplash.com/photo-1560577336-4c9f10bdf48f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
        <li><img src="https://images.unsplash.com/photo-1566535933277-3849dd2833a6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
        <li><img src="https://images.unsplash.com/photo-1561552596-f19273aea403?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
        <li><img src="
			https://images.unsplash.com/photo-1556560302-312e68d6cbd0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>

      </ul>
    </div>
    <a href="#" class="prev">&lsaquo;</a>
    <a href="#" class="next">&rsaquo;</a>
    <div class="clear"></div>
  </div>
</div>
...