jquery - 我的自定义 jquery slider 问题

Question

我正在尝试为我的个人页面设计一个 jquery slider ，但我不知道如何正确地让它工作，应该每 2 秒转换一次，但没有任何反应!

我也在尝试做到这一点，当我点击下一个和上一个按钮时，它可以让我自己浏览幻灯片。

我的自定义 jquery slider 的容器元素是 index_hub_slider_container

到目前为止，这是我的代码:

$(document).ready(function(){

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = $('.index_hub_slider_item');
    for (i = 0; i < slides.length; i++) {
        slides[i].css("display", "none");
    }
    slideIndex++;
    if(slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].css("display", "block");
    setTimeout(showSlides,2000);
}

});

.index_hub_maincontainer{margin:0px 0px; width:100%; height:auto; align-items:center; background-color:#EEEEEE; display:flex; flex-direction:column; padding:50px 100px 25px 100px; font-family:Open Sans;}

.index_hub_tittle{width:100%; height:50px; display:flex; justify-content:center; align-items:center; color:#454545; font-family:Archivo Black; font-size:35px; font-weight:900;}

.index_hub_description{width:100%; height:50px;display:flex; justify-content:center; align-items:center; color:rgba(0,0,0,0.7); font-size:16px; margin-bottom:40px; font-weight:200;}

.index_hub_contents_container{width:100%; height:650px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}

.index_hub_content1{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; background-size:cover; background-image:url('images/doggy4.jpg');}

.index_hub_content1_title{font-size:20px;  font-weight:500; text-align:center; position:absolute; bottom:10px; left:0px; z-index:99999999; color:white; text-transform:uppercase; width:100%; background-color:rgba(0,0,0,0.7); padding:8px 15px;}

.black_overlay{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0}

.black_overlay:hover{opacity:0.3;}

.black_gradient{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); opacity:0}

.black_gradient:hover{opacity:0.5;}

.index_hub_content2{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; flex-flow:column-reverse; align-items:center; background-size:cover; background-image:url('images/doggy5.jpg');}

.index_hub_content2_title{font-size:20px; font-weight:500; color:white; text-align:center; text-transform:uppercase; padding:8px 15px; width:100%; background-color:rgba(0,0,0,0.7); position:absolute; left:0px; bottom:10px;}

.index_hub_content3{position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:100%; display:flex; justify-content:center; align-items:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2); background-position:center; background-size:cover; background-repeat:no-repeat;}

.index_hub_content3_title{width:100%; font-size:20px; z-index:99999; text-align:center; font-weight:500; color:white; text-transform:uppercase; position:absolute; left:0px; bottom:10px; padding:8px 15px; background-color:rgba(0,0,0,0.7);}

.index_hub_slider_container{width:66%; box-shadow:3px 3px 3px rgba(0,0,0,0.2); height:56%; position:absolute; top:0px; left:0px; overflow:hidden;}

.index_hub_slider_item{width:100%; height:100%; position:absolute; left:0px; bottom:0px; background-position:center; background-size:cover; /*display:none;*/}

.index_hub_slider_item_image{width:100%; height:100%; background-position:center; background-size:cover; position:absolute; top:0px; left:0px;}

.index_hub_slider_item_texts_container{width:100%; height:20%; position:absolute; bottom:0px; left:0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)); padding:5px 150px 5px 10px;}

.index_hub_slider_item_texts_text{font-size:13px; color:rgba(255,255,255,0.9);}

.index_hub_slider_item_texts_link{width:auto; padding:5px 10px; background-color:var(--main_color); color:white; font-weight:500; font-size:15px; border-radius:3px; position:absolute; top:50%; transform:translateY(-50%); right:25px;}

.index_hub_slider_prev{position:absolute; top:50%; transform:translateY(-50%); left:0px; transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:999999999999;}

.index_hub_slider_next{position:absolute; top:50%; transform:translateY(-50%); right:0px;transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:99999999999;}

.index_hub_slider_container:hover .index_hub_slider_prev{opacity:1;}

