问允许移动用户在滑块中滑动

EN

$('.slider').each(function() {
    var $this = $(this);
    var $group = $this.find('.slide_group');
    var $slides = $this.find('.slide');
    var bulletArray = [];
    var currentIndex = 0;
    var timeout;

    function move(newIndex) {
      var animateLeft, slideLeft;

      advance();

      if ($group.is(':animated') || currentIndex === newIndex) {
        return;
      }

      bulletArray[currentIndex].removeClass('active');
      bulletArray[newIndex].addClass('active');

      if (newIndex > currentIndex) {
        slideLeft = '100%';
        animateLeft = '-100%';
      } else {
        slideLeft = '-100%';
        animateLeft = '100%';
      }

      $slides.eq(newIndex).css({
        display: 'flex',
        left: slideLeft
      });
      $group.animate({
        left: animateLeft
      }, function() {
        $slides.eq(currentIndex).css({
          display: 'none'
        });
        $slides.eq(newIndex).css({
          left: 0
        });
        $group.css({
          left: 0
        });
        currentIndex = newIndex;
      });
    }

    function advance() {
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        if (currentIndex < ($slides.length - 1)) {
          move(currentIndex + 1);
        } else {
          move(0);
        }
      }, 25000);
    }

    $('.next_btn').on('click', function() {
      if (currentIndex < ($slides.length - 1)) {
        move(currentIndex + 1);
      } else {
        move(0);
      }
    });

    $('.previous_btn').on('click', function() {
      if (currentIndex !== 0) {
        move(currentIndex - 1);
      } else {
        move(3);
      }
    });

    $.each($slides, function(index) {
      var $button = $('<a class="slide_btn">&bull;</a>');

      if (index === currentIndex) {
        $button.addClass('active');
      }
      $button.on('click', function() {
        move(index);
      }).appendTo('.slide_buttons');
      bulletArray.push($button);
    });

    advance();
  });

slider-wrapper,
.slider-wrapper-2 {
    position:      relative;
    margin-bottom: 150px;
}

.slider,
.slider-2 {
    margin:    auto;
    max-width: 70vw;
    position:  relative;
    margin-bottom: 50px;
    height: 50vh;
}

.slide_viewer,
.slide_viewer {
    height:   60vh;
    overflow: hidden;
    position: relative;
}

.slide_group,
.slide_group-2 {
    height:   50vh;
    position: relative;
    width:    100%;
}

.slide,
.slide-2 {
    display:        none;
    height:         100%;
    position:       absolute;
    width:          100%;
    flex-direction: row;
}

.slider-content-left {
    width:           50%;
    height:          100%;
    background:      white;
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.product-image {
    background-size:     contain;
    background-position: center;
    background-repeat:   no-repeat;
    height:              70%;
    width:               70%;
    cursor: pointer;
    position: relative;
}

.product-image .material-icons{
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    background: whitesmoke;
    border: 1px solid grey;
}

.product-image.P60{
    background-image: url('Images/Products/R-Series/P60/OL315_2.jpg');
}

.product-image.XW1{
    background-image: url('Images/Products/R-Series/XW1/xw1.png');
}

.slider-content-right {
	width:       50%;
	height:      100%;
	display:     flex;
	align-items: center;
}

.product-details {
	height:         auto;
	width:          90%;
	display:        flex;
	flex-direction: column;
	margin:         auto;
}

.product-details h2 {
	text-align: left;
	margin:      0;
	color: black;
}

.product-details ul{
    padding: 17.5px;
}

.slide:first-child,
.slide-2:first-child {
    display: flex;
}

.slide_buttons,
.slide_buttons-2 {
    left:       100px;
    position:   absolute;
    right:      100px;
    text-align: center;
}

a.slide_btn,
a.slide_btn2 {
    color:              #474544;
    font-size:          42px;
    margin:             0 0.175em;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition:    all 0.4s ease-in-out;
    -ms-transition:     all 0.4s ease-in-out;
    -o-transition:      all 0.4s ease-in-out;
    transition:         all 0.4s ease-in-out;
}

.slide_btn.active,
.slide_btn2.active,
.slide_btn:hover,
.slide_btn2:hover {
    color:  #1160AB;
    cursor: pointer;
}

.directional_nav, .directional_nav-2 {
    margin:    0 auto;
    max-width: 940px;
    top: -340px;
}

.previous_btn,
.next_btn,
.previous_btn-2,
.next_btn-2 {
    margin:   auto;
    position: absolute;
    top:      0;
    bottom:   0;

    cursor:             pointer;
    height:             65px;
    opacity:            0.5;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition:    opacity 0.4s ease-in-out;
    -ms-transition:     opacity 0.4s ease-in-out;
    -o-transition:      opacity 0.4s ease-in-out;
    transition:         opacity 0.4s ease-in-out;
    width:              65px;
}

.previous_btn,
.previous_btn-2 {
    left:     50px;
}

.next_btn,
.next_btn-2 {
    right:    100px;
}

.previous_btn:hover,
.next_btn:hover,
.previous_btn-2:hover,
.next_btn-2:hover{
    opacity: 1;
}

<div class="slider-wrapper">
    <div class="slider">
        <div class="slide_viewer">
            <div class="slide_group">
                <div class="slide">
                    <div class="slider-content-left">
                        <div class="product-image P60" onclick="openModal();currentSlide(1)">
                            <i class="material-icons">zoom_out_map</i>
                        </div>
                    </div>
                    <div class="slider-content-right">
                        <div class="product-details">
                            <h2>P60R / P50R - Panniers</h2>
                            <p><i>Attachment: Strap-On</i></p>
                            <p><b style="margin-left: -15px;"><i>"Oxford's P60 Panniers were the best performing set in the test.<br>Use the internal dry bags and you'll have all the panniers you'll ever need."</b></i><br><br> RiDE - May 2017. <br><i>Read the full review <a href="#" style="text-decoration:underline;"> here</a></i></p>
                            <p>An extremely versatile set of panniers which provide a huge 60/50 litres of storage. Suitable for almost any bike, but perfect for naked bikes, tourers and sports tourers and for those that need a lot of flexibility in their luggage. Comes with ALL the necessary attachment equipment for a wide variety of bikes.</p>
                            <ul>
                                <li>Heat resistant base in case of momentary contact with the exhaust</li>
                                <li>Large top opening aand 360 degree opening zips for easy access to contents</li>
                                <li>Rubberised side panels helps to protect the paintwork</li>
                                <li>Internal net pocket</li>
                                <li>7 point secure fitting system</li>
                                <li>Made from tough ripstop Nylon</li>
                            </ul>
                            <h4 class="h4black">50L - £159.99<br> 60L - £169.99</h4>
                        </div>
                    </div>
                </div>

                <div class="slide">
                    <div class="slider-content-left">
                        <div class="product-image XW1" onclick="openModal14();currentSlide14(1)">
                            <i class="material-icons">zoom_out_map</i>
                        </div>
                    </div>
                    <div class="slider-content-right">
                        <div class="product-details">
                            <h2 style="color:black">XW1 - Waist bag 1.5L</h2>
                            <ul>
                                <li>1.5 litre capacity</li>
                                <li>Reflective logo and trim</li>
                                <li>Main compartment and front pocket</li>
                                <li>Padded back section for added comfort</li>
                                <li>Adjustable waist strap ( up to 40")</li>
                                <li>Material: 600D polyester and Ripstop fabric </li>
                                <li>Main compartment dimensions W19cm x H13cm</li>
                            </ul>
                            <h4 class="h4black">£14.99</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slide_buttons"></div>

    <div class="directional_nav">
        <div class="previous_btn" title="Previous">
            <i class="material-icons">arrow_back_ios</i>
        </div>
        <div class="next_btn" style="text-align:right;" title="Next">
            <i class="material-icons">arrow_forward_ios</i>
        </div>
    </div>
</div>