Скольжение нескольких делений слева направо - PullRequest
Новая
       80

Скольжение нескольких делений слева направо

0 голосов
/ 24 июня 2018

Я пытаюсь сдвинуть несколько тегов p тега справа налево (или наоборот), но вместо того, чтобы сдвигать их справа налево, они все отображаются один за другим.Как мне показать только один, а затем сдвинуть следующий слева (или справа) и так далее?Спасибо!

HTML: 

<div id="slider">
  <div class="slide1">
    <p>Lorem ipsum dolor sit amet</p><br />
    <ul class="actions">
      <li><a href="#" class="button special big">Get 
        Details</a></li>    
    </ul>
  </div>
  <div class="slide2">
    <p>Epes di ameb latota ed atem</p><br />
    <ul class="actions">
      <li><a href="#" class="button special big">More Info</a> 
      </li> 
    </ul>
  </div>
</div>

Javascript: 

setInterval(function () {
  $('#slider').animate({right: "2000px"}, "slow", function () {
    $('#slider img:first-child').appendTo('#slider');
    $('#slider').css('right', '0');
  });
}, 4000);

CSS: 

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 500px;
  height: 180px;
}

1 Ответ

0 голосов
/ 26 июня 2018

Вот пример карусели с использованием Bootstrap.Измените значение data-interval с 4000 на любой интервал времени в миллисекундах, в котором вы хотите, чтобы изображения переходили. 

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://www.hdwall.xyz/wp-content/uploads/2018/04/hdwall.xyz-Pink-Lowpoly-Abstract-Samsung-Galaxy-S9-Stock931866586-1280x720.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://i.vimeocdn.com/video/350636663_1280x720.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://wallpapersite.com/images/pages/pic_w/8931.jpg" alt="Third slide">
      </div>
    </div>
  </div>
</body>
</html>

Дополнительная информация и документация по Bootstrap здесь: https://getbootstrap.com/docs/4.0/components/carousel/

...