.index_hub_slider_container:hover .index_hub_slider_next{opacity:1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="index_hub_maincontainer" style=" ">
    <!--<span class="index_hub_tittle" style=" ">TUS ESPECIALISTAS EN ENTRENAMIENTO CANINO</span>
    <span class="index_hub_description" style="">Disponemos de muchos planes personalizados de adiestramiento, pregúntanos que podemos hacer por ti y tu mascota</span>-->
    <div class="index_hub_contents_container" style="">
        <a class="index_hub_content1" href="/clases/domicilio" style="background-image:url('/img/dogs19.jpg');" title="Clases a domicilio" >
            <span class="index_hub_content1_title" style="" >Clases a domicilio</span>
            <div class="black_overlay" style=""></div>
        </a>
        <a class="index_hub_content2" href="/clases/grupo" style="background-image:url('/img/dogs20.jpg');" title="Clases en grupo">
            <span class="index_hub_content2_title" style="">Clases en grupo</span>
            <div class="black_overlay" style=""></div>
        </a>
        <a class="index_hub_content3" href="/formate-con-nosotros" style="background-image:url('img/dogs14.jpg'); background-position-x:55%;" title="Conviertete en adiestrador canino profesional">
            <span class="index_hub_content3_title" style="">Formate con nosotros</span>
            <div class="black_overlay" style=""></div>
        </a>
        <div class="index_hub_slider_container" href="" style="">
		    <i class="index_hub_slider_prev fa fa-chevron-left pointer"></i>
			<i class="index_hub_slider_next fa fa-chevron-right pointer"></i>
            <div class="index_hub_slider_item" style="">
			    <div class="index_hub_slider_item_image" style="background-image:url('/img/dogs18.jpg');"></div>
				<div class="index_hub_slider_item_texts_container" style="">
					<span class="index_hub_slider_item_texts_text" >Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
                    <a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
			    </div>
		    </div>
			<div class="index_hub_slider_item" style="">
			    <div class="index_hub_slider_item_image" style="background-image:url('/img/dogs15.jpg');"></div>
				<div class="index_hub_slider_item_texts_container" style="">
					<span class="index_hub_slider_item_texts_text" >Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
                    <a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
			    </div>
		    </div>
        </div>
    </div>
</div>

Answer 1

$(document).ready(function(){
  var slideIndex = 0;
  showSlides();

  function showSlides() {
    //get the slides, and hide all of them
    //jQuery will iterate over all of the elements
    //in the result stack
    var slides = $('.index_hub_slider_item').hide();
    //show the current slide
    //++ after the variable will increment it after
    //it is used
    slides.eq(slideIndex++).css("display", "block");
    //if the slide index is equal to or greater than
    //the array length (size of n = indexes of 0-(n-1))
    //set it back to 0
    if (slideIndex >= slides.length) {
      slideIndex = 0
    }
    //start the next iteration
    setTimeout(showSlides,2000);
}

});

.index_hub_maincontainer{margin:0px 0px; width:100%; height:auto; align-items:center; background-color:#EEEEEE; display:flex; flex-direction:column; padding:50px 100px 25px 100px; font-family:Open Sans;}

.index_hub_tittle{width:100%; height:50px; display:flex; justify-content:center; align-items:center; color:#454545; font-family:Archivo Black; font-size:35px; font-weight:900;}

.index_hub_description{width:100%; height:50px;display:flex; justify-content:center; align-items:center; color:rgba(0,0,0,0.7); font-size:16px; margin-bottom:40px; font-weight:200;}

.index_hub_contents_container{width:100%; height:650px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}

.index_hub_content1{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; background-size:cover; background-image:url('images/doggy4.jpg');}

.index_hub_content1_title{font-size:20px;  font-weight:500; text-align:center; position:absolute; bottom:10px; left:0px; z-index:99999999; color:white; text-transform:uppercase; width:100%; background-color:rgba(0,0,0,0.7); padding:8px 15px;}

.black_overlay{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0}

.black_overlay:hover{opacity:0.3;}

.black_gradient{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); opacity:0}

.black_gradient:hover{opacity:0.5;}

.index_hub_content2{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; flex-flow:column-reverse; align-items:center; background-size:cover; background-image:url('images/doggy5.jpg');}

.index_hub_content2_title{font-size:20px; font-weight:500; color:white; text-align:center; text-transform:uppercase; padding:8px 15px; width:100%; background-color:rgba(0,0,0,0.7); position:absolute; left:0px; bottom:10px;}

.index_hub_content3{position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:100%; display:flex; justify-content:center; align-items:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2); background-position:center; background-size:cover; background-repeat:no-repeat;}

.index_hub_content3_title{width:100%; font-size:20px; z-index:99999; text-align:center; font-weight:500; color:white; text-transform:uppercase; position:absolute; left:0px; bottom:10px; padding:8px 15px; background-color:rgba(0,0,0,0.7);}

.index_hub_slider_container{width:66%; box-shadow:3px 3px 3px rgba(0,0,0,0.2); height:56%; position:absolute; top:0px; left:0px; overflow:hidden;}

.index_hub_slider_item{width:100%; height:100%; position:absolute; left:0px; bottom:0px; background-position:center; background-size:cover; /*display:none;*/}

.index_hub_slider_item_image{width:100%; height:100%; background-position:center; background-size:cover; position:absolute; top:0px; left:0px;}

.index_hub_slider_item_texts_container{width:100%; height:20%; position:absolute; bottom:0px; left:0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)); padding:5px 150px 5px 10px;}

