Пропадает изображение при слайде

242
12 апреля 2018, 11:22

    $repeat =  setInterval(function(){ 
        var currentImageIndex = $('.slider-curry').index(); 
        var nextImageIndex = currentImageIndex + 1; 
         
       
        if(nextImageIndex == ($('.slider-content:last').index()+ 1)) { 
          $('.slider-content').removeClass('slider-curry'); 
        $('.slider-content').eq(0).addClass('slider-curry'); 
        $('.slider h2, .slider h3, .slider p, .slider .rating-stars').animate({left: '-500px'}, 1); 
     $('.slider-curry h2, .slider-curry  h3, .slider-curry p, .slider-curry .rating-stars').animate({left: '0px'}, 500); 
     $('.slider img').animate({width: '100px'}, 1); 
      $('.slider-curry img').animate({width: '125px'}); 
        } 
       else { 
         $('.slider-content').removeClass('slider-curry'); 
        $('.slider-content').eq(nextImageIndex).addClass('slider-curry'); 
        $('.slider h2, .slider h3, .slider p, .slider .rating-stars').animate({left: '-500px'}, 1); 
     $('.slider-curry h2, .slider-curry  h3, .slider-curry p, .slider-curry .rating-stars').animate({left: '0px'}, 500); 
     $('.slider img').animate({width: '100px'}, 1); 
      $('.slider-curry img').animate({width: '125px'}); 
       } 
         
      }, 3000);
.slider { 
  margin: 0 auto; 
  margin-top: 265px; 
  text-align: center; 
  width: 570px; 
  background-color: white; 
  position: relative; 
   
   
} 
.slider-text { 
  width: 570px; 
  overflow: hidden; 
} 
.slider h2, .slider h3, .slider p, .slider .rating-stars { 
  display: none; 
  position: relative; 
  left: -500px; 
   
} 
.arrow-left { 
  background-image: url(../images/icons/arrow-left.png); 
  width: 23px; 
  height: 42px; 
  position: absolute; 
  top: -110px; 
  cursor: pointer; 
} 
.arrow-right { 
  position: absolute; 
  width: 23px; 
  height: 42px; 
  background-image: url(../images/icons/arrow-right.png); 
  top: -110px; 
  right: 0; 
  cursor: pointer; 
   
} 
 
.slider-curry h2, .slider-curry  h3, .slider-curry p, .slider-curry .rating-stars { 
  margin-right: 0; 
  position: relative; 
  display: block; 
   
   
} 
.arrow-left, .arrow-right { 
  display: none; 
} 
 
