Смена слайдов мышкой или пальцем на Bootstrap 3

Не всегда представляется возможным обновить CSS и JS библиотеки сайта на новые, но улучшить их функционал всегда будет не лишним.

В данном примере используется небольшой JS-код, позволяющий листать пальцем или мышкой сделанные на Bootstrap 3 карусели.

Пример:

Обычная карусель:

Полноценный сайт с наполнением.

от 15000 рублей

Скидки при замене старого сайта на новый и при использовании готовых решений.

Бесплатная поддержка и помощь в управлении сайтом.

Карусель со сменой слайдов пальцем или мыщью:

Полноценный сайт с наполнением.

от 15000 рублей

Скидки при замене старого сайта на новый и при использовании готовых решений.

Бесплатная поддержка и помощь в управлении сайтом.

jQuery:

$(".carousel").on("touchstart", function (event) {
    var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function (event) {
        var xMove = event.originalEvent.touches[0].pageX;
        if (Math.floor(xClick - xMove) > 5) {
            $(this).carousel('next');
		}
        else if (Math.floor(xClick - xMove) < -5) {
            $(this).carousel('prev');
		}
	});
    $(".carousel").on("touchend", function () {
        $(this).off("touchmove");
	});
});

var xClick;
var mouseDown;
$(".carousel").on("mousedown", function (event) {
    xClick = event.pageX;
    mouseDown = true;
});
$(".carousel").on("mousemove", function (event) {
    if (mouseDown) {
        var xMove = event.pageX;
        if (Math.floor(xClick - xMove) > 5) {
            $(this).carousel('next');
		}
        else if (Math.floor(xClick - xMove) < -5) {
            $(this).carousel('prev');
		}
	}
});
$(".carousel").on("mouseup", function (event) {
    mouseDown = false;
});

$(".carousel").on("touchstart", function (event) {

var xClick = event.originalEvent.touches[0].pageX;

$(this).one("touchmove", function (event) {

var xMove = event.originalEvent.touches[0].pageX;

if (Math.floor(xClick - xMove) > 5) {

$(this).carousel('next');

}

else if (Math.floor(xClick - xMove) < -5) {

$(this).carousel('prev');

}

});

$(".carousel").on("touchend", function () {

$(this).off("touchmove");

});

var xClick;

var mouseDown;

$(".carousel").on("mousedown", function (event) {

xClick = event.pageX;

mouseDown = true;

});

$(".carousel").on("mousemove", function (event) {

if (mouseDown) {

var xMove = event.pageX;

if (Math.floor(xClick - xMove) > 5) {

$(this).carousel('next');

}

else if (Math.floor(xClick - xMove) < -5) {

$(this).carousel('prev');

}

});

$(".carousel").on("mouseup", function (event) {

mouseDown = false;

});

Найдено на stackoverflow.com в теме adding swipe to bootstrap carousel

Дмитрий: 20.11.2022 в 10:29

Здравствуйте!
А где же само html и css примера 🙁
Так не честно))) Обычно всё разжёвываете))

Ответить
- Alexander: 21.11.2022 в 11:09
  
  Это код для старой карусели на Bootstrap 3
  Если он нужен, то уже имеется свой HTML и CSS для него.
  
  Ответить
  - Дмитрий: 21.11.2022 в 12:09
    
    Я именно про этот момент, чтобы использовать в точности отображение конструкции именно этого Вашего примера - http://joxi.ru/52a9XLEH003Xb2
    Готовлю описательную статью описания спектакля-мюзикла и думаю, что такое отображение идеально для презентации актеров, участвующих в мюзикле.
    
    Ответить
    - Alexander: 21.11.2022 в 12:40
      
      Вы хотите подключить старый бутстрап и потом фиксить его карусель.
      Так не правильно, да и данная тема не для этого.
      Скорее всего на сайте есть для этого другие библиотеки.
      
      Ответить
      - Дмитрий: 21.11.2022 в 13:33
        
        У меня сейчас, на сайте, такая версия * Bootstrap v3.3.5
        
        Ответить
        
        Alexander: 21.11.2022 в 16:35
        
        Завтра скину ксс и хтмл или сами вытащите с из страницы их.
        
        Ответить
        
        Дмитрий: 21.11.2022 в 17:41
        
        Да, давайте не буду Вас утруждать))
        Надергаю со страницы.
        В любом случае, спасибо за интересный блог)

Пример:

Обычная карусель:

Карусель со сменой слайдов пальцем или мыщью:

jQuery:

Смотрите также:

Добавить комментарий:

Комментарии: