| Меню сайта |
|
 |
| Категории раздела |
|
|
| Популярное |
|
|
|
| Мини-чат |
|
|
|
| Наш опрос |
Оцените мой сайт
Всего ответов: 7
|
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
Универсальный слайдер в адаптивном стиле
| 22.12.2023, 17:19 |
Универсальный слайдер в адаптивном стиле
Отличное решение для универсального слайдер с точками или с горизонтальными линиями, что выполнены при помощи 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
Скаать Универсальный слайдер в адаптивном стиле
| После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
|
Категория: Скачать Скрипты для Ucoz | Добавил: Marco |
| Просмотров: 45 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Вход на сайт |
|
|
| Поиск |
|
|
| Популярное |
|
|
| Популярное |
|
|
|
|