.index_hub_slider_item_texts_text{font-size:13px; color:rgba(255,255,255,0.9);}

.index_hub_slider_item_texts_link{width:auto; padding:5px 10px; background-color:var(--main_color); color:white; font-weight:500; font-size:15px; border-radius:3px; position:absolute; top:50%; transform:translateY(-50%); right:25px;}

.index_hub_slider_prev{position:absolute; top:50%; transform:translateY(-50%); left:0px; transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:999999999999;}

.index_hub_slider_next{position:absolute; top:50%; transform:translateY(-50%); right:0px;transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:99999999999;}

.index_hub_slider_container:hover .index_hub_slider_prev{opacity:1;}

.index_hub_slider_container:hover .index_hub_slider_next{opacity:1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="index_hub_maincontainer" style=" ">
    <!--<span class="index_hub_tittle" style=" ">TUS ESPECIALISTAS EN ENTRENAMIENTO CANINO</span>
    <span class="index_hub_description" style="">Disponemos de muchos planes personalizados de adiestramiento, pregúntanos que podemos hacer por ti y tu mascota</span>-->
    <div class="index_hub_contents_container" style="">
        <a class="index_hub_content1" href="/clases/domicilio" style="background-image:url('/img/dogs19.jpg');" title="Clases a domicilio" >
            <span class="index_hub_content1_title" style="" >Clases a domicilio</span>
            <div class="black_overlay" style=""></div>
        </a>
        <a class="index_hub_content2" href="/clases/grupo" style="background-image:url('/img/dogs20.jpg');" title="Clases en grupo">
            <span class="index_hub_content2_title" style="">Clases en grupo</span>
            <div class="black_overlay" style=""></div>
        </a>
        <a class="index_hub_content3" href="/formate-con-nosotros" style="background-image:url('img/dogs14.jpg'); background-position-x:55%;" title="Conviertete en adiestrador canino profesional">
            <span class="index_hub_content3_title" style="">Formate con nosotros</span>
            <div class="black_overlay" style=""></div>
        </a>
        <div class="index_hub_slider_container" href="" style="">
		    <i class="index_hub_slider_prev fa fa-chevron-left pointer"></i>
			<i class="index_hub_slider_next fa fa-chevron-right pointer"></i>
            <div class="index_hub_slider_item" style="">
			    <div class="index_hub_slider_item_image" style="background-image:url('/img/dogs18.jpg');"></div>
				<div class="index_hub_slider_item_texts_container" style="">
					<span class="index_hub_slider_item_texts_text" >1Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
                    <a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
			    </div>
		    </div>
			<div class="index_hub_slider_item" style="">
			    <div class="index_hub_slider_item_image" style="background-image:url('/img/dogs15.jpg');"></div>
				<div class="index_hub_slider_item_texts_container" style="">
					<span class="index_hub_slider_item_texts_text" >2Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
                    <a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
			    </div>
		    </div>
        </div>
    </div>
</div>