1678560960
Как сделать автоматический слайдер изображений в Html, CSS, Javascript
В этой статье вы узнаете, как создать автоматический слайдер изображений с помощью HTML CSS и кода JavaScript. Ранее я поделился с вами еще многими типами ручных и автоматических слайдеров изображений . Как и другие проекты, я надеюсь, вам понравится этот дизайн.
Слайдер изображений — это распространенный веб-элемент, который в настоящее время используется на многих веб-сайтах. Он в основном используется для слайд-шоу на главной странице сайта. Этот тип автоматического слайд-шоу изображений также используется для организации большого количества изображений в галерее. Если вы хотите узнать больше о javascript, ознакомьтесь с моими лучшими проектами HTML, CSS и javascript .
Существует два типа ползунков изображений: автоматический и ручной. В случае автоматического ползунка изображения изображение будет автоматически меняться через равные промежутки времени. В случае с мануалом менять изображение нужно с помощью кнопок Next и Previous.
Автоматический слайдер изображений
При этом изображение можно менять автоматически и вручную. Это означает, что он автоматически изменит изображение, и вы также можете изменить изображение, используя кнопки «Далее» и «Предварительный просмотр» по отдельности.
Дизайн можно создать только с помощью HTML и CSS, но в данном случае я использовал программный код JavaScript.
Если вы хотите узнать, как работают эти автоматические слайд-шоу изображений , вы можете посмотреть живую демонстрацию ниже. Ниже я дал исходный код, так что вы можете скопировать их, если хотите. Вы также можете скачать код с помощью кнопки загрузки внизу статьи.
Как вы можете видеть в демо выше, это очень простой слайдер изображений с автоматической и ручной сменой изображений.
В этом случае я использовал в общей сложности пять изображений, но вы можете использовать гораздо больше, если хотите. Изображение будет меняться автоматически каждые 5 секунд. Также есть две кнопки для смены изображения.
Автоматический слайдер изображений в HTML, CSS и Javascript
Если вы знаете основы HTML, CSS и JavaScript, вы легко разберетесь в этом дизайне. Чтобы создать этот автоматический слайдер изображений, сначала вам нужно создать файл HTML и CSS.
В данном случае я не создавал отдельный файл JavaScript, но вы можете создать отдельный файл, если хотите.
Шаг 1: Создайте базовую структуру слайдера
Я использовал небольшой код HTML и CSS ниже, чтобы создать фон для этого слайдера. В этом случае я использовал ползунок высотой 256 пикселей и шириной 500 пикселей.
Я не использовал разные цвета фона. Если вы видели демонстрацию, вы поймете, что вокруг этого слайда была использована тень, для которой я использовал box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) здесь.
<div id=”slider”>
</div>
body {
margin: 10%;
}
#slider {
position: relative;
width: 500px;
height: 265px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
Шаг 2: Добавьте необходимые изображения
Я добавил изображения в этот автоматический слайдер изображений, используя приведенный ниже код, и разработал эти изображения. Я использовал в общей сложности пять изображений, которые вы можете увеличивать или уменьшать по своему усмотрению.
Если вы внимательно посмотрите на приведенный ниже код CSS, вы поймете, что я использовал Slider Ul Width 10000%.
Вы можете задаться вопросом, почему я использовал здесь 10 000%. Внимательно посмотрите на изображение ниже, чтобы понять, почему и как работает этот ползунок.
<ul id=”slideWrap”>
<li><img src=”img1.jpg” alt=””></li>
<li><img src=”img2.jpg” alt=””></li>
<li><img src=”img3.jpg” alt=””></li>
<li><img src=”img4.jpg” alt=””></li>
<li><img src=”img5.jpg” alt=””></li>
</ul>В этом случае высота изображения составляет 256 пикселей, а ширина — 500 пикселей. Конечно, в этом случае вы будете использовать одинаковый размер каждого изображения.
#slider ul {
position: relative;
list-style: none;
height: 100%;
width: 10000%;
padding: 0;
margin: 0;
transition: all 750ms ease;
left: 0;
}
#slider ul li {
position: relative;
height: 100%;
float: left;
}
#slider ul li img{
width: 500px;
height: 265px;
}
Шаг 3. Добавьте кнопки «Предыдущая» и «Далее»
Теперь мы добавим к этому слайдеру кнопки Previs и Next. Приведенный ниже код HTML и CSS помог добавить и спроектировать эти две кнопки.
<a id=”prev” href=”#”>≪</a>
<a id=”next” href=”#”>≫</a>
#slider #prev, #slider #next {
width: 50px;
line-height: 50px;
border-radius: 50%;
font-size: 2rem;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
text-align: center;
color: white;
text-decoration: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 150ms ease;
}Шаг 4: Определите точное расположение двух кнопок
Я использовал небольшой CSS ниже, чтобы разместить эти две кнопки на своих местах. Я оставил кнопку «Предварительный просмотр» на расстоянии 10 пикселей от левого края.
Я оставил следующую кнопку на расстоянии 10 пикселей от правого края. В результате эти две кнопки расположены по обе стороны от ползунка.
#slider #prev {
left: 10px;
}
#slider #next {
right: 10px;
}Я использовал следующий код CSS, чтобы использовать небольшой эффект наведения на фоне этих двух кнопок.
#slider #prev:hover, #slider #next:hover {
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 0;
}
Шаг 5. Активируйте ползунок изображения, добавив код JavaScript.
Пока мы его только оформили, теперь реализуем смену изображения этого слайдера.
var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
sliderWidth = slider.offsetWidth;
});Прежде всего, мы заранее определимся, какая работа будет выполнена, нажав на кнопку «Далее». Если вы новичок, то прежде всего посмотрите на структуру кода ниже. Затем следуйте приведенным ниже объяснениям, которые помогут вам лучше понять.
var nextSlide = function() {
if(count < items) {
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
else if(count = items) {
slideList.style.left = “0px”;
count = 1;
}
};
Как мы видели, в переменной nextSlide мы сохранили, как будет работать кнопка «Далее».
Во-первых, мы добавили значение if (count <items), этот код будет работать, когда количество изображений больше, чем count.
С помощью else if (count = items) мы определили, что произойдет, если предыдущая функция не сработает. Если и изображение, и количество одинаковы, то слайдер не изменится.
'count' - это количество раз, когда вы нажали на кнопку. Если вы нажмете на эту кнопку один раз, значение счетчика будет равно единице. Если вы нажмете три раза одновременно, значение учетной записи равно 3.
Мы решили, какие изменения произойдут, если мы нажмем кнопку «Далее». Теперь мы реализуем предыдущую кнопку.
Точно так же здесь мы определили, какой эффект будет работать, если вы нажмете на предыдущую кнопку.
var prevSlide = function() {
if(count > 1) {
count = count – 2;
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
else if(count = 1) {
count = items – 1;
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
};
Определение того, какой эффект будет работать при нажатии кнопок «Назад» и «Далее» в этом автоматическом слайдере изображений. Теперь мы свяжем эти эффекты с двумя кнопками.
Как я уже говорил ранее, мы сохранили то, как кнопка «Далее» будет работать, в константе под названием «следующий слайдер». Теперь ниже мы указали, что если вы нажмете кнопку «Далее», эта константа будет работать.
next.addEventListener(“click”, function() {
nextSlide();
});Мы сохранили то, что работает на предыдущей кнопке, в «prevSlide». Теперь ниже мы указали, что если вы нажмете на предыдущую кнопку, эта константа будет работать.
prev.addEventListener(“click”, function() {
prevSlide();
});Поскольку это автоматический слайдер изображений , в данном случае я устроил автоматическое изменение изображения. Здесь я использовал 5000 т.е. 5 секунд. Это означает, что изображение будет меняться каждые 5 секунд. Если вы хотите, чтобы изображения менялись каждые 2 секунды, используйте здесь 2000 вместо 5000.
setInterval(function() {
nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
Надеюсь, вы узнали из этого урока, как я создал этот красивый автоматический слайдер изображений , используя код HTML CSS и JavaScript. Если вы хотите загрузить необходимый исходный код, вы можете использовать кнопку загрузки ниже.
Если у вас есть какие-либо проблемы с пониманием того, как сделать этот автоматический слайдер изображений, вы обязательно можете сообщить мне об этом в комментариях.
Original article source at: https://foolishdeveloper.com/
#javascript #image #slider #html #css
What is GEEK
Buddha Community
1628189100
How to Image Uploader with Preview || Html CSS JavaScript
Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding
1677108125
Creating a Responsive Blog with HTML, CSS, and JavaScript
Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video
tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step.
From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript,
we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger,
web developer, or simply looking to learn new skills, this tutorial is for you!
We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience.
🔔 Subscribe for more!
https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔗 Source code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☝ Start developing the project (base files + images)
- Click on the UpFiles link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location
📂Assets
Icons: https://boxicon.com/
Fonts: https://fonts.google.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔥 Follow me!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tags:
#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial.
So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!
Link of The Video :
https://youtu.be/BqgWIel4uuU
1671267560
Personal Portfolio Website Using Html Css and Javascript
In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function
∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website
Features : -
- Fully Responsive
- Dark mode/light mode
- Browser compatibility
- Social Media Icon
- and many more
1678560960
Как сделать автоматический слайдер изображений в Html, CSS, Javascript
В этой статье вы узнаете, как создать автоматический слайдер изображений с помощью HTML CSS и кода JavaScript. Ранее я поделился с вами еще многими типами ручных и автоматических слайдеров изображений . Как и другие проекты, я надеюсь, вам понравится этот дизайн.
Слайдер изображений — это распространенный веб-элемент, который в настоящее время используется на многих веб-сайтах. Он в основном используется для слайд-шоу на главной странице сайта. Этот тип автоматического слайд-шоу изображений также используется для организации большого количества изображений в галерее. Если вы хотите узнать больше о javascript, ознакомьтесь с моими лучшими проектами HTML, CSS и javascript .
Существует два типа ползунков изображений: автоматический и ручной. В случае автоматического ползунка изображения изображение будет автоматически меняться через равные промежутки времени. В случае с мануалом менять изображение нужно с помощью кнопок Next и Previous.
Автоматический слайдер изображений
При этом изображение можно менять автоматически и вручную. Это означает, что он автоматически изменит изображение, и вы также можете изменить изображение, используя кнопки «Далее» и «Предварительный просмотр» по отдельности.
Дизайн можно создать только с помощью HTML и CSS, но в данном случае я использовал программный код JavaScript.
Если вы хотите узнать, как работают эти автоматические слайд-шоу изображений , вы можете посмотреть живую демонстрацию ниже. Ниже я дал исходный код, так что вы можете скопировать их, если хотите. Вы также можете скачать код с помощью кнопки загрузки внизу статьи.
Как вы можете видеть в демо выше, это очень простой слайдер изображений с автоматической и ручной сменой изображений.
В этом случае я использовал в общей сложности пять изображений, но вы можете использовать гораздо больше, если хотите. Изображение будет меняться автоматически каждые 5 секунд. Также есть две кнопки для смены изображения.
Автоматический слайдер изображений в HTML, CSS и Javascript
Если вы знаете основы HTML, CSS и JavaScript, вы легко разберетесь в этом дизайне. Чтобы создать этот автоматический слайдер изображений, сначала вам нужно создать файл HTML и CSS.
В данном случае я не создавал отдельный файл JavaScript, но вы можете создать отдельный файл, если хотите.
Шаг 1: Создайте базовую структуру слайдера
Я использовал небольшой код HTML и CSS ниже, чтобы создать фон для этого слайдера. В этом случае я использовал ползунок высотой 256 пикселей и шириной 500 пикселей.
Я не использовал разные цвета фона. Если вы видели демонстрацию, вы поймете, что вокруг этого слайда была использована тень, для которой я использовал box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) здесь.
<div id=”slider”>
</div>
body {
margin: 10%;
}
#slider {
position: relative;
width: 500px;
height: 265px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}Шаг 2: Добавьте необходимые изображения
Я добавил изображения в этот автоматический слайдер изображений, используя приведенный ниже код, и разработал эти изображения. Я использовал в общей сложности пять изображений, которые вы можете увеличивать или уменьшать по своему усмотрению.
Если вы внимательно посмотрите на приведенный ниже код CSS, вы поймете, что я использовал Slider Ul Width 10000%.
Вы можете задаться вопросом, почему я использовал здесь 10 000%. Внимательно посмотрите на изображение ниже, чтобы понять, почему и как работает этот ползунок.
<ul id=”slideWrap”>
<li><img src=”img1.jpg” alt=””></li>
<li><img src=”img2.jpg” alt=””></li>
<li><img src=”img3.jpg” alt=””></li>
<li><img src=”img4.jpg” alt=””></li>
<li><img src=”img5.jpg” alt=””></li>
</ul>В этом случае высота изображения составляет 256 пикселей, а ширина — 500 пикселей. Конечно, в этом случае вы будете использовать одинаковый размер каждого изображения.
#slider ul {
position: relative;
list-style: none;
height: 100%;
width: 10000%;
padding: 0;
margin: 0;
transition: all 750ms ease;
left: 0;
}
#slider ul li {
position: relative;
height: 100%;
float: left;
}
#slider ul li img{
width: 500px;
height: 265px;
}Шаг 3. Добавьте кнопки «Предыдущая» и «Далее»
Теперь мы добавим к этому слайдеру кнопки Previs и Next. Приведенный ниже код HTML и CSS помог добавить и спроектировать эти две кнопки.
<a id=”prev” href=”#”>≪</a>
<a id=”next” href=”#”>≫</a>
#slider #prev, #slider #next {
width: 50px;
line-height: 50px;
border-radius: 50%;
font-size: 2rem;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
text-align: center;
color: white;
text-decoration: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 150ms ease;
}Шаг 4: Определите точное расположение двух кнопок
Я использовал небольшой CSS ниже, чтобы разместить эти две кнопки на своих местах. Я оставил кнопку «Предварительный просмотр» на расстоянии 10 пикселей от левого края.
Я оставил следующую кнопку на расстоянии 10 пикселей от правого края. В результате эти две кнопки расположены по обе стороны от ползунка.
#slider #prev {
left: 10px;
}
#slider #next {
right: 10px;
}Я использовал следующий код CSS, чтобы использовать небольшой эффект наведения на фоне этих двух кнопок.
#slider #prev:hover, #slider #next:hover {
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 0;
}Шаг 5. Активируйте ползунок изображения, добавив код JavaScript.
Пока мы его только оформили, теперь реализуем смену изображения этого слайдера.
var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
sliderWidth = slider.offsetWidth;
});Прежде всего, мы заранее определимся, какая работа будет выполнена, нажав на кнопку «Далее». Если вы новичок, то прежде всего посмотрите на структуру кода ниже. Затем следуйте приведенным ниже объяснениям, которые помогут вам лучше понять.
var nextSlide = function() {
if(count < items) {
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
else if(count = items) {
slideList.style.left = “0px”;
count = 1;
}
};Как мы видели, в переменной nextSlide мы сохранили, как будет работать кнопка «Далее».
Во-первых, мы добавили значение if (count <items), этот код будет работать, когда количество изображений больше, чем count.
С помощью else if (count = items) мы определили, что произойдет, если предыдущая функция не сработает. Если и изображение, и количество одинаковы, то слайдер не изменится.
'count' - это количество раз, когда вы нажали на кнопку. Если вы нажмете на эту кнопку один раз, значение счетчика будет равно единице. Если вы нажмете три раза одновременно, значение учетной записи равно 3.
Мы решили, какие изменения произойдут, если мы нажмем кнопку «Далее». Теперь мы реализуем предыдущую кнопку.
Точно так же здесь мы определили, какой эффект будет работать, если вы нажмете на предыдущую кнопку.
var prevSlide = function() {
if(count > 1) {
count = count – 2;
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
else if(count = 1) {
count = items – 1;
slideList.style.left = “-” + count * sliderWidth + “px”;
count++;
}
};Определение того, какой эффект будет работать при нажатии кнопок «Назад» и «Далее» в этом автоматическом слайдере изображений. Теперь мы свяжем эти эффекты с двумя кнопками.
Как я уже говорил ранее, мы сохранили то, как кнопка «Далее» будет работать, в константе под названием «следующий слайдер». Теперь ниже мы указали, что если вы нажмете кнопку «Далее», эта константа будет работать.
next.addEventListener(“click”, function() {
nextSlide();
});Мы сохранили то, что работает на предыдущей кнопке, в «prevSlide». Теперь ниже мы указали, что если вы нажмете на предыдущую кнопку, эта константа будет работать.
prev.addEventListener(“click”, function() {
prevSlide();
});Поскольку это автоматический слайдер изображений , в данном случае я устроил автоматическое изменение изображения. Здесь я использовал 5000 т.е. 5 секунд. Это означает, что изображение будет меняться каждые 5 секунд. Если вы хотите, чтобы изображения менялись каждые 2 секунды, используйте здесь 2000 вместо 5000.
setInterval(function() {
nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}Надеюсь, вы узнали из этого урока, как я создал этот красивый автоматический слайдер изображений , используя код HTML CSS и JavaScript. Если вы хотите загрузить необходимый исходный код, вы можете использовать кнопку загрузки ниже.
Если у вас есть какие-либо проблемы с пониманием того, как сделать этот автоматический слайдер изображений, вы обязательно можете сообщить мне об этом в комментариях.
Original article source at: https://foolishdeveloper.com/
1630506330
Product landing page using HTML CSS & JavaScript | web design
Knowledge
This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform those powerful animations we use the GSAP a JavaScript animation library for work done.
In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.
Don't forget to join the channel for more videos like this. Code Savvy
📁 Assets
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/
Outline ⏱
0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations
Click to Watch Full tutorial on YOUTUBE