第二张图片的 onclick 应该变为活动状态（即进行 next() 调用）

Question

我在一个滑块中显示 2 个图像，一个并排显示下一个和上一个图标。无法再添加一个场景，即滑块中第二张图片的 onclick 应该在 flexslider 中调用 next() 等等。

示例： Slide#1 是活动的，Side#2 是半活动图像，点击 "Slide#2" 半活动图像区域应该变成 "active" 和 "Slide#3" 应该是半活动图像等等。

演示 JSFiddle： https://jsfiddle.net/pkuwhvqm/

HTML:

<div class="outerWideSlider">
<div class="wideSlider">
<div class="flexslider" data-startat="0">
  <ul class="slides">
    <li>
      <img alt="" src="https://www.solodev.com/assets/flexslider/slide1.jpg">
      <div class="text-caption">
        <div class="inner">
          <h2>Slide #1</h2>
          <p>This is the text for slide #1</p>
        </div>
      </div>
    </li>
    <li>
      <img alt="" src="https://www.solodev.com/assets/flexslider/slide2.jpg">
      <div class="text-caption">
        <div class="inner">
          <h2>Slide #2</h2>
          <p>This is the text for slide #1</p>
        </div>
      </div>
    </li>
    <li>
      <img alt="" src="https://www.solodev.com/assets/flexslider/slide3.jpg">
      <div class="text-caption">
        <div class="inner">
          <h2>Slide #3</h2>
          <p>This is the text for slide #1</p>
        </div>
      </div>
    </li>
  </ul>
</div>
 </div>
</div>

Javascript:

$(document).ready(function () {
$(".wideSlider").each(function () {
var $this = $(this);
var $slider = $this.find(".flexslider");
var startat = $slider.attr("data-startat");
if (startat = 0) {
}
$slider.flexslider({
  animation: 'slide',
  easing: 'linear', // // Default: swing   {NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
  // useCSS: false, // Default: true
  slideshow: false, // Default: True  //Boolean: Animate slider automatically
  slideshowSpeed: 7000, // Default: 7000 // Integer: Set the speed of the slideshow cycling, in milliseconds
  animationLoop: true, // Default: true
  startAt: startat,
  controlNav: false,
  directionNav: true,
  nextText: " ",
  prevText: " ",
  start: function (slider) {
    // $('.wideSlider .text-caption').fadeOut(100);
    // var $s = slider.slides.eq(slider.currentSlide);
    // $s.find('.text-caption').show();
  },
  before: function (slider) {
    // $('.wideSlider .text-caption').hide();
  },
  after: function (slider) {
    // var $s = slider.slides.eq(slider.currentSlide);
    // $s.find('.text-caption').show();
  }
});
 });
 })

Answer 1

只需添加以下处理程序。 https://jsfiddle.net/g1mteokv/

$("li").click(function(){
   if($(this).prev().hasClass("flex-active-slide")){
        $(".flex-next").click();
    }else if ($(this).next().hasClass("flex-active-slide")){
        $(".flex-prev").click();
    }
 });

第二张图片的 onclick 应该变为活动状态（即进行 next() 调用）

onclick of 2nd image should become active (i.e. make a next() call)

javascript

jquery

flexslider