Узнайте, как создать слайдер продукта и загрузить на веб-сайт Blogger. Простой способ создания слайдера продукта с использованием HTML, CSS и jаvascript. Я также предоставляю вам HTML и CSS-код, который поможет вам понять это руководство
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения
- Исходные файлы HTML
- Исходные файлы CSS
- Исходные файлы jаvascript
- Иконки шрифтов
- Файлы библиотеки и плагинов
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn How To Create A Product Slider & Upload To The Blogger</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Stylesheets-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--===Product-section=1(HTML)===================================================================-->
<section class="products-slider">
<!--heading-------------------------------->
<div class="slider-heading">
<h3>All Models.<span>Take your pick.</span></h3>
</div>
<!--product-container---------------------->
<div class="product-container">
<!--==slider-===============================----->
<ul class="autoWidth" class="cs-hidden">
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="https://www.apple.com/shop/buy-iphone/iphone-12-pro"><!--**link**demo-->
<!--heading----->
<strong>iPhone 12 Pro</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC9AKj0rmMbQujK8U6eggTPyiITVEsqMraiR8L6WLJhf2dwEeACoCFKsHVi8Ylgmth8MIafVCAX_vltRPVOdX8_ZaqJhDPIauRcpQLSubJmh5mzZau7MXDVKZw9MruxgVfPF5ffYCIopu/s400/iphone.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #5c5b58;"></div>
<div class="product-color" style="background-color: #e5e6e2;"></div>
<div class="product-color" style="background-color: #fcebd5;"></div>
<div class="product-color" style="background-color: #3f5d6a;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone 12</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6PFdtkuaUFoij8gi3QS-GfDMSbF4mOIGemo7qJSrY_jhaIUvWQim_M_CSOAbtUQhdLGFob1QFTdsPWaH52KHW_FgYz4D5iDjdqykOIA6UV6x9_wYuErbOqqk5kH1XxwWeEUtRL3y2uwd/s320/2.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f6f2ef;"></div>
<div class="product-color" style="background-color: #6e6d72;"></div>
<div class="product-color" style="background-color: #164a6f;"></div>
<div class="product-color" style="background-color: #daefd8;"></div>
<div class="product-color" style="background-color: #bab2e6;"></div>
<div class="product-color" style="background-color: #da3c3c;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone SE</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVzvEMc0VFSA3Qx3dshc8mgJr7LD5EyzorwmIYYVToAxIgbjbXQR61qPumYBg9UfP3ZPDha919vztLJxA-v_EkzpSgR2r-_OfYXPI2LF_HpijEJQ0ZbrC0H8xClbJzGFvRUcZTmu8e6Zh/s320/3.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f3f3f3;"></div>
<div class="product-color" style="background-color: #1d1d1e;"></div>
<div class="product-color" style="background-color: #ba0d2f;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone 11</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXq2GqnpquXuPfFIfFU5tyjfVQwVAKoxpawDarTWxqHGw77aMBh12_mL-SwTILXGE-ITlXxaS1uZqb72H-lslvUd0hb-5p2czz_d3iXZ_ObPOzq8Ay4iKp7eTzMLBRaaR3DBPfGCUbCzEg/s320/4.jpg"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f9f6ef;"></div>
<div class="product-color" style="background-color: #1f2020;"></div>
<div class="product-color" style="background-color: #aee1cd;"></div>
<div class="product-color" style="background-color: #ffe681;"></div>
<div class="product-color" style="background-color: #d1cdda;"></div>
<div class="product-color" style="background-color: #ba0c2e;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone XR</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wTrRpeMbghIIzFT1NbywvB9BcvTHLIJ912Uus6b-C3FyCl-nLXPd-88KuNr8uE6427bWknm9FMz5ovI_tfCNn0dljZdpV32Sz_P6WMqqoYo3dbsFGGPSBUfgP7pHKMQzp2H7VCdA_GK1/s320/5.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f4f4f4;"></div>
<div class="product-color" style="background-color: #1d1d1e;"></div>
<div class="product-color" style="background-color: #49aee6;"></div>
<div class="product-color" style="background-color: #fe9a8b;"></div>
<div class="product-color" style="background-color: #f9d045;"></div>
<div class="product-color" style="background-color: #990211;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==end-card===========================-->
<li class="item-a">
<div class="product-box explore-products">
<a href="#">
<!--heading----->
<strong>Explore all iPhone accessories.</strong>
<!--IMG--------->
<div class="explore-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PnSBhJ4zZ86m8ElJ5iC-IeFcvYaciskPJWL9lxhLE8_cfOVymy17pIEbqguhg7PW4P8yBGths76FTX8QwWVXFYUKfEK-UwqB8qSVpVOkFU3WU6JRo0sNdQYjcQyjLEUJcFoV44-I4VWz/s320/end.jpg"/>
</div>
</a>
</div>
</li>
</ul>
</div>
</section>
<!--***first-slider-end****-->
<!--===Product-section=2(HTML)===================================================================-->
<section class="products-slider">
<!--heading-------------------------------->
<div class="slider-heading">
<h3>All Models.<span>Take your pick.</span></h3>
</div>
<!--product-container---------------------->
<div class="product-container">
<!--==slider-===============================----->
<ul class="autoWidth" class="cs-hidden">
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone 12 Pro</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC9AKj0rmMbQujK8U6eggTPyiITVEsqMraiR8L6WLJhf2dwEeACoCFKsHVi8Ylgmth8MIafVCAX_vltRPVOdX8_ZaqJhDPIauRcpQLSubJmh5mzZau7MXDVKZw9MruxgVfPF5ffYCIopu/s400/iphone.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #5c5b58;"></div>
<div class="product-color" style="background-color: #e5e6e2;"></div>
<div class="product-color" style="background-color: #fcebd5;"></div>
<div class="product-color" style="background-color: #3f5d6a;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone 12</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6PFdtkuaUFoij8gi3QS-GfDMSbF4mOIGemo7qJSrY_jhaIUvWQim_M_CSOAbtUQhdLGFob1QFTdsPWaH52KHW_FgYz4D5iDjdqykOIA6UV6x9_wYuErbOqqk5kH1XxwWeEUtRL3y2uwd/s320/2.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f6f2ef;"></div>
<div class="product-color" style="background-color: #6e6d72;"></div>
<div class="product-color" style="background-color: #164a6f;"></div>
<div class="product-color" style="background-color: #daefd8;"></div>
<div class="product-color" style="background-color: #bab2e6;"></div>
<div class="product-color" style="background-color: #da3c3c;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone SE</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVzvEMc0VFSA3Qx3dshc8mgJr7LD5EyzorwmIYYVToAxIgbjbXQR61qPumYBg9UfP3ZPDha919vztLJxA-v_EkzpSgR2r-_OfYXPI2LF_HpijEJQ0ZbrC0H8xClbJzGFvRUcZTmu8e6Zh/s320/3.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f3f3f3;"></div>
<div class="product-color" style="background-color: #1d1d1e;"></div>
<div class="product-color" style="background-color: #ba0d2f;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone 11</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXq2GqnpquXuPfFIfFU5tyjfVQwVAKoxpawDarTWxqHGw77aMBh12_mL-SwTILXGE-ITlXxaS1uZqb72H-lslvUd0hb-5p2czz_d3iXZ_ObPOzq8Ay4iKp7eTzMLBRaaR3DBPfGCUbCzEg/s320/4.jpg"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f9f6ef;"></div>
<div class="product-color" style="background-color: #1f2020;"></div>
<div class="product-color" style="background-color: #aee1cd;"></div>
<div class="product-color" style="background-color: #ffe681;"></div>
<div class="product-color" style="background-color: #d1cdda;"></div>
<div class="product-color" style="background-color: #ba0c2e;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==card===========================-->
<li class="item-a">
<div class="product-box">
<a href="#">
<!--heading----->
<strong>iPhone XR</strong>
<!--img--------->
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wTrRpeMbghIIzFT1NbywvB9BcvTHLIJ912Uus6b-C3FyCl-nLXPd-88KuNr8uE6427bWknm9FMz5ovI_tfCNn0dljZdpV32Sz_P6WMqqoYo3dbsFGGPSBUfgP7pHKMQzp2H7VCdA_GK1/s320/5.png"/>
<!--colors------>
<div class="available-colors">
<div class="product-color" style="background-color: #f4f4f4;"></div>
<div class="product-color" style="background-color: #1d1d1e;"></div>
<div class="product-color" style="background-color: #49aee6;"></div>
<div class="product-color" style="background-color: #fe9a8b;"></div>
<div class="product-color" style="background-color: #f9d045;"></div>
<div class="product-color" style="background-color: #990211;"></div>
</div>
<!--buy & price-->
<div class="buy-price">
<!--price-->
<p>From $999or $41.62/mo. for 24 mo.before trade-in*</p>
<!--btn---->
<a href="#" class="buy-btn">Buy</a>
</div>
</a>
</div>
</li>
<!--==end-card===========================-->
<li class="item-a">
<div class="product-box explore-products">
<a href="#">
<!--heading----->
<strong>Explore all iPhone accessories.</strong>
<!--IMG--------->
<div class="explore-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PnSBhJ4zZ86m8ElJ5iC-IeFcvYaciskPJWL9lxhLE8_cfOVymy17pIEbqguhg7PW4P8yBGths76FTX8QwWVXFYUKfEK-UwqB8qSVpVOkFU3WU6JRo0sNdQYjcQyjLEUJcFoV44-I4VWz/s320/end.jpg"/>
</div>
</a>
</div>
</li>
</ul>
</div>
</section>
<!--****second-slider-end****-->
<!--===jаvascript=======================================================-->
<script type="text/jаvascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<!--Script-->
<script src="script.js"></script>
</body>
</html>CSS КОД:
<style>
body{
margin: 0px;
padding: 0px;
}
.products-slider{
background-color: #f5f5f7;
padding: 0px 20px;
box-sizing: border-box;
}
.slider-heading{
font-family:Arial, Helvetica, sans-serif;
display: flex;
flex-wrap: wrap;
max width: 1200px;
margin: 0px auto;
padding:0px 20px;
}
.slider-heading h3{
font size: 1.75rem;
color: #1d1d1f;
font-weight: 500;
letter-: 0.5px;
line height:34px;
}
.slider-heading h3 span{
color: #6e6e73;
}
.product-box{
display: flex;
flex-direction: column;
width: 400px;
text-decoration: none;
background-color: #ffffff;
border-radius: 20px;
margin: 20px;
padding: 25px;
box-sizing: border-box;
box-shadow: 2px 2px 8px rgba(0,0,0,0.03);
border: 1px solid rgba(0,0,0,0.08);
transition: all ease 0.3s;
overflow: hidden;
}
.product-box:hover{
box-shadow: 2px 2px 18px rgba(0,0,0,0.10);
transform: scale(1.008);
transition: all 0.3s ease;
}
.product-box strong{
color: #29292c;
font-size: 1.75rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
margin-top: 24px;
}
.product-box img{
width: 210px;
height:250px;
padding:20px 0px;
object-fit: contain;
object-position: center;
margin: 20px auto;
}
.available-colors{
display: flex;
justify-content: center;
align-items: center;
}
.available-colors .product-color{
width: 10px;
height: 10px;
border-radius: 50%;
display: flex;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 2px 2px 30px rgba(0,0,0,0.03);
margin: 3px;
}
.buy-price{
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px 0px 0px;
}
.buy-price p{
color: #6e6e73;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9rem;
max-width:250px;
line-height:20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.product-box a{
text-decoration: none;
display: flex;
flex-direction: column;
}
.buy-price .buy-btn{
color: #ffffff;
background-color: #0071e3;
text-decoration: none;
width: 80px;
height: 40px;
padding:0px;
margin:0px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.lSPager{
display:none;
}
.lSAction > a {
background-color:#00000033;
width:50px;
height:50px;
border-radius:50%;
opacity:0.8;
background-image:none;
display: flex;
justify-content: center;
align-items: center;
}
.lSAction > a::after{
position:absoult;
content:'';
margin:auto;
border: solid #ffffff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
}
.lSAction > .lSPrev::after {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.lSAction > .lSNext::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.explore-products{
height: 530px;
position: relative;
box-shadow: 2px 2px 15px rgba(0,0,0,0.10);
box-sizing:border-box;
}
.explore-products strong{
z-index: 2;
}
.explore-img{
width:100% !important;
height: 100% !important;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.explore-img img{
width:100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
margin: 0px;
padding: 0px;
}
/*making-responsive-css-------*/
@media(max-width:600px){
.slider-heading h3{
font-size: 21px;
}
.product-box{
width: 310px;
margin: 10px;
box-sizing: border-box;
}
.explore-products{
height: 427px;
}
.product-box img{
height:190px;
width:160px;
padding:0px;}
.product-box strong{
font-size: 21px;
}
.lSAction > a{
display:none;
}
.products-slider{
background-color: #f5f5f7;
padding: 0px;}
}
@media(max-width:400px){
.product-box{
width: 280px;
}
.buy-btn{
font-size: 0.8rem;
}
}
@media(max-width:324px){
.product-box{
width: 225px;
}
.product-box img{
width: 140px;
height:165px;
}
.explore-products{
height: 445px;
}
.buy-price{
flex-direction: column;
}
.buy-price .buy-btn{
width: 100%;
}
}
</style>jаvascript КОД:
<script type="text/jаvascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<script type="text/jаvascript">
$(document).ready(function() {
$('.autoWidth').lightSlider({
autoWidth:true,
onSliderLoad: function() {
$('.autoWidth').removeClass('cS-hidden');
}
});
});
</script>
