Не могу настроить jQuery.Brazzers-Carousel?
Здравствуйте такая проблемма ! Не получается настроить карусель 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
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для настройки jQuery.Brazzers-Carousel вам потребуется следовать нескольким шагам:
1. Подключите необходимые библиотеки jQuery и jQuery.Brazzers-Carousel к вашему проекту. Убедитесь, что они подключены перед использованием плагина.
```html
```
2. Инициализируйте плагин на вашем элементе. Укажите параметры, если это необходимо.
```html
$('#myCarousel').brazzersCarousel({ autoplay: true, autoplayInterval: 3000, reverse: false });
```
3. Убедитесь, что у вас есть корректная структура HTML для карусели. Например:
```html
```
4. Проверьте CSS стили для карусели. Убедитесь, что элементы карусели правильно отображаются на странице.
Следуя этим шагам, вы должны успешно настроить jQuery.Brazzers-Carousel на вашем сайте. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь задавать их для получения более подробной помощи.