Date.ISOString неправильно преобразует из метки времени? [Дубликат]
Обновление 2018
Bootstrap 4
Карусель изменилась в 4.x, а переходы с несколькими слайдами анимации могут быть переопределены следующим образом ...
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
Bootstrap 4 Alpha.6 Demo Bootstrap 4.0.0 (показать 4, вперед 1 за раз) Bootstrap 4.1.0 (продвигать все 4 сразу)
Еще один вариант - отзывчивая карусель, которая показывает только и продвигается 1 слайд на меньших экранах. Вместо клонирования слайдов, как в предыдущем примере, этот настраивает CSS и использует jQuery только для перемещения дополнительных слайдов для обеспечения непрерывного циклирования (обтекание):
Не просто копировать и вставлять этот код. Во-первых, поймите, как это работает.
Bootstrap 4 Отзывчивый (показ 3, 1 слайд на мобильном телефоне)
@media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
Пример - Bootstrap 4 Отзывчивый (показ 4, 1 слайд на мобильном телефоне)
Загрузочный файл 3
Вот пример 3.x в Bootply: http: // bootply.com/89193
Вам нужно поместить целую строку изображений в элемент активным. Вот еще одна версия, которая не складывает изображения при меньших ширинах экрана: http://bootply.com/92514
EDIT Альтернативный подход для продвижения по одному слайду за раз:
Используйте jQuery для клонирования следующих элементов.
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
И затем CSS для размещения соответственно ...
До 3.3.1
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
После 3.3.1
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
Это покажет 3, но будет показывать только по одному:
Пожалуйста, не копируйте и не вставляйте этот код. Во-первых, поймите, как это работает. Этот ответ здесь, чтобы поможет вам узнать .
Удвоение этой модифицированной бутстрапа 4 карусели работает только наполовину (цикл прокрутки перестает работать) как сделать 2 загрузочных слайдера на одной странице без смешивания их css и jquery?
3 ответа
Вы должны умножить на 1000 как счетчик JavaScript в миллисекундах с эпохи (это 01/01/1970), а не секунды:
var d = new Date(timestamp*1000);
-
1– bobo2000 12 June 2014 в 12:50
function convertTimestamp(timestamp) {
var d = new Date(timestamp * 1000), // Convert the passed timestamp to milliseconds
yyyy = d.getFullYear(),
mm = ('0' + (d.getMonth() + 1)).slice(-2), // Months are zero based. Add leading 0.
dd = ('0' + d.getDate()).slice(-2), // Add leading 0.
hh = d.getHours(),
h = hh,
min = ('0' + d.getMinutes()).slice(-2), // Add leading 0.
ampm = 'AM',
time;
if (hh > 12) {
h = hh - 12;
ampm = 'PM';
} else if (hh === 12) {
h = 12;
ampm = 'PM';
} else if (hh == 0) {
h = 12;
}
// ie: 2014-03-24, 3:00 PM
time = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min + ' ' + ampm;
return time;
}
Вы можете получить значение, вызвав как convertTimestamp('1395660658')
Потому что ваше время в секундах. Javascript требует, чтобы он был в миллисекундах с эпохи. Умножьте его на 1000, и это должно быть то, что вы хотите.
//time in seconds
var timeInSeconds = ~(new Date).getTime();
//invalid time
console.log(new Date(timeInSeconds));
//valid time
console.log(new Date(timeInSeconds*1000));
-
1– bobo2000 12 June 2014 в 12:50