Midnight cowboy
Как быстро написать слайдер на JS?
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
План
1. Пишем структуру
2. Пишем стили
3. Пишем код
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
<div class="slider">
<button id="left">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
<img id="slider_image" src="">
<button id="right">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
</div>
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
body{
outline: none;
user-select: none;
font-size: 16px;
}
h1,p{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
a{
text-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
}
a:hover{
background-color: rgb(70,70,70);
}
.slider{
background-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.slider #slider_image{
background-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
}
.slider button{
width: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
}
.slider button img{
width: 50px;
height: 50px;
}
.slider #left img{
transform: rotate(180deg);
}
.slider button:hover{
opacity: 80%;
cursor: pointer;
}
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
let slider_cfg = {
1: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_96...",
2: "https://cdn.pixabay.com/photo/2015/03/27/13/16/maine-coon-69...",
3: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
4: "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__...",
5: "https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189__...",
6: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
}
// varibles
let slider_image = document.getElementById('slider_image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let sin = 1; //slider_image_number - sin
let size = Object.keys(slider_cfg).length;
let path = slider_cfg[sin];
// update slide
function update(){
path = slider_cfg[sin];
slider_image.setAttribute("src", path);
}
// toggle slides
left.onclick = function(){
if (sin > 1){
sin = sin - 1;
} else{
sin = 1;
}
update();
}
right.onclick = function(){
if (sin < size){
sin = sin + 1;
} else{
sin = size;
}
update();
}
// start
update();
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
Итог
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Ссылка на код: https://codepen.io/Anton-Malezhik/pen/ZEJvbNQ
Стильный образ с сигаретой
Курение убивает, но незажженная сигарета явно дополняет образ
Canon M + 70-200 I 2.8L
Спасибо за интерес, все фотографии я размещаю в своей группе VK
А Вася выйдет?
Милан,1902 год
Дверь
Вот ещё дверь.Это Чехия,Прага,Hastalska 6.
1901-1902 годы
Царские хоромы
Ремонт в двушке 68 квадратов в Иваново
Сможете найти на картинке цифру среди букв?
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
Фото-идеал: уши обрезать, бицепсы накачать
Заметил, что перерисовывать себе лица на фото начали не только гламурные барышни, но и мужчины. Взрослые, солидные люди. Казалось бы, не в фейсе счастье, на фото оно, тем более, не настоящее. Но!
Вот у меня есть знакомый фотограф-профессионал. Ну как профессионал. Не гений. Делает за хорошие деньги фотосессии, всякие свадебные заморочки, лав-стори, то есть, фотокомиксы с обнимающимися парочками. Хороший дядька, знает ремесло.Вот он и заметил удивительную тенденцию.
Еще пару лет назад только дамы просили заузить талию, замаскировать складочки, укоротить уши: "У меня не таки уши, я тут просто неудачно повернулась!", или там... шею удлинить. А теперь?Но в последнее и серьезные взрослые мужчины просят: ты там мне подбородок перерисуй, складку убери. Ну и вообще, сделай, чтобы был моложе. Да, и нос мне выпрями. И плечи пошире пусть будут, это я тут повернулся неудачно.
Мир катится в глобальный курятник.
В Британии некий фотограф по фамилии Ренкин провел эксперимент над подростками. Он предложил девушкам отредактировать свои фото так, чтобы им самим понравилось. Сделать идеал.
Разумеется, девочки наляпали артисток да эльфов. Глаза раскосые, губы-пельмешки. Ну девчонки на то и девчонки. Еще не научились очаровывать тем, что природа им дала. Но взрослые-то куда!Не знает Ренкин, что тенденция развивается.Скажите, вы свои фото как-нибудь улучшаете? Фильтры-шмильтры, фотошоп. Мешки убрать. Румянец девичий нанести.
Насколько для вас допустимо "перерисовать себя" до идеала? Или что природа дала, тем и пользуетесь?