Карточки Товара

Адаптивный слайдер товаров для электронной коммерции

9/18/2023 12:58:00 PM Просмотров: Загрузка...

Узнайте, как создать слайдер продукта с помощью HTML, CSS и JavaScript. Простой способ создать слайдер продукта электронной коммерции с использованием HTML, CSS и Javascript.

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

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

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

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

Адаптивный слайдер товаров для электронной коммерции / How To Create Product Slider Using HTML And JavaScript

СКАЧАТЬ


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/javascript" src="js/Jquery.js"></script>
<!--lightslider.js--------------->
<script type"text/javascript" 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/javascript" src="js/script.js"></script>
</body>
</html>
CSS КОД:

@charset "utf-8";
/* CSS Document */
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;
}
JAVASCRIPT КОД:

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


Tags:
Как создать красивый слайдер для галереи изображений с помощью HTML CSS и JavaScript
Кликандер (clickunder). Рабочий скрипт кликандера
Адаптивный слайдер карточек с использованием HTML, CSS и JavaScript | Swiper Js
Создать простой веб-сайт с использованием HTML и CSS | Бесплатный исходный код
Как создать красивый и адаптивный слайдер изображений с помощью HTML CSS и JavaScript
Как создать адаптивный сайт с фоновым видеослайдом используя HTML CSS и JavaScript
Как создать анимированные вкладки используя HTML CSS и JavaScript
Адаптивный слайдер карточек с дополнительными функциями в HTML CSS и JavaScript
Адаптивные карточки с анимацией наложения
Как создать боковую панель в HTML CSS JavaScript

0 Комментарии

Отправить комментарий