.slider img { 
  border-radius: 50%; 
  margin-bottom: 75px; 
  cursor: pointer; 
  opacity: 0.5; 
  width: 100px; 
  height: auto; 
  position: absolute; 
  margin: 0 auto; 
  
} 
.slider-curry h2 { 
  margin-top: 100px; 
} 
.slider-content:nth-child(1) img { 
  position: absolute; 
  left: 50%; 
  top: -150px; 
  margin-left: -58px; 
} 
.slider-content:nth-child(2) img { 
  position: absolute; 
  right: -100px; 
  top: -150px; 
} 
.slider-content:nth-child(3) img { 
  position: absolute; 
  left: -100px; 
  top: -150px; 
} 
 
 
.slider-curry img { 
  opacity: 1; 
  width: 125px; 
  position: absolute; 
  margin-top: -15px; 
   
} 
.slider-curry h2 { 
  font-size: 32px; 
  font-weight: 100; 
  margin-bottom: 30px; 
  display: block; 
} 
.slider-curry p { 
  margin-bottom: 30px; 
  display: block; 
} 
.slider-curry h3 { 
  margin-top: 60px; 
  text-transform: uppercase; 
  font-size: 12px; 
  margin-bottom: 120px; 
  display: block; 
} 
.slider-curry .rating-stars { 
   
  position: relative; 
   
  height: 23px; 
  width: 155px; 
  margin: 0 auto; 
  display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="slider"> 
           
          <div class="slider-content slider-curry"> 
          
            <img class="slider-img" src="images/icons/33.png" alt="" width="130" height="130"> 
            <div class="slider-text"> 
              <h2>1New Providence is the great UI kit </h2> 
              <p>“1Just then her head struck against the roof of the hall: in fac 
              “Just then her head struck against the roof of the hall: in fac 
              </p> 
              <div class="rating-stars"> 
                <div class="icon1"></div> 
                <div class="icon2"></div> 
                <div class="icon3"></div> 
                <div class="icon4"></div> 
                <div class="icon5"></div> 
              </div> 
              <h3>Cameron Dowman</h3> 
            </div> 
          </div> 
          <div class="slider-content"> 
           
            <img class="slider-img" src="images/icons/33.png" alt="" width="130" height="130"> 
           <div class="slider-text"> 
              <h2>2New Providence is the great UI kit</h2> 
              <p>“2Just then her head struck against the roof of the hall: in fac 
              “Just then her head struck against the roof of the hall: in fac 
              </p> 
              <div class="rating-stars"> 
                <div class="icon1" style="background-image: url(images/icons/star-black.png);"></div> 
                <div class="icon2" style="background-image: url(images/icons/star-black.png);"></div> 
                <div class="icon3" style="background-image: url(images/icons/star-black.png);"></div> 
                <div class="icon4" style="background-image: url(images/icons/star-black.png);"></div> 
                <div class="icon5" style="background-image: url(images/icons/star-black.png);"></div> 
              </div> 
              <h3>Cameron Dowman</h3> 
            </div> 
          </div> 
          <div class="slider-content"> 
           
            <img  class="slider-img" src="images/icons/33.png" alt="" width="130" height="130"> 
            <div class="slider-text"> 
              <h2>3New Providence is the great UI kit </h2> 
              <p>“3Just then her head struck against the roof of the hall: in fac 
              “Just then her head struck against the roof of the hall: in fac 
              </p> 
              <div class="rating-stars"> 
                <div class="icon1"></div> 
                <div class="icon2"></div> 
                <div class="icon3"></div> 
                <div class="icon4" style="background-image: url(images/icons/star-black.png);"></div> 
                <div class="icon5"></div> 
              </div> 
              <h3>Cameron Dowman</h3> 
              </div> 
          </div> 
          <div class="arrow-left"> 
          </div> 
          <div class="arrow-right"> 
          </div> 
           
        </div>
На компьютере листает слайдер все нормально но на телефонной версии на 3 изображении оно пропадает. В чем причина??? Ниже находится css для телефонов
.slider { 
      width: 100%; 
    } 
    .slider img { 
      display: none; 
    } 
    .slider-curry img { 
      margin: 0 auto; 
      display: block; 
    } 
     
     
    .arrow-left, .arrow-right { 
      display: block; 
    } 
  .slider-content:nth-child(1) img { 
    margin: 0 auto; 
    right: 0; 
      left: 0; 
       
  } 
  .slider-content:nth-child(2) img { 
    margin: 0 auto; 
       
      right: 0; 
      left: 0; 
     
  } 
  .slider-content:nth-child(3) img { 
    margin: 0 auto; 
    right: 0; 
    left: 0; 
       
  } 
    .slider-text { 
      text-align: center; 
      width: 100%; 
       
    }

READ ALSO
Создать массив из значения input

Создать массив из значения input

Есть <input type=text>, в которое пользователь вписывает свое значение в формате от-до например 25-29 из введенного в input значения по нажатию кнопки...

205
Как кастомизировать jquery?

Как кастомизировать jquery?

Что если мне нужен не весь JQuery а только AJAX-запросы из него? Или какие-то другие функции на выборМожно ли эту библиотеку сначала кастомизировать...

175
Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать какие то действия в интернете,чтобы не проделывать кучу однообразной...

200
разница Thread и Task

разница Thread и Task

Можно ли утверждать что Task автоматически создает пул потоков, а Thread нет ?

191