Скольжение нескольких div слева направо
Я пытаюсь сдвинуть несколько тегов div с 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;
}
нет, я хочу что-то вроде этого: ylaw.ca заметили, как заголовок скользит, открывая новые? и обратно. вот что я пытаюсь получить.
Если вы можете использовать внешнюю библиотеку, я предлагаю использовать карусель Boostrap. Это именно то, что вы ищете. getbootstrap.com/docs/4.0/components/carousel
да, именно то, что я ищу, но знаете ли вы, что редактирование в javascript или css мне нужно сделать автоматическим после, скажем, 4 секунд? большое спасибо, чувак!
Ага. Вы согласны с использованием Bootstrap (ссылка, которую я предоставил)? Если да, я опубликую с ним пример, который меняет слайд каждые 4 секунды.
Да, я в порядке, спасибо. дайте мне знать, когда опубликуете!
Только что вернулся с работы. Разместил сейчас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот пример карусели с использованием 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/
Удивительный! Спасибо. Хотя одна мелочь. когда я запускаю его в редакторе (возвышенном), иногда изображения (или текст в моем случае) приостанавливаются гораздо дольше, чем на 3 секунды. По ощущениям жучок. Вы знаете об этом? Какие-нибудь исправления? Спасибо за помощь.
@UrielBitton Хм, я не уверен на 100%. Если вы можете опубликовать свой код в jsfiddle и связать его здесь, я могу взглянуть. Кроме того, если вы не возражаете, не могли бы вы принять мой ответ?
О Конечно! Новое в переполнении стека, ха-ха Размещаю сейчас.
@UrielBitton Публикуемый вами jsfiddle, похоже, мне подходит. Я не могу воспроизвести описанную вами проблему зависания слайдов. У вас все еще есть проблема?
Хорошо, спасибо, чувак! Не могли бы вы проверить мой последний пост? Большое спасибо. даст вам голоса :)
Итак, вы хотите, чтобы это было похоже на стопку карт, где вы сдвигаете одну сверху, чтобы открыть другую?