Адаптивный слайдер товаров для электронной коммерции используя HTML CSS и JavaScript

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

Подпишись и скачивай
любые файлы, скрипты, проекты и многое другое

MonsterTem.ru » Слайдеры и Карусели » Адаптивный слайдер товаров для электронной коммерции используя HTML CSS и JavaScript

Адаптивный слайдер товаров для электронной коммерции используя HTML CSS и JavaScript

20.10.2024

18 просмтотров

Простой способ создать слайдер продукта электронной коммерции с использованием HTML, CSS и jаvascript. В этом видео создам слайдер товара для электронной коммерции с использованием HTML и jаvascript. Это очень красивый слайдер товара, который вы используете на сайте покупок для представления товаров. Вы создадите этот потрясающий слайдер продукта, выполнив эти шаги, которые я привел ниже.

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

В архиве находится:

Все демонстрационные изображения
Исходные файлы HTML
Исходные файлы CSS
Исходные файлы jаvascript
Иконки шрифтов
Файлы библиотеки и плагинов

Это очень просто. В этом видео покажу вам дизайн слайдера продукта, который создаю в этом уроке. Затем создам файлы HTML, CSS И jаvascript и помещу в папку проекта.

После создания связал CSS и Js-файл с HTML. Сначала создаю окно Sider с использованием HTML и оформляю с помощью CSS. После создания этого окна использовал Light Slider для создания слайдера. Я использую некоторый внешний файл, которые можно скачать в архиве.

HTML КОД:

<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA_Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>Ecommerce Slider</title>
<!--page-icon------------>
<link rel="shortcut icon" href="images/logo.png">
<!--stylesheet------------->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--light-slider.css------------->
<link rel="stylesheet" type="text/css" href="css/lightslider.css">
<!--Jquery-------------------->
<script type"text/jаvascript" src="js/Jquery.js"></script>
<!--lightslider.js--------------->
<script type"text/jаvascript" src="js/lightslider.js"></script>
</head>
<body>
<section class="slider">
<ul id="autoWidth" class="cs-hidden">
<!--1------------------------------------>
<li class="item-a">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="1" src="images/1.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$23</a>

</div>

</div>
</li>
<!--2------------------------------------>
<li class="item-b">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="2" src="images/2.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$20</a>

</div>

</div>
</li>
<!--3------------------------------------>
<li class="item-c">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="3" src="images/3.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$26</a>

</div>

</div>
</li>
<!--4------------------------------------>
<li class="item-d">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="4" src="images/4.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$27</a>

</div>

</div>
</li>
<!--5------------------------------------>
<li class="item-e">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="5" src="images/5.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$26</a>

</div>

</div>
</li>
<!--6------------------------------------>
<li class="item-f">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="6" src="images/6.jpg">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$30</a>

</div>

</div>
</li>
<!--7------------------------------------>
<li class="item-g">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="7" src="images/7.jfif">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$33</a>

</div>

</div>
</li>
<!--8------------------------------------>
<li class="item-h">
<!--box-slider--------------->
<div class="box">
<!--img-box---------->
<div class="slide-img">
<img alt="8" src="images/8.jfif">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="#" class="buy-btn">Buy Now</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="#">Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<!--price-------->
<a href="#" class="price">$43</a>

</div>

</div>
</li>

</ul>
</section>



<!--script-link----------->
<script type="text/jаvascript" src="js/script.js"></script>
</body>
</html>

CSS КОД:

<style>
body{
margin:0px;
padding: 0px;
background-color:#eef8ff;
}
a{
text-decoration:none;
}
.box{
width:300px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img{
height: 450px;
position:relative;
}
.slide-img img{
width:100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
.detail-box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font family: calibri;
}
.type{
display: flex;
flex-direction: column;
}
.type a{
color:#222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span{
color:rgba(26,26,26,0.5);
}
.price{
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width:100%;
height: 100%;
background-color: rgba(92,95,236,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.buy-btn{
width:160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color:#252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
.buy-btn:hover{
color:#FFFFFF;
background-color: #f15fa3;
transition: all ease 0.3s;
}
.overlay{
visibility: hidden;
}
.slide-img:hover .overlay{
visibility: visible;
animation:fade 0.5s;
}

@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.slider{
width:100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>

jаvascript КОД:

<script>
$(document).ready(function() {
$('#autoWidth').lightSlider({
autoWidth:true,
loop:true,
onSliderLoad: function() {
$('#autoWidth').removeClass('cS-hidden');
}
});
});
</script>

Скачать

Категории: Слайдеры и Карусели

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem