jquery - 如何为滑块创建点击功能？

Question

我有一个网站，其主要功能是艺术品滑块。我在为每个滑块“页面”创建点击功能时遇到问题。我在右侧有一个与名称相对应的名称列表，如果在单击一个特定页面时出现特定页面，并且不会像现在这样破坏滑块的功能，我会很高兴。

这是链接：https ://lizetteayala1211.github.io/ftp-touch/touchindex.html

这是我正在使用的滑块代码：https ://codepen.io/Asadabbas/pen/XxOvdY

$(document).ready(function(){ 
        function _slider(id){
            var slidewidth = $('.slider ul li').width();
            var slideheight = $('.slider ul li').outerHeight();

            $('.slider').css({'height':slideheight,'width':slidewidth});
            $('.slider ul li:not(.active)').css({'left':slidewidth});
      if($('.slider ul li:nth-child(1)').hasClass('active')){
        $('.slider ul li:last-child').css({left: - slidewidth}, -200).prependTo('.slider ul');
      }
            function moveright(){
                var slideheight = $('.slider ul li.active').next().height();
                var slidewidth = $('.slider ul li.active').next().width();
                $('.slider').animate({height:slideheight,width:slidewidth},200);
                
                if ($('.slider ul li:nth-last-child(2)').hasClass('active')) {
                     $('.slider ul li:first-child').css({left: slidewidth}, -200).appendTo('.slider ul');
                     $('.slider ul li.active').css({left: -slidewidth}, -200).removeClass('active').next().addClass('active').css({left: 0}, -200);
                } else {
                    $('.slider ul li.active').css({left: -slidewidth}, -200).removeClass('active').next().addClass('active').css({left: 0}, -200);
                }
            }
            function moveleft(){
                var slideheight = $('.slider ul li.active').prev().height();
                var slidewidth = $('.slider ul li.active').prev().width();
                $('.slider').animate({height:slideheight,width:slidewidth},200);


                if ($('.slider ul li:nth-child(2)').hasClass('active')) {
                     $('.slider ul li:last-child').css({left: - slidewidth}, -200).prependTo('.slider ul');
                     $('.slider ul li.active').removeClass('active').css({left: slidewidth}, -200).prev().addClass('active').css({left: 0}, -200);
                } else {
                    $('.slider ul li.active').removeClass('active').css({left: slidewidth}, -200).prev().addClass('active').css({left: 0}, -200);
                }   
            } 

            $('.control_next').on('click', function(){ 
                moveright();
            });
            $('.control_prev').on('click', function(){ 
                moveleft();
            });
        } 
        _slider('slider_');
    }); 

body {display: flex;justify-content: center;align-items: center;height: 100vh;}
        .slider{position:relative;overflow:hidden;margin:0;border-radius:4px;overflow:hidden;}
        .slider ul{position:relative;margin:0;padding:0;height:100%;list-style:none;width:100%;overflow:hidden;left:0;}
        .slider ul li{position:absolute;display:block;float:left;margin:0;padding:0;width:500px;height:300px;background:#F7B733;text-align:center;transition: ease-out 0.4s;color: #fff;font-size: 22px;font-family: monospace;display: flex;}
        .slider ul li span{margin:auto}
        .slider ul li.active{left: 0;}
        .slider ul li.slider2{background: #4ABDAC}
        .slider ul li.slider3{background: #B82601}
        .slider ul li.slider4{background: #8FC33A;height:350px;}
        .slider ul li.slider5{background: #F7882F;}
        .slider ul li.slider6{background: #43C0F6}
        .slider ul li.slider7{background: #F81B84;}
        /*controls*/
        .controls{-webkit-transition:all 0.5s ease;opacity: 0;}
        .control_prev,
        .control_next{position:absolute;top:40%;z-index:999;display:block;padding:20px;width:auto;height:auto;background:rgba(51, 51, 51, 0.33);color:#fff;text-decoration:none;font-weight:600;font-size:18px;opacity:0;cursor:pointer;}
        .slider:hover .controls{-webkit-transition:all 0.5s ease;opacity: 1;}
        .slider:hover .controls .control_prev,
        .slider:hover .controls .control_next{opacity:0.8}
        .control_prev{left:0;border-radius: 0 10px 10px 0;}
        .control_next{right:0;border-radius:10px 0 0 10px;}
        .slider:hover .controls .control_prev:hover,
        .slider:hover .controls .control_next:hover{opacity:1;-webkit-transition:all 0.2s ease;}

<div class="slider" id="asad">
            <ul>
                <li class="active"><span>Slide 1</span></li> 
                <li class="slider2"><span>Slide 2</span></li>       
                <li class="slider3"><span>Slide 3</span></li> 
                <li class="slider4"><span>Slide 4</span></li>
                <li class="slider5"><span>Slide 5</span></li> 
                <li class="slider6"><span>Slide 6</span></li> 
                <li class="slider7"><span>Slide 7</span></li> 
            </ul>
            <div class="controls">
                <div class="control control_prev">&larr;</div>
                <div class="control control_next">&rarr;</div>
            </div>
        </div>  

任何帮助将不胜感激！

标签： jqueryonclickslider