Skip to content

J
joshine
Commit 63f62b18 by lmf
Options

优化首页轮播图

parent f43bb033
Showing with 51 additions and 82 deletions
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
...@@ -4,57 +4,15 @@ ...@@ -4,57 +4,15 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
?> ?>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 100%;
height: 280px;
margin: 100px auto;
}
#box .list li{
position: absolute;
top: 0;
left: 0;
display: none;
}
#box .list li.current{
display: block;
}
#box .count{
position: absolute;
left: 10px;
bottom: 10px;
}
#box .count li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fa0;
text-align: center;
line-height: 20px;
margin-left: 10px;
color: #fff;
opacity: 0.8;
cursor: pointer;
}
#box .count li.current{
background-color: #f60;
opacity: 1;
}
</style>
<div id="box"> <div id="box">
<ul class="list"> <ul class="list">
<li class="current"><img src="http://www.joshine.vip/media/slidebanner/2/_/2_1_.jpg" alt=""></li> <li class="current">
<a href="https://www.joshine.com/on-sale"><img src="http://www.joshine.vip/media/slidebanner/2/_/2_1_.jpg" alt="Joshine Flash Sale"></a>
</li>
<li><img src="http://www.joshine.vip/media/slidebanner/1/_/1_1_.jpg" alt=""></li> <li><img src="http://www.joshine.vip/media/slidebanner/1/_/1_1_.jpg" alt=""></li>
</ul> </ul>
<ul class="count"> <ul class="count">
<li class="current">1</li> <li class="current"></li>
<li>2</li> <li></li>
</ul> </ul>
</div> </div>
\ No newline at end of file
app/design/frontend/Joshine/breeze/web/css/_custom.less
...@@ -198,6 +198,7 @@ ...@@ -198,6 +198,7 @@
margin: 0; margin: 0;
} }
footer{ footer{
margin-top: 20px;
background: #000; background: #000;
color: #fff; color: #fff;
padding: 10px ; padding: 10px ;
...@@ -554,43 +555,51 @@ ul { ...@@ -554,43 +555,51 @@ ul {
line-height: 1; line-height: 1;
} }
.wrapper_slider { //首页轮播图
.banner_item { #box > ul,li{
position: relative; margin: 0;
img { padding: 0;
list-style: none;
}
#box{
width: 100%;
height: 280px;
margin: 100px auto;
}
#box .list li{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; display: none;
} }
&:first-child { #box .list li.current{
img { display: block;
position: static; }
} #box .count{
} position: absolute;
} left: 10px;
.owl-wrapper-outer{ bottom: 10px;
.owl-wrapper{
.owl-item{
.banner_item{
img{
width: 100%; width: 100%;
height: auto; padding: 0.625rem 0;
} display: flex;
} justify-content: center;
} gap: 0.5rem;
} }
} #box .count li{
.owl-theme { float: left;
.owl-controls { width: 20px;
.owl-buttons { height: 20px;
.owl-prev { border-radius: 50%;
left: 20px; background-color: #000;
} text-align: center;
.owl-next { line-height: 20px;
right: 20px; margin-left: 10px;
} color: #fff;
} opacity: 0.8;
} cursor: pointer;
} }
#box .count li.current{
background-color: #fff;
opacity: 1;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment