Универсальный слайдер в адаптивном стиле
Отличное решение для универсального слайдер с точками или с горизонтальными линиями, что выполнены при помощи CSS и jQuery на тематические сайты. Это не новый стиль, есть уже много слайдов с аналогичными переключателями, где все выполнено в стандартном варианте слайда с переключением его элементов, что впоследствии после установки с нажатием на точки или линий будет происходить смена изображения. Так как здесь автоматический слайд не предусмотрен, что вероятно для каких то тем будет оригинальным решение, где сами пользователи переключают, и у них есть время на изучение данных слайдов, а точнее, что на них располагается. Большая вероятность есть, что данный слайдер выставлять на всю ширину, где пропишут в самом начале стилистике 100%, и даже в таком виде он смотрится шикарно. Сами точки с линиями также зависят от количества в нем картинок, если их будет немного, то безусловно горизонтальная линия переключателя увеличиться, но это если смотреть с большого монитора. А просмотр с мобильных гаджет, вам сразу покажет, что все корректно вписано. Но даже здесь все от веб мастера зависит, ведь все изначально занесено в CSS, где сами переключатели можно в своем дизайн поменять, и сделать не просто стандартном, а более уникальными, здесь только ваше решение может все поменять. Как пример по умолчанию в по заданным данным: Установка: В HEAD Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> HTML Код <div class="slider"> <div class="picture_movem"> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №1);"></div> <!-- Еще слайды --> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №2);"></div> <!-- Еще слайды --> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №3);"></div> <!-- Еще слайды --> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №4);"></div> <!-- Еще слайды --> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №5);"></div> <!-- Еще слайды --> <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №6);"></div> </div> <div class="podvika_dukas"></div> </div> CSS Код .slider { position: relative; height: 415px; margin: 36px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); overflow: hidden; max-width: 776px; } .picture_movem { position: relative; height: 100%; transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); will-change: transform; } .podvika_snimka { float: left; height: 100%; background-position: 50% 50%; background-size: cover; } .podvika_dukas { display: flex; position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); } .podvika_kilasd, .undikatos_dvulena { display: block; margin: 0 5px; height: 14px; background: rgba(221 221 221 / 47%); border-radius: 50px; cursor: pointer; } .undikatos_dvulena { position: absolute; background: white; width: auto; box-shadow: 0 4px 12px rgba(12 12 12 / 20%), 0 16px 20px rgba(12 12 12 / 20%); } .undikatos_dvulena-left { transition: left 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17); } .undikatos_dvulena-right { transition: left 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17); } jQuery Код $(function() { $('.slider').each(function() { let $th = $(this); $th.attr('data-pos', 1); let slide = $th.find('.podvika_snimka'); let num = $th.find('.podvika_snimka').length; let dots = $th.find('.podvika_dukas'); dots.prepend('<span class="undikatos_dvulena"></span>'); for( let i = 1; i <= num; i++ ){ dots.append('<span style="width:' + 100 / num + '%" class="podvika_kilasd" data-pos="'+ i +'"></span>'); } $th.find('.picture_movem').css('width', 100 * num + '%'); slide.css('width', 100 / num + '%'); $th.find('.podvika_kilasd').on('click', function(){ let currentPos = $th.attr('data-pos'); let newPos = $(this).attr('data-pos'); let newDirection = (newPos > currentPos ? 'right' : 'left'); let currentDirection = (newPos < currentPos ? 'right' : 'left'); $th.find('.undikatos_dvulena').removeClass('undikatos_dvulena-' + currentDirection); $th.find('.undikatos_dvulena').addClass('undikatos_dvulena-' + newDirection); $th.attr('data-pos', newPos); $th.find('.picture_movem').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)'); $th.find('.undikatos_dvulena').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'}); }); $th.find('.undikatos_dvulena').css({'left': 0,'right': 100 - (100 / num) + '%'}); }); }); Чтоб вы могли изначально понять все характеристики материала, то рекомендую посетить demo страницу, где не стал его на всю ширину выстраивать, а выставил значение, которые более подходят на сайты. Хотя для каркаса, где он будет установлен, данные значение уже не будут играть по ширине экрана. Демонстрация Источник: atuin.ru |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |