Вижу часто проскакивает вопрос в чате о том как кастомизировать точки навигации в слайдере. И да, там дают правильную помощь. Но как правило в ленте это теряется. По этому, выкладываю один из стилей кастомизации в канале. А поиск можно осуществлять по хештегу #код

Вставляем в head
Настраиваем под себя цвета и размеры. Результат увидим после публикации сайта или в элементе embet

<style>
.w-slider-dot {
width: 20px !important;
height: 20px !important;
background: transparent;
border: 1px solid #d4d4d4;
transition: 300ms !important;
}
.w-slider-dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 100%;
background: #d4d4d4;
}

.w-slider-dot.w-active {
background: transparent;
border: 1px solid #59a72f;
}

.w-slider-dot.w-active::before {
background: #59a72f;
}
</style>

Короче нарыл тут один зацикленный слайдер. С готовым кодом, простой. Даю код. Если хотите урок, увижу по пальцам вверх. Если вдруг кто то не разберется.

в итоге получится так

https://test3test3.webflow.io/slider-swiper

Теперь коды:
Это в head

<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

Это в before body
<!-- swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var nextprevbuttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(pagination, nextprevbuttons);
/ loop throw all swipers on the page /
$('.swiper-container').each(function( index ) {
$( this ).append(swiperNodes);
});
</script>
<!-- swiper JS Initialize -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
slidesPerView: 1,
spaceBetween: 30,
freeMode: false,
loop: true,
centeredSlides: false,
// Enable lazy loading
lazy: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
keyboard: {
enabled: true,
},
breakpoints: {
0: { / when window >=0px - webflow mobile landscape/portriat /
slidesPerView: 1,
spaceBetween: 10,
},
767: { / when window >= 767px - webflow tablet /
slidesPerView: 2,
spaceBetween: 15,
},
988: { / when window >= 988px - webflow desktop /
slidesPerView: 3,
spaceBetween: 20,
}
},
/ uncomment if you want autoplay slider
autoplay: {
delay: 3000,
},
/
/ uncomment if you want scrollbar
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
/
})
</script>

Так же в коде есть закомментированные функции можно открыть и применить те кто разбирается в js поймет.

Держи инструкцию к предыдущему посту

https://youtu.be/pH4T9YBLfs8

Сегодня я тебя порадую еще одним уроком! Он прикольный Я уверен тебе понравится !!! Вот такую штуку с тобой сделаем )

https://test3test3.webflow.io/

Ну что дождались!! А вот и урок подъехал а так же скрипт! Приятного просмотра

https://youtu.be/RRscXXHQYvE

#слайдер

<script>
// On page ready
var Webflow = Webflow || [];
Webflow.push(function() {

// For any tab-prev and tab-next clicks
$('.tab-wrapper').on('click', '.tab-prev, .tab-next', function() {

// Get direction
var direction = $(this).hasClass('tab-prev') ? -1 : 1;

// Get the tab links
var tablinks = $(this).parent().find('.w-tab-menu');

// Get index of current tab link, add direction
var index = tablinks.find('.w--current').index() + direction;

// If array out of bounds, click on the first
index = index >= tablinks.children().length ? 0 : index;

// Update tabs by triggering a "tap" event on the corresponding slide button
tablinks.find('.w-tab-link').eq(index).trigger('click');

}); // End click handler

}); // End ready function
</script>

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api

// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();

// define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();

if($next.length) {
$next.click(); // click resets timeout, so no need for interval
} else {
$('.tab-link:first').click();
}
}, 7000); // 7 second tab loop
}

// reset timeout if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>

УРА !!!! Наконец-то они это сделали. Массовое выделение файлов во вкладке assets - и разом удалить

Еще бы папочки для группировки добавили!!

Поступила просьба записать видео о том как создать такую галерею с не стандатрной сеткой. Лови !!

https://youtu.be/auFcsbSm9I8

Привет я продолжаю тему слайдера и выкладываю для тебя доработанный урок, так как более предметно разобрался, и делаем всеми желаемую карусель. Приятного просмотра. Не забудь оценить и оставить комментарий!!!

https://youtu.be/bz3Q1eGtEL0

#слайдер

в HEAD

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<style>
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: auto;
height: auto;
}

}
</style>

перед BODY

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
loop: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 30,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

___________________________________

Блин ( Как мне не хватает на канале функции сюжета что бы делать короткие видео. Но как я уже выяснил нужно 10к подписчиков.

Как удалять все картинки сразу?
https://www.loom.com/share/00c9953d9cb84b5a9cc7ad68440f8bd3

Поставь лайк если завел аккаунт и хочешь попасть на стрим

Макет из стрима

Привет ! Сегодня в 18:00 по МСК мы будем продолжать наш интенсив и до верстаем наш макет. Стрим будет в проходить в нашей уютной комнате в Discord

По этому если ты еще не установил, но хочешь попасть на стрим то создай аккаунт и приходи к нам. В спокойной ламповой обстановке, за чашечкой чая или кофе по сидим, по болтаем, по отвечаю на вопросы.

Переходи по ссылке. https://discord.com/invite/XchkYY6

Привет! Если ты не был на стриме то я для тебя сделал запись день первый и второй

День 1 - https://youtu.be/7BNs0FpT5tM
День 2 - https://youtu.be/ID9tlajWaUQ

Кстате - держи запись вчерашнего стрима.

https://youtu.be/lmpi2zw2U_M

Запись финального дня стрима в discord

https://youtu.be/xP7UxYBJd7w