Не могу настроить jQuery.Brazzers-Carousel?

Ссылка скопирована
2 апреля 2026 1 ответ

Здравствуйте такая проблемма ! Не получается настроить карусель https://agragregra.github.io/Brazzers-Carousel/
Нужно сделать так что бы при просмотре слайдов всегда возвращался первый слайд!

.brazzers-daddy:after {   content: "";   display: table;   clear: both; } .brazzers-daddy {   position: relative; } .brazzers-daddy img {   width: 100%;   position: relative;   display: none;   top: 0;   left: 0;   margin-bottom: 10px; } .brazzers-daddy img:first-child {   display: block; } .tmb-wrap {   position: absolute;   z-index: 2;   top: 0;   left: 0;   right: 0;   bottom: 0;   width: 100%;   height: 100%; } .tmb-wrap .tmb-wrap-table{   display: table;   height: 100%;   width: 100%;    } .tmb-wrap-table div{   display: table-cell;   transition: all 0.3s ease;   border-bottom: 5px solid transparent;   padding-top: 10px;   -webkit-transition: all 0.25s ease;   -o-transition: all 0.25s ease;   transition: all 0.25s ease;  } .tmb-wrap-table div:hover {   border-color: #fbb254; } .tmb-wrap-table div:first-child:last-child {   border-color: transparent; }

.brazzers-daddy:after { content: ""; display: table; clear: both; } .brazzers-daddy { position: relative; } .brazzers-daddy img { width: 100%; position: relative; display: none; top: 0; left: 0; margin-bottom: 10px; } .brazzers-daddy img:first-child { display: block; } .tmb-wrap { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .tmb-wrap .tmb-wrap-table{ display: table; height: 100%; width: 100%; } .tmb-wrap-table div{ display: table-cell; transition: all 0.3s ease; border-bottom: 5px solid transparent; padding-top: 10px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .tmb-wrap-table div:hover { border-color: #fbb254; } .tmb-wrap-table div:first-child:last-child { border-color: transparent; }

(function ($) {   $.fn.brazzersCarousel = function () {     return this.addClass("brazzers-daddy")       .append("<div class='tmb-wrap'><div class='tmb-wrap-table'>")       .append("<div class='image-wrap'>")       .each(function () {         var this_wrapper = $(this);          this_wrapper.removeClass("thumb-item");         this_wrapper           .find("img")           .appendTo(this_wrapper.find(".image-wrap"))           .each(function () {             this_wrapper.find(".tmb-wrap-table").append("<div>");           });       })       .find(".tmb-wrap-table")       .bind("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) {             var this_img = $(this).closest(".brazzers-daddy").find("img");             var all_thmbs = $(this).find("div");             var index_div = $(this).find("div.active").index();             all_thmbs.removeClass("active");             next = index_div + 1;             if (!this_img.eq(next).length) {               next = 0;             }             this_img.hide().eq(next).css("display", "block");             all_thmbs.eq(next).addClass("active");           } else if (Math.floor(xClick - xMove) < -5) {             var this_img = $(this).closest(".brazzers-daddy").find("img");             var all_thmbs = $(this).find("div");             var index_div = $(this).find("div.active").index();             all_thmbs.removeClass("active");             next = index_div - 1;             if (!this_img.eq(next).length) {               next = this_img.length;             }             this_img.hide().eq(next).css("display", "block");             all_thmbs.eq(next).addClass("active");           }         });         $(".carousel").on("touchend", function () {           $(this).off("touchmove");         });       })       .find("div")       .hover(function () {         var this_img = $(this)           .parent(".tmb-wrap-table")           .closest(".brazzers-daddy")           .find("img");         var all_thmbs = $(this).parent(".tmb-wrap-table").find("div");         this_img.hide().eq($(this).index()).css("display", "block");         all_thmbs.removeClass("active");         $(this).addClass("active");       })       .parent()       .find(":first")       .addClass("active");   }; })(jQuery);

(function ($) { $.fn.brazzersCarousel = function () { return this.addClass("brazzers-daddy") .append("<div class='tmb-wrap'><div class='tmb-wrap-table'>") .append("<div class='image-wrap'>") .each(function () { var this_wrapper = $(this); this_wrapper.removeClass("thumb-item"); this_wrapper .find("img") .appendTo(this_wrapper.find(".image-wrap")) .each(function () { this_wrapper.find(".tmb-wrap-table").append("<div>"); }); }) .find(".tmb-wrap-table") .bind("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) { var this_img = $(this).closest(".brazzers-daddy").find("img"); var all_thmbs = $(this).find("div"); var index_div = $(this).find("div.active").index(); all_thmbs.removeClass("active"); next = index_div + 1; if (!this_img.eq(next).length) { next = 0; } this_img.hide().eq(next).css("display", "block"); all_thmbs.eq(next).addClass("active"); } else if (Math.floor(xClick - xMove) < -5) { var this_img = $(this).closest(".brazzers-daddy").find("img"); var all_thmbs = $(this).find("div"); var index_div = $(this).find("div.active").index(); all_thmbs.removeClass("active"); next = index_div - 1; if (!this_img.eq(next).length) { next = this_img.length; } this_img.hide().eq(next).css("display", "block"); all_thmbs.eq(next).addClass("active"); } }); $(".carousel").on("touchend", function () { $(this).off("touchmove"); }); }) .find("div") .hover(function () { var this_img = $(this) .parent(".tmb-wrap-table") .closest(".brazzers-daddy") .find("img"); var all_thmbs = $(this).parent(".tmb-wrap-table").find("div"); this_img.hide().eq($(this).index()).css("display", "block"); all_thmbs.removeClass("active"); $(this).addClass("active"); }) .parent() .find(":first") .addClass("active"); }; })(jQuery);

Дополнительно:

up

Ответы:

up

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Игорь Волков Ответ

Для настройки jQuery.Brazzers-Carousel вам потребуется следовать нескольким шагам:

1. Подключите необходимые библиотеки jQuery и jQuery.Brazzers-Carousel к вашему проекту. Убедитесь, что они подключены перед использованием плагина.

```html

```

2. Инициализируйте плагин на вашем элементе. Укажите параметры, если это необходимо.

```html

$('#myCarousel').brazzersCarousel({
  autoplay: true,
  autoplayInterval: 3000,
  reverse: false
});

$('#myCarousel').brazzersCarousel({ autoplay: true, autoplayInterval: 3000, reverse: false });

```

3. Убедитесь, что у вас есть корректная структура HTML для карусели. Например:

```html

Slide 1
Slide 2
Slide 3

```

4. Проверьте CSS стили для карусели. Убедитесь, что элементы карусели правильно отображаются на странице.

Следуя этим шагам, вы должны успешно настроить jQuery.Brazzers-Carousel на вашем сайте. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь задавать их для получения более подробной помощи.